Django Static Files

Static files are files that are generally served to the browser without being generated dynamically for every request.

• CSS files
• JavaScript files
• Images
• Fonts
• Icons

Static files are used to improve the appearance and functionality of a website.

• CSS controls page design.
• JavaScript adds browser-side functionality.
• Images improve visual presentation.
• Fonts improve typography.
• Icons provide visual controls.

A common app-level structure can look like this:

myapp/
│
├── views.py
├── models.py
│
├── static/
│   └── myapp/
│       ├── css/
│       │   └── style.css
│       ├── js/
│       │   └── script.js
│       └── images/
│           └── logo.png
│
└── templates/
    └── home.html

Django uses STATIC_URL to define the URL prefix used when serving static files.

STATIC_URL = 'static/'

This setting is commonly present in the Django project's settings.py.

Django provides the static template tag for generating URLs for static files.

{% load static %}

After loading it, a static file can be referenced using:

{% static 'myapp/css/style.css' %}

Before using the static template tag in a template, load the static template tag library.

{% load static %}

This is normally placed near the top of the template.

{% load static %}

<link rel="stylesheet"
      href="{% static 'myapp/css/style.css' %}">

Django generates the appropriate static URL for the CSS file.

{% load static %}

<script src="{% static 'myapp/js/script.js' %}">
</script>

This allows a JavaScript file to be loaded from the static files system.

{% load static %}

<img src="{% static 'myapp/images/logo.png' %}"
     alt="Logo">

The same static mechanism can be used for images.

STATICFILES_DIRS can specify additional directories where Django should look for static files.

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

This is useful when a project has a project-level static directory.

project/
│
├── manage.py
├── static/
│   ├── css/
│   ├── js/
│   └── images/
│
├── myproject/
└── myapp/

The project-level directory can be configured through STATICFILES_DIRS.

Static files can also be stored inside individual Django applications.

myapp/
└── static/
    └── myapp/
        ├── css/
        ├── js/
        └── images/

This helps keep an app's static resources together with the app.

Using an application-specific directory inside static helps avoid name conflicts between files from different applications.

static/
└── students/
    └── css/
        └── style.css

STATIC_ROOT specifies the directory where static files are collected when the collectstatic command is used.

STATIC_ROOT = BASE_DIR / "staticfiles"

It is especially important when preparing static files for deployment.

Django provides the collectstatic management command to collect static files into the configured STATIC_ROOT directory.

python manage.py collectstatic

The collected files can then be served by an appropriate production setup.

During development, Django can serve static files when DEBUG = True and the static files application is configured.

This makes it convenient to test CSS, JavaScript, and images while developing.

Django's static files support is provided by the django.contrib.staticfiles application.

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
]

It is normally included in a new Django project.

If many pages share the same CSS or JavaScript, static files can be referenced from the base template.

{% load static %}

<link rel="stylesheet"
      href="{% static 'css/style.css' %}">

{% block content %}
{% endblock %}

style.css

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

Template:

{% load static %}

<link rel="stylesheet"
      href="{% static 'myapp/css/style.css' %}">

script.js

function showMessage() {
    alert("Hello Django!");
}

Template:

{% load static %}

<script src="{% static 'myapp/js/script.js' %}">
</script>

<button onclick="showMessage()">
Click Me
</button>

{% load static %}

<img
    src="{% static 'myapp/images/logo.png' %}"
    alt="My Logo"
>

The image file is stored inside the static directory and referenced through the static template tag.

Static files work well with template inheritance. A base template can load common CSS and JavaScript files once.

{% extends 'base.html' %}

{% block content %}

<h1>Home Page</h1>

{% endblock %}

The child template automatically uses the static resources included by the base layout.

Static files and media files are different types of resources.

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

STATIC_ROOT = BASE_DIR / "staticfiles"

The exact configuration can vary depending on the project and deployment setup.

A static file path should match its location inside the configured static directories.

static/
└── css/
    └── style.css

The template can reference it as:

{% static 'css/style.css' %}

• Forgetting {% load static %}
• Incorrect static file path
• Incorrect STATIC_URL
• Static files stored outside configured directories
• Incorrect STATICFILES_DIRS
• Forgetting to run collectstatic for a production setup
• Browser cache making old CSS or JavaScript appear

project/
│
├── manage.py
│
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
│
├── myproject/
│   └── settings.py
│
└── myapp/
    ├── views.py
    └── templates/
        └── home.html

1. Create static directory
        ↓
2. Add CSS, JS, images, etc.
        ↓
3. Configure static settings
        ↓
4. Load static library
        ↓
5. Use {% static %} in templates
        ↓
6. Test during development
        ↓
7. Run collectstatic for deployment

settings.py

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

Folder:

static/
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

home.html

{% load static %}

<!DOCTYPE html>
<html>

<head>

    <title>Home</title>

    <link rel="stylesheet"
          href="{% static 'css/style.css' %}">

</head>

<body>

    <img
        src="{% static 'images/logo.png' %}"
        alt="Logo"
    >

    <h1>Welcome to Django</h1>

    <script src="{% static 'js/script.js' %}">
    </script>

</body>

</html>

Django provides a structured way to manage CSS, JavaScript, images, and other static resources used by a website.

• Static files include CSS, JavaScript, images, and fonts.
• STATIC_URL defines the static URL prefix.
• {% load static %} loads Django's static template tags.
• {% static %} generates a static file URL.
• STATICFILES_DIRS can define additional static directories.
• STATIC_ROOT is used as the collection directory.
• collectstatic collects static files for deployment.
• Static files can be stored at project or app level.