Bài 06: Static Files Management

Static Files Trong Django

Static Files Là Gì?

Static files là các files không thay đổi: CSS, JavaScript, images, fonts, icons. Khác với dynamic content từ database, static files được serve trực tiếp.

Types of Static Files:

Static Files:├── CSS          - Stylesheets├── JavaScript   - Client-side scripts├── Images       - Icons, logos, backgrounds├── Fonts        - Custom fonts├── Videos       - Static videos└── Documents    - PDFs, downloadable files

Static vs Media Files:

# STATIC FILES# - Developer-created (CSS, JS, images in code)# - Part of application# - Version controlled (Git)# - Examples: style.css, logo.png, main.js STATIC_URL = '/static/'STATIC_ROOT = BASE_DIR / 'staticfiles' # MEDIA FILES  # - User-uploaded (profile pictures, documents)# - Generated at runtime# - NOT in version control# - Examples: user-avatar.jpg, document.pdf MEDIA_URL = '/media/'MEDIA_ROOT = BASE_DIR / 'media'

Static Files Configuration

Basic Settings

# settings.pyfrom pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent # Static files (CSS, JavaScript, Images)# URL to use when referring to static filesSTATIC_URL = '/static/' # Additional locations of static filesSTATICFILES_DIRS = [    BASE_DIR / 'static',  # Project-level static files] # Directory where collectstatic will collect static filesSTATIC_ROOT = BASE_DIR / 'staticfiles' # Static files finders (default, usually don't need to change)STATICFILES_FINDERS = [    'django.contrib.staticfiles.finders.FileSystemFinder',    'django.contrib.staticfiles.finders.AppDirectoriesFinder',]

Directory Structure

myproject/├── manage.py├── myproject/│   ├── settings.py│   └── ...│├── static/                          # Project-level static files│   ├── css/│   │   ├── style.css               # Global styles│   │   ├── base.css│   │   └── admin-override.css│   ├── js/│   │   ├── main.js                 # Global scripts│   │   ├── utils.js│   │   └── vendor/│   │       ├── jquery.min.js│   │       └── bootstrap.min.js│   ├── images/│   │   ├── logo.png│   │   ├── favicon.ico│   │   └── backgrounds/│   │       └── hero.jpg│   └── fonts/│       ├── roboto.woff2│       └── opensans.woff2│├── blog/                            # Blog app│   ├── static/│   │   └── blog/                    # Namespaced!│   │       ├── css/│   │       │   └── blog.css│   │       ├── js/│   │       │   └── blog.js│   │       └── images/│   │           └── blog-icon.png│   └── templates/│       └── blog/│├── shop/                            # Shop app│   ├── static/│   │   └── shop/                    # Namespaced!│   │       ├── css/│   │       │   └── shop.css│   │       └── js/│   │           └── cart.js│   └── templates/│       └── shop/│└── staticfiles/                     # Collected static files (production)    ├── css/    ├── js/    ├── images/    ├── blog/    └── shop/

Why Namespace Static Files?

# ❌ BAD - No namespace (conflicts!)blog/static/css/style.cssshop/static/css/style.css# Both become /static/css/style.css → Conflict! # ✅ GOOD - Namespacedblog/static/blog/css/blog.css       # /static/blog/css/blog.cssshop/static/shop/css/shop.css       # /static/shop/css/shop.css# No conflicts!

Using Static Files in Templates

Load Static Template Tag

