Understanding Static Files in Django (with Code Examples)
Last updated 1 month, 2 weeks ago | 158 views 75 5
In Django, static files are files that don’t change on the server side and are used in the frontend — such as CSS, JavaScript, and images. Handling them properly is essential for the design and functionality of a Django web application.
This guide walks you through Django's static files system, including how to configure, use, and manage static files efficiently in both development and production.
Step-by-Step: Configuring Static Files in Django
Step 1: Update Settings
In your Django project's settings.py:
# settings.py
import os
# URL to use when referring to static files located in STATIC_ROOT
STATIC_URL = '/static/'
# Directory where collectstatic will collect static files for production
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# Additional locations the staticfiles app will traverse
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
Step 2: Create Static Directory
Inside your Django project root, create a folder named static/:
project_root/
├── static/
│ ├── css/
│ │ └── styles.css
│ ├── js/
│ │ └── main.js
│ └── images/
│ └── logo.png
You can now put all your static files (CSS, JS, images) inside this folder.
Step 3: Load Static Files in Templates
In your Django HTML templates:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Static Files Example</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>Welcome to Django Static Files!</h1>
<img src="{% static 'images/logo.png' %}" alt="Logo">
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
The
{% load static %}template tag must be at the top to use{% static %}.
Step 4: Run Development Server
In development mode (DEBUG=True), Django automatically serves static files.
python manage.py runserver
You can view your site and see that the static files are loaded correctly.
Step 5: Prepare Static Files for Production
For production, you must collect all static files into STATIC_ROOT using:
python manage.py collectstatic
This copies files from each app's /static/ and STATICFILES_DIRS to the STATIC_ROOT.
Static Files in Django Apps
Django allows each app to have its own static/ directory. For example:
myapp/
├── static/
│ └── myapp/
│ └── css/
│ └── app.css
Access it like this in templates:
<link rel="stylesheet" href="{% static 'myapp/css/app.css' %}">
This helps encapsulate and organize your app-specific assets.
Full Example Project Structure
myproject/
├── myapp/
│ ├── static/
│ │ └── myapp/
│ │ └── css/
│ │ └── app.css
│ └── templates/
│ └── index.html
├── static/
│ └── css/
│ └── global.css
├── manage.py
└── myproject/
└── settings.py
index.html
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/global.css' %}">
<link rel="stylesheet" href="{% static 'myapp/css/app.css' %}">
</head>
<body>
<h1>Hello from Django</h1>
</body>
</html>
app.css
body {
background-color: lightblue;
}
global.css
h1 {
color: darkgreen;
}
✅ Tips for Using Static Files
-
Organize by type: Keep your
css/,js/, andimages/folders organized insidestatic/. -
Use versioning: For caching purposes, include version numbers or hashes in filenames (e.g.,
main.v1.css). -
Use
ManifestStaticFilesStoragein production: This helps Django manage static file versions with hashed filenames. -
Leverage CDN: For large-scale apps, serve static files via a CDN for performance.
-
Use
collectstaticbefore deployment: Always collect static files before pushing to production.
⚠️ Common Pitfalls
-
Forgetting
{% load static %}: Static files won’t load unless you load the tag library. -
Wrong path in
{% static %}: Always include the correct relative path from thestatic/folder. -
Missing static files in production: Ensure
collectstaticis run andSTATIC_ROOTis properly configured. -
Using wrong directory name: Don’t name your folder
staticsor anything else. Django looks forstatic/. -
Not setting up static file serving in production: Django doesn’t serve static files in production — configure your web server (like Nginx) for that.
Complete Working Example
Directory Structure
myproject/
├── myapp/
│ ├── static/
│ │ └── myapp/
│ │ └── css/
│ │ └── style.css
│ ├── templates/
│ │ └── home.html
│ ├── views.py
│ └── urls.py
├── myproject/
│ └── settings.py
├── static/
│ └── css/
│ └── global.css
├── manage.py
views.py
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
urls.py
from django.urls import path
from .views import home
urlpatterns = [
path('', home, name='home'),
]
home.html
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/global.css' %}">
<link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
</head>
<body>
<h1>Welcome to the Static File Demo</h1>
</body>
</html>
style.css
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
global.css
h1 {
color: navy;
text-align: center;
}
Conclusion
Static files are crucial for the frontend of Django applications. Proper management, especially in production, ensures better performance, maintainability, and user experience.
By following best practices, organizing your assets, and avoiding common mistakes, you'll have full control over your project's look and feel.
