Support Our Site

To ensure we can continue delivering content and maintaining a free platform for all users, we kindly request that you disable your adblocker. Your contribution greatly supports our site's growth and development.

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><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

How to Use Subquery() in Django With Practical Examples

In the realm of web development, Django stands as a powerful and versatile framework for building robust applications. One of the key aspects of developing efficient and optimized web applications is handling database queries effectively. In this article…
Read more →

4 min read

DRF Serializer: Handling OrderedDict and Converting It to a Dictionary or JSON

In Django Rest Framework (DRF) tests, when you access, you might encounter an OrderedDict instead of a regular dictionary. This behavior is intentional and reflects the design of DRF's serialization process.Understanding the Problem The u…
Read more →

3 min read

Django Rest Framework CheetSheet: Mastering API Development

Django Rest Framework (DRF) is a powerful toolkit that makes building robust and scalable web APIs with Django a breeze. Whether you're a seasoned Django developer or a newcomer, having a comprehensive cheat sheet at your disposal can be a game-changer. …
Read more →

5 min read

How to Perform NOT Queries in Django ORM

In Django, performing NOT queries allows you to exclude certain records from the query results based on specific conditions. The NOT operator, represented by the tilde (~) when used in conjunction with the Django ORM's Q object, helps you construct compl…
Read more →

3 min read