{# ALWAYS load static tag at top of template #}{% load static %} <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>My Site</title>        {# CSS files #}    <link rel="stylesheet" href="{% static 'css/style.css' %}">    <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}">        {# Favicon #}    <link rel="icon" href="{% static 'images/favicon.ico' %}"></head><body>    {# Images #}    <img src="{% static 'images/logo.png' %}" alt="Logo">        {# JavaScript #}    <script src="{% static 'js/main.js' %}"></script>    <script src="{% static 'blog/js/blog.js' %}"></script></body></html>

Static Files Examples

CSS:

{# Single CSS file #}<link rel="stylesheet" href="{% static 'css/style.css' %}"> {# Multiple CSS files #}<link rel="stylesheet" href="{% static 'css/base.css' %}"><link rel="stylesheet" href="{% static 'css/layout.css' %}"><link rel="stylesheet" href="{% static 'blog/css/blog.css' %}"> {# Vendor CSS #}<link rel="stylesheet" href="{% static 'css/vendor/bootstrap.min.css' %}"> {# Conditional CSS #}{% if user.is_staff %}    <link rel="stylesheet" href="{% static 'css/admin-panel.css' %}">{% endif %}

JavaScript:

{# jQuery from vendor #}<script src="{% static 'js/vendor/jquery.min.js' %}"></script> {# App scripts #}<script src="{% static 'js/utils.js' %}"></script><script src="{% static 'js/main.js' %}"></script> {# App-specific scripts #}<script src="{% static 'blog/js/blog.js' %}"></script> {# Inline script with static URL #}<script>    const API_URL = "{% url 'api:posts' %}";    const STATIC_URL = "{% static '' %}";</script>

Images:

{# Logo #}<img src="{% static 'images/logo.png' %}" alt="Site Logo" width="200"> {# Background image in CSS #}<style>.hero {    background-image: url('{% static 'images/backgrounds/hero.jpg' %}');    background-size: cover;}</style> {# Inline style #}<div style="background-image: url('{% static 'images/hero.jpg' %}')">    Hero content</div> {# Responsive images #}<picture>    <source media="(min-width: 768px)"             srcset="{% static 'images/hero-large.jpg' %}">    <source media="(min-width: 480px)"             srcset="{% static 'images/hero-medium.jpg' %}">    <img src="{% static 'images/hero-small.jpg' %}" alt="Hero"></picture> {# App-specific images #}<img src="{% static 'blog/images/default-post.jpg' %}" alt="Default post image">

Fonts:

/* static/css/fonts.css */@font-face {    font-family: 'Roboto';    src: url('/static/fonts/roboto.woff2') format('woff2'),         url('/static/fonts/roboto.woff') format('woff');    font-weight: normal;    font-style: normal;} body {    font-family: 'Roboto', sans-serif;}

Assign Static URL to Variable

{% load static %} {# Assign to variable #}{% static 'images/logo.png' as logo_url %} {# Use multiple times #}<img src="{{ logo_url }}" alt="Logo"><a href="/"><img src="{{ logo_url }}" alt="Home"></a> {# Use in condition #}{% if logo_url %}    <img src="{{ logo_url }}" alt="Logo">{% endif %}

Development vs Production

Development (DEBUG = True)

# settings.pyDEBUG = True # Django automatically serves static files in development# No need for collectstatic# Files served from:# - STATICFILES_DIRS locations# - App static/ directories

How Django serves static files in development:

# Django automatically adds this when DEBUG=Truefrom django.conf import settingsfrom django.conf.urls.static import static if settings.DEBUG:    urlpatterns += static(settings.STATIC_URL,                          document_root=settings.STATIC_ROOT)

Production (DEBUG = False)

# settings.pyDEBUG = False # Must collect static filesSTATIC_ROOT = BASE_DIR / 'staticfiles' # Run collectstatic# python manage.py collectstatic

Why collectstatic?

# Development: Files scattered in multiple locationsstatic/css/style.cssblog/static/blog/css/blog.cssshop/static/shop/css/shop.css # Production: All files collected in one placestaticfiles/css/style.cssstaticfiles/blog/css/blog.cssstaticfiles/shop/css/shop.css # Benefits:# - Single directory to serve# - Easier to configure web server (Nginx, Apache)# - Better performance# - Can use CDN

collectstatic Command

Running collectstatic

# Collect all static filespython manage.py collectstatic # Output:# You have requested to collect static files at the destination# location as specified in your settings:#     /path/to/project/staticfiles# # This will overwrite existing files!# Are you sure you want to do this?# # Type 'yes' to continue, or 'no' to cancel: yes# # Copying '/path/to/static/css/style.css'# Copying '/path/to/blog/static/blog/css/blog.css'# ...# 152 static files copied to '/path/to/project/staticfiles'. # Skip confirmation promptpython manage.py collectstatic --noinput # Clear existing files firstpython manage.py collectstatic --clear --noinput # Dry run (see what would be copied)python manage.py collectstatic --dry-run

collectstatic Workflow

# Step 1: Configure STATIC_ROOT# settings.pySTATIC_ROOT = BASE_DIR / 'staticfiles' # Step 2: Run collectstatic# Terminal:python manage.py collectstatic # Step 3: Configure web server to serve from STATIC_ROOT# Nginx example:location /static/ {    alias /path/to/project/staticfiles/;} # Step 4: Deploy!

Advanced Static Files

Static File Storage

# settings.py # Default storage (local filesystem)STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage' # Manifest static files storage (adds hash to filenames)STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage' # Benefits of ManifestStaticFilesStorage:# - Cache busting (filename changes when content changes)# - Long-term browser caching# - Example: style.css → style.abc123.css

How ManifestStaticFilesStorage works:

# Before:style.cssmain.jslogo.png # After collectstatic with ManifestStaticFilesStorage:style.abc123.css       # Hash addedmain.def456.js         # Hash added  logo.789ghi.png        # Hash added # Templates automatically use hashed names{% static 'css/style.css' %}# Becomes: /static/css/style.abc123.css # When you update style.css:style.xyz999.css       # New hash!# Browser fetches new file (cache busting)

findstatic Command

# Find where a static file is locatedpython manage.py findstatic css/style.css # Output:# Found 'css/style.css' here:#   /path/to/project/static/css/style.css # Find app-specific staticpython manage.py findstatic blog/css/blog.css # Output:#   /path/to/project/blog/static/blog/css/blog.css # Show all locationspython manage.py findstatic css/style.css --all

Custom Static Files Finder

# settings.pySTATICFILES_FINDERS = [    'django.contrib.staticfiles.finders.FileSystemFinder',    'django.contrib.staticfiles.finders.AppDirectoriesFinder',    # 'myapp.finders.CustomFinder',  # Custom finder] # Custom finder example# myapp/finders.pyfrom django.contrib.staticfiles.finders import BaseFinder class CustomFinder(BaseFinder):    def find(self, path, all=False):        # Custom logic to find static files        pass        def list(self, ignore_patterns):        # List all static files        pass

CDN Integration

WhiteNoise for Static Files

# Install WhiteNoisepip install whitenoise

# settings.py # Add to MIDDLEWAREMIDDLEWARE = [    'django.middleware.security.SecurityMiddleware',    'whitenoise.middleware.WhiteNoiseMiddleware',  # Add this!    # ... other middleware] # Static files settingsSTATIC_ROOT = BASE_DIR / 'staticfiles'STATIC_URL = '/static/' # WhiteNoise configurationSTATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' # Benefits:# - Serves static files efficiently in production# - Compression (gzip, brotli)# - Caching headers# - No need for separate web server for static files

AWS S3 for Static Files

# Install boto3 and django-storagespip install boto3 django-storages

# settings.py INSTALLED_APPS = [    # ...    'storages',] # AWS S3 settingsAWS_ACCESS_KEY_ID = 'your-access-key'AWS_SECRET_ACCESS_KEY = 'your-secret-key'AWS_STORAGE_BUCKET_NAME = 'your-bucket-name'AWS_S3_REGION_NAME = 'us-east-1' # Static files on S3STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'STATIC_URL = f'https://{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com/' # Run collectstatic → uploads to S3python manage.py collectstatic

Best Practices

1. Always Namespace App Static Files

# ✅ GOODblog/  └── static/      └── blog/              # Namespace!          ├── css/          ├── js/          └── images/ # ❌ BADblog/  └── static/               # No namespace      ├── css/      ├── js/      └── images/

2. Version Control Static Files

# .gitignore# DON'T commit collected static files/staticfiles//static_root/ # DO commit source static files# /static/# /blog/static/

3. Optimize Images

# Use appropriate image formats.jpg / .jpeg   # Photos.png           # Icons, logos (transparency).svg           # Vector graphics.webp          # Modern format (smaller size) # Compress images before committing# Tools: TinyPNG, ImageOptim, Squoosh # Responsive images<picture>    <source srcset="hero-large.webp" media="(min-width: 1024px)">    <source srcset="hero-medium.webp" media="(min-width: 768px)">    <img src="hero-small.webp" alt="Hero"></picture>

4. Minify CSS and JavaScript

# Development: Use readable filesstatic/css/style.cssstatic/js/main.js # Production: Use minified filesstatic/css/style.min.cssstatic/js/main.min.js # Tools:# - UglifyJS (JavaScript)# - CSSNano (CSS)# - Django Compressor# - Webpack, Vite (build tools)

5. Use {% load static %} Once

{# ✅ GOOD - Load once at top #}{% extends 'base.html' %}{% load static %} {% block content %}    <img src="{% static 'images/photo.jpg' %}">{% endblock %} {# ❌ BAD - Load multiple times #}{% extends 'base.html' %} {% block content %}    {% load static %}    <img src="{% static 'images/photo.jpg' %}">{% endblock %}

Troubleshooting

Static Files Not Loading

# 1. Check DEBUG modeDEBUG = True  # Should work in development # 2. Check STATIC_URLSTATIC_URL = '/static/'  # Must start and end with / # 3. Check STATICFILES_DIRSSTATICFILES_DIRS = [    BASE_DIR / 'static',  # Correct path?] # 4. Check app in INSTALLED_APPSINSTALLED_APPS = [    'django.contrib.staticfiles',  # Must be included!    # ... your apps] # 5. Check template tag{% load static %}  # At top of template{% static 'css/style.css' %}  # Correct path? # 6. Run findstaticpython manage.py findstatic css/style.css

collectstatic Errors

# Error: STATIC_ROOT not set# Solution: Add to settings.pySTATIC_ROOT = BASE_DIR / 'staticfiles' # Error: Permission denied# Solution: Check directory permissionschmod -R 755 staticfiles/ # Error: File conflicts# Solution: Clear and recollectpython manage.py collectstatic --clear --noinput

Bài Tập

Bài 1: Setup Static Files

Task: Configure static files cho blog project:

# 1. Create directory structure:project/├── static/│   ├── css/style.css│   ├── js/main.js│   └── images/logo.png└── blog/    └── static/blog/        ├── css/blog.css        └── js/blog.js # 2. Configure settings.py# 3. Use in templates# 4. Run findstatic to verify

Bài 2: Template with Static Files

Task: Create complete template với static files:

{# base.html #}- Load static tag- Include CSS files (global + app-specific)- Include JavaScript (vendor + custom)- Add favicon- Add logo image

Bài 3: collectstatic Practice

Task: Practice deployment workflow:

# 1. Set STATIC_ROOT# 2. Run collectstatic# 3. Verify files collected# 4. Configure for production (DEBUG=False)# 5. Test static files serving

Bài 4: Optimize Static Files

Task: Optimize project static files:

# 1. Compress images (reduce file size)# 2. Minify CSS and JavaScript# 3. Use ManifestStaticFilesStorage# 4. Configure browser caching headers# 5. Measure improvement (file sizes, load time)

Tài Liệu Tham Khảo

Previous: Bài 05 Part 2: Advanced Templates | Next: Bài 07: Models Basics

#javascript

Static Files Management