Static Files in Django

SR suriya-ravichandran Updated 2 Sep 2026

4 min read · Lesson 13 of 36

« Previous Next »

Preparing your lesson...

Learning Objectives

In this lesson, you will learn: - What static files are in the context of web applications. - How to manage static files in a Django project. - How to serve static files during development and in production. - Best practices for organizing and using static files.

Introduction to Static Files

Static files are files that do not change dynamically and are served to users as-is. Common examples include CSS files, JavaScript files, images, and fonts. In a web application, static files are essential for styling and interactivity, making them a crucial part of the user experience.

Understanding Django's Static Files Framework

Django provides a built-in framework for managing static files, which simplifies the process of collecting, organizing, and serving these files. The static files framework helps you to keep your static assets organized and ensures they are served correctly in different environments (development and production).

Setting Up Static Files in Django

To manage static files in a Django project, follow these steps:

Step 1: Create a Static Directory

In your Django app, create a directory named static. This is where you will store your static files.

myproject/
    myapp/
        static/
            myapp/
                css/
                js/
                images/

In this structure, you can organize your static files by type (CSS, JavaScript, images) or by functionality. The subdirectory myapp helps avoid naming collisions with other apps in your project.

Step 2: Configure Static Files in Settings

Next, you need to configure your Django settings to recognize the static files. Open settings.py and add the following:

# settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'myapp/static',  # Add your static directory here
]

STATIC_URL is the URL prefix for serving static files.
STATICFILES_DIRS is a list of directories where Django will look for static files, in addition to app-specific static folders.

Step 3: Using Static Files in Templates

To use static files in your HTML templates, you need to load the static template tag. Here’s how you can do it:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'myapp/css/styles.css' %}">
    <title>My Django App</title>
</head>
<body>
    <h1>Welcome to My Django App</h1>
    <script src="{% static 'myapp/js/scripts.js' %}"></script>
</body>
</html>

In this example, we load the static template tag and use it to link to a CSS file and a JavaScript file. This ensures that the correct URL is generated for the static files.

Serving Static Files in Development

During development, Django can serve static files automatically. Just make sure you have DEBUG = True in your settings.py. When you run your development server using:

django-admin runserver

Django will serve your static files at the URL specified by STATIC_URL.

Collecting Static Files for Production

In a production environment, you typically do not serve static files directly from your Django application. Instead, you collect all static files into a single directory using the collectstatic command. This command gathers static files from each app and any additional directories specified in STATICFILES_DIRS.

To collect static files, run:

python manage.py collectstatic

This will create a staticfiles directory in your project root by default, containing all the static files. You can then configure your web server (like Nginx or Apache) to serve files from this directory.

Best Practices for Managing Static Files

Organize Your Files: Keep your static files organized by type or functionality to make it easier to manage them.
Use Versioning: Consider adding a version number to your static files (e.g., styles.v1.css) to help with caching issues when you make updates.
Minify CSS and JavaScript: Use tools to minify your CSS and JavaScript files for better performance in production.
Use a CDN: For better performance, consider serving static files from a Content Delivery Network (CDN) in production.

Common Mistakes and How to Avoid Them

Forgetting to Load Static: Remember to include {% load static %} at the top of your templates when using static files.
Incorrect Paths: Ensure that the paths you use in the static tag are correct and match your directory structure.
Not Running collectstatic: Always run python manage.py collectstatic before deploying your application to ensure all static files are collected.

Key Takeaways

Static files are essential for the styling and interactivity of web applications.
Django provides a built-in framework for managing static files, which simplifies their organization and serving.
Always organize your static files properly and use versioning and minification in production.
Use collectstatic to gather all static files for deployment.

Conclusion

In this lesson, you learned how to manage and serve static files in a Django application. You set up directories for your static files, configured your Django settings, and learned how to use static files in templates. Additionally, you understood the importance of serving static files correctly in both development and production environments.

In the next lesson, we will explore Django Middleware, which allows you to process requests globally before they reach your views. Stay tuned!

Exercises

Practice Exercises

Create Static Files: Create a new Django app within your project. Inside this app, create a static directory and add a CSS file. Link this CSS file to an HTML template and verify that the styles are applied.
Modify Static Files: Add a JavaScript file to your static directory and create a simple script that changes the content of an HTML element when the page loads. Verify that the script works correctly.
Use collectstatic: After modifying your static files, run the collectstatic command. Check the staticfiles directory to ensure that the files are collected correctly.
Organize Your Static Files: Refactor your static files by organizing them into subdirectories (e.g., css, js, images). Update your HTML templates accordingly to ensure everything still works.
Mini-Project: Create a simple Django application that includes a homepage styled with CSS, a JavaScript file that enhances interactivity, and at least one image. Ensure that all static files are served correctly and organized properly.

Assignment

Build a small Django website that includes a landing page. The landing page should have a header, a footer, and a main content area styled with CSS. Include JavaScript that displays an alert when the page loads. Ensure that all static files are organized and served correctly. Deploy your application to a local server and verify that everything works as expected.

Summary

Static files are essential for web applications, including CSS, JavaScript, and images.
Django provides a framework to manage static files easily.
Use STATIC_URL and STATICFILES_DIRS in your settings to configure static files.
Load static files in templates using {% load static %}.
Use the collectstatic command to gather static files for production.
Organize static files properly and follow best practices for performance.
Common mistakes include incorrect paths and forgetting to load static files.
Always test your static files in both development and production environments.

Video Resources

Django Static Files Tutorial

Watch on YouTube

Serving Static Files in Django

Watch on YouTube

Django Collectstatic Command Explained

Watch on YouTube

Advanced URL Patterns and Views

Django Middleware