DjangoHow-ToBeginner · 4 min read

How to Use Static Files in Django: Setup and Example

In Django, static files like CSS, JavaScript, and images are managed using the STATIC_URL and STATICFILES_DIRS settings. You place your static files in designated folders and use the {% load static %} template tag to reference them in HTML templates.

📐

Syntax

To use static files in Django, you need to configure settings and use template tags:

STATIC_URL: URL prefix for static files.
STATICFILES_DIRS: List of folders where Django looks for static files during development.
{% load static %}: Template tag to enable static file usage in templates.
{% static 'path/to/file' %}: Template tag to get the URL of a static file.

python and django template

STATIC_URL = '/static/'

# Optional: add folders where static files are stored
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

# In your template HTML file:
# {% load static %}
# <link rel="stylesheet" href="{% static 'css/style.css' %}">

💻

Example

This example shows how to serve a CSS file named style.css located in a static/css folder inside your Django project.

It demonstrates the settings and template usage to load the CSS file correctly.

python, django template, css

# settings.py
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

# Directory structure:
# myproject/
# ├── static/
# │   └── css/
# │       └── style.css
# └── templates/
#     └── base.html

# templates/base.html
"""
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Files Example</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Welcome to Django Static Files</h1>
</body>
</html>
"""

# static/css/style.css
/* Simple CSS to change background color */
body {
    background-color: #e0f7fa;
    font-family: Arial, sans-serif;
}
h1 {
    color: #00796b;
}

Output

A webpage with a light teal background and a heading in dark teal color that says 'Welcome to Django Static Files'.

⚠️

Common Pitfalls

Common mistakes when using static files in Django include:

Not running python manage.py collectstatic in production to gather static files.
Forgetting to add {% load static %} in templates before using {% static %}.
Incorrect STATIC_URL or STATICFILES_DIRS settings causing files not to load.
Placing static files inside app folders but not configuring STATICFILES_DIRS or using static/ folder properly.

Example of wrong and right template usage:

django template

{# Wrong: missing load static tag #}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

{# Right: include load static tag #}
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

📊

Quick Reference

Setting/Tag	Purpose
STATIC_URL	URL prefix for static files, usually '/static/'
STATICFILES_DIRS	List of folders where Django looks for static files during development
{% load static %}	Template tag to enable static file usage
{% static 'path/to/file' %}	Returns the URL for the static file
collectstatic	Management command to collect static files for production

✅

Key Takeaways

Always set STATIC_URL and STATICFILES_DIRS correctly in settings.py.

Use {% load static %} in templates before referencing static files.

Place static files in a 'static' folder inside your project or apps.

Run 'python manage.py collectstatic' before deploying to production.

Check browser DevTools to debug missing static files or wrong URLs.