Django Tutorial for Beginners [Step by Step] – Part 7: Staticfiles in Django

Welcome to Part 7 of our Django tutorial series.

In this tutorial, you'll learn how to work with static files in Django, including CSS, JavaScript, and images, and how to configure them properly in your project.

Last updated: May 14, 2025

Prerequisites

  • Knowledge of creating a basic Django project
  • Knowledge of Django's Model-View-Template (MVT) architectural pattern

Refer to parts 1–6 of this tutorial series to get a basic understanding of the above.

What Are Static Files in Django?

Static files are non-dynamic files such as CSS, JavaScript, and images that enhance the appearance and functionality of a web application.

Static files in Django are basically a folder that we create to store the images, CSS, and javascript files in order to display them to the client in the browser and serve the client.

This will separate Python code from the frontend assets to prevent clutter and disorganization in the project structure. Because dealing with the numerous sets of static files offered by each program becomes difficult in larger projects, especially those involving multiple apps or multiple images, like e-commerce websites.

In the previous tutorial, we have rendered a basic template. In this tutorial, we want to show how to serve static files in Django to the client.

Serving Static Files in Django

Unlike simple HTML websites where you can use the img tag with a set image address that is saved in some kind of folder inside the project, Django requires explicit configuration to serve static files properly.

In development, Django can handle static files, but in production, it's best to use external services like AWS S3 or Google Cloud Storage for efficiency.

To serve static files in Django locally, follow these steps:

Step 1: Check installed apps in settings.py

Django provides a built-in app called django.contrib.staticfiles, which manages static files across all apps.

Open settings.py and ensure this in-built app is included in INSTALLED_APPS (this is usually enabled by default).

This app automatically collects static files from all your applications or different locations into a single directory or location, making them easy to serve in production.

Step 2: Configure static file settings

Django assigns a default static URL where all static files will be served from:

STATIC_URL = '/ static/'

This is the address that we tell Django you have to go to find our static files.

For example, if your website is doprax.com, the static files would be accessible at:

"doprax.com/static/index.css"

You can customize this URL to be like this:

STATIC_URL = '/ asset/'

But it’s best practice to keep it as /static/ for consistency.

By default, Django doesn’t know where your static files are stored. You need to explicitly define a directory for them.

Add the following setting in settings.py:

STATICFILES_DIRS = (
os.path.join(BASE_DIR,'assets'),
)

It’s a tuple and should be in the capital letters.

  • BASE_DIR is an acronym for the base directory and it refers to the project's root directory.
  • 'assets' is the folder where we will store static files.
  • You can rename 'assets' to anything you prefer, but 'static' or 'assets' are common choices.

So this STATICFILES_DIRS property tells us that static files are going to be found inside the static directory in the base directory.
Let’s save this and create an assets folder inside the base directory.

proj1 mkdir assets

We can save and store all our static files in this folder.

Let’s create a CSS file "index.css" and include it in basic_html.html which we already have to give our template a little styling.

project folder structure

Add some styles to the CSS file.

Here, we added a blue background for the whole page, then included it in our HTML template:

<link rel="stylesheet" href="/static/index.css/">

We can also include our CSS file dynamically. First, you need to load static in the head tag like this:

It's better to load static files dynamically using Django's {% static %} template tag.

Open your HTML template and update the <head> section to load the static:

<head>
  {% load static %}
  <title>HTML basics</title>
  <link rel="stylesheet" href="{% static 'index.css' %}">
</head>

  • {% load static %} allows us to use the {% static %} tag.
  • {% static 'index.css' %} generates the correct file path based on the static configuration.

This dynamic approach is a better way to load statis files to ensure that if you ever change STATIC_URL, you won't have to go through every code to change each one. The updates will reflect automatically across all files.

Step 4: Configuring static files in urls.py

To set up static files in URLs, open urls.py and import the required modules:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static

Now we need to append to URL patterns so that Django can handle serving static files and the way we do that is by adding this line of code:

urlpatterns+=staticfiles_urlpatterns()

And yes! That's it for now.

Next:

Django Tutorial for Beginners [Step by Step] – Part 8: User Authentication in Django.

If you wish to join a community of self-starters learning new skills and creating projects from scratch, join our Discord channel and share your passion.