How to Add Static Files in Django: A Complete Guide
Last updated 1 month, 2 weeks ago | 136 views 75 5

In Django, static files refer to the assets like CSS, JavaScript, images, or any files used to style and enhance the frontend of your web application. Django provides a built-in way to manage and serve these files, especially during development and deployment.
This article walks you through how to add static files in a Django project step-by-step, including configuration, usage, and a complete working example.
✅ What Are Static Files?
Static files are files that don’t change dynamically with user interactions and remain constant. They typically include:
-
CSS files for styling
-
JavaScript files for interactivity
-
Images (PNG, JPG, SVG)
-
Fonts and icons
Step-by-Step: Adding Static Files in Django
Step 1: Configure Static File Settings
Open your settings.py
file and define these variables:
import os
# URL prefix for static files
STATIC_URL = '/static/'
# Additional directories to search for static files
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# Optional: Directory where collected static files will go (for production)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
✅
STATIC_URL
tells Django the base URL to serve static files.
✅STATICFILES_DIRS
lists extra directories where Django should look for static files during development.
Step 2: Create Static File Folders
In your project’s root, create a folder named static/
:
myproject/
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
Step 3: Load Static Files in Templates
In your Django templates (e.g., base.html
or home.html
), load and use static files:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Django Static Example</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Hello Django</h1>
<img src="{% static 'images/logo.png' %}" alt="Logo">
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>
Don’t forget
{% load static %}
at the top of your template. It's required to use{% static %}
.
Step 4: Running the Server
When DEBUG = True
in development, Django will serve static files automatically.
python manage.py runserver
Visit http://127.0.0.1:8000
and check if your static files load correctly.
Static Files in Django Apps
You can also place static files inside a Django app's directory:
myapp/
├── static/
│ └── myapp/
│ ├── css/
│ │ └── app.css
│ └── js/
│ └── app.js
To use these in templates:
<link rel="stylesheet" href="{% static 'myapp/css/app.css' %}">
⚠️ Keep the app name in the path (
myapp/css/app.css
) when referencing static files inside apps.
Preparing Static Files for Production
In production, Django does not serve static files automatically. You need to collect them first:
-
Make sure
STATIC_ROOT
is defined insettings.py
. -
Run:
python manage.py collectstatic
This command copies all static files from static/
, static/
folders in apps, and STATICFILES_DIRS
to the STATIC_ROOT
directory.
You can then serve them using your web server (e.g., Nginx).
Full Working Example
Project Structure
myproject/
├── myapp/
│ ├── templates/
│ │ └── home.html
│ ├── static/
│ │ └── myapp/
│ │ └── css/
│ │ └── app.css
├── static/
│ └── css/
│ └── global.css
├── myproject/
│ └── settings.py
├── manage.py
home.html
{% load static %}
<html>
<head>
<title>Static File Example</title>
<link rel="stylesheet" href="{% static 'css/global.css' %}">
<link rel="stylesheet" href="{% static 'myapp/css/app.css' %}">
</head>
<body>
<h1>Hello Static Files!</h1>
</body>
</html>
global.css
h1 {
color: blue;
}
app.css
body {
background-color: #f0f0f0;
}
Tips for Using Static Files in Django
-
Use clear folder structures like
css/
,js/
,images/
insidestatic/
. -
Keep static files app-specific for modularity.
-
Use browser dev tools to check if files are loading.
-
Use hashed filenames (or
ManifestStaticFilesStorage
) in production to manage caching. -
Collect static before every deployment if files change.
⚠️ Common Mistakes to Avoid
Mistake | Why It’s a Problem |
---|---|
❌ Missing {% load static %} |
Template tag {% static %} won’t work |
❌ Wrong file paths | Files won’t load if path doesn’t match |
❌ Serving static files with DEBUG=False |
You must use a web server or proper config |
❌ Not using collectstatic |
Static files won’t be available in production |
❌ Misnaming the folder (statics/ ) |
Django looks for static/ specifically |
Summary
Adding static files in Django involves:
-
Configuring paths in
settings.py
-
Creating a
static/
folder for assets -
Using
{% load static %}
and{% static 'path' %}
in templates -
Running the development server or using
collectstatic
for production
With these steps, you can build well-styled, interactive Django apps efficiently.