Configuring Static Files in Django

3 min read

Managing static assets such as CSS, Javascript, fonts are core components of any modern web application Django provides us a large degree of freedom and flexibility on managing and serving static assets in different environments.

In this article, we will go through the configuration of static files in Django.

For the sake of scope of the article, I am assuming you have basic knowledge of Django and have a basic project up and running if not kindly go over these tutorials first.

In this article, I will configure the blog app for serving static files.

Configuring Static Files in Django

In file inside the INSTALLED_APPS list, there is an app called 'django.contrib.staticfiles', this baked in app manages the static files across the entire project during development as well in production.

First, open file and go straight to the STATIC_URL setting, which should be like this.

STATIC_URL = '/static/'

This static URL will append to base URL for serving static files in development like basically think this as a reference to static files.

You can set it to anything. Just make sure to end it a trailing slash '/' at the end.

Next, we need to declare the STATICFILES_DIRS

STATIC_URL = '/static/'

#Location of static files
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]

This tells Django the location of static files in our project. The common practice is to have all the static files in a top-level static directory.

STATICFILES_DIRS being a list indicates that having multiple static directories is possible.

Next, we have to set the STATIC_ROOT

STATIC_ROOT  = os.path.join(BASE_DIR, 'staticfiles')

STATIC_ROOT is the single root directory from where the Django application will serve the static files in production.

While deployment you would typically want to serve the static files from the conventional /var/www/

The command collectstatic will automatically compile all the static files throughout the project and dump it into a single root directory, which is declared in STATIC_ROOT.

We are done with the settings, save and close the file.

Creating Static Files

From your root directory, run the following commands in the terminal to create directories, or you can just use the GUI.

mkdir static
mkdir static/css
mkdir static/js
mkdir static/img

Now you can move all your static assets here create a base.css file and add the stylesheet from the blog app there.

Now, if you are run the server and visit the localhost, you won't see the styling, but why?

That's because static assets must be loaded explicitly in the templates.

Loading static files in Templates

Open base.html file and at the very top  add {% load static % }

{% load static %}

<!DOCTYPE html>
  <title>Django Central</title>

This tells Django to load static template tags inside the template so you use the {% static %} template filer to include different static assets.

For example, in order to include the newly created base.css file in my template, I have to add this inside the <head> of the HTML document

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

Save and reload the page, you should see the change.

Similarly, you can load different scripts and images in templates.

<img src="{% static 'img/path_to_the_img' %}">
<script src="{% static 'img/path_to_the_script' %}"></script>

Similarly, you can configure media files in Django.


Latest Articles

Latest from djangocentral

Capturing Query Parameters of request.get in Django

In Django, the request object contains a variety of information about the current HTTP request, including the query parameters. Query parameters are a way to pass additional information in the URL and are used to filter or sort data. The request object p…
Read more →

2 min read

Understanding related_name in Django Models

In Django, related_name is an attribute that can be used to specify the name of the reverse relation from the related model back to the model that defines the relation. It is used to specify the name of the attribute that will be used to access the relat…
Read more →

2 min read