OverIQ.com

  1. Home
  2. Django 1.10 Tutorial
  3. Handling Static Content in Django

Handling Static Content in Django

Last updated on July 27, 2020

At this stage, our website looks very simple because we haven't yet added any images, CSS, and JavaScript to it. In Django, we refer to these files as Static Files as they don't change frequently. In this lesson, we will learn how to use static files in Django.

Static Files Configuration #

  1. Django provides an inbuilt app called staticfiles to manage static files. The first step is to make sure you have 'django.contrib.staticfiles' included in the INSTALLED_APPS list. In case 'django.contrib.staticfiles' is not listed, just add it now to the INSTALLED_APPS list. At this point, INSTALLED_APPS setting should look like this:

    TGDB/django_project/django_project/settings.py

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    #...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'cadmin'
]

#...

  2. Just like the templates, Django automatically searches for static files in the static directory of every installed app. Create a new directory named static inside the blog app. Inside this static directory create another directory called blog. Recall that here we are following the same convention we did while creating the templates directory.

    To manage CSS, JS and images file easily, create three new directories named css, js and images inside the blog directory we created above.

    What about sitewide static files i.e files which is used by multiple apps?

  3. Create a new directory called static in the Django project root directory (TGDB/django_project), the same place where manage.py is located.

    In Django, STATICFILES_DIRS variable is used to list additional directories where Django will search for static files, in addition to the static directory of every installed app. This variable is not set by default. To make Django search for static files in the sitewide static directory we created above, add the following code towards the end of the settings.py file:

    TGDB/django_project/django_project/settings.py

    1
2
3
4
5
6
    #...
## STATIC FILES ##

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),    
]

    Although we don't need this directory in our project, just let it be here, it will remind you where to keep your sitewide static files, in case you need them at a later date.

  4. STATIC_URL is another common setting which comes into play when we use static files. What does it do? It defines a string which is used to access static files. By default it contains '/static/' (slashes are important). Here is how it works - Let's say there is an image called logo.jpg in the sitewide static directory. To access the file we would visit http://127.0.0.1:8001/static/logo.jpg. Notice the string "/static/" in the URL http://127.0.0.1:8001/static/logo.jpg is coming from STATIC_URL setting.

    If we had instead set STATIC_URL to 'static-assets', then logo.jpg would be available at http://127.0.0.1:8001/static-assets/logo.jpg.

    Similarly, to access blog app's reset.css which is stored in blog/static/blog/css/style.css, we would visit http://127.0.0.1:8000/static/blog/css/reset.css.

Downloading Static Files #

With our directories in place, we are ready to serve static content. Download the following static files and store them in the directory as indicated.

  • reset.css and style.css - store CSS files in the directory blog/static/blog/css.
  • jquery.js - store it in the directory blog/static/blog/js.

Loading Static Files #

We use static tag {% static 'path/to/file' %}, to load static files, but before we use this tag, we have to load it using the following code in our template.

{% load static %}

Let's now load our static files. Open blog app's base.html from the directory blog/templates/blog/ and amend the file as follows:

TGDB/django_project/blog/templates/blog/base.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{# ... #}
</head>
    <title>{% block title %}The Great Django Blog{% endblock %}</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
    <script src="{% static 'blog/js/jquery.js' %}"></script>
    </head>
<body>

    <div class="navbar">
{# ... #}

Note that in addition to loading static files we are also loading an external CSS file for the fonts from Google Fonts, just below the title tag. Save the file and visit the http://127.0.0.1:8000/ to see the changes.

To check whether the site is loading all the files correctly or not, open Developers Tools by hitting Ctrl+Shift+J in Google Chrome. If console screen is empty, then it means all files are loading correctly. On the other hand, if there is a problem in loading files you would get 404 error in the console as follows:

If this is the case, make sure you have downloaded all the assets and placed them in the proper directory as indicated. Also, double check the path specified in the static tag in base.html file.

Adding CSS files to cadmin #

Create a new directory named static inside the cadmin app directory. Inside the static directory create cadmin directory. Finally to store CSS, JS and mages create css, js and images directories inside static/cadmin/ directory.

The cadmin app needs a single css file style.css. Download the css file from here, rename it to style.css and place it in the static/cadmin/css/ directory.

Open cadmin app's base.html from the templates/cadmin/ directory and modify it as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}The Great Django Blog :: Admin Panel{% endblock %}</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="{% static 'cadmin/css/style.css' %}">
</head>
<body>
{# ... #}

If you now visit post add page (http://localhost:8000/cadmin/post/add/). It would look like this:

Currently, we are serving static files using Django development server. Although, it's working but it is not the recommended way to serve static files in production. We will learn how to deploy static files in using Nginx server in Django Deployment lesson.

Note: To checkout this version of the repository type git checkout 24a.

Django 1.10 Tutorial

Recent Posts