Learn Django

Serving Static Files

Django itself wasn't built to serve static files. Rather, this task is usually left to a web server or content delivery network (CDN). If you're running a high traffic site it's likely you'll use a CDN to offload the traffic from your web server infrastructure, but using a CDN is currently beyond the scope of this course. Luckily, there's another solution - a Django third party module called dj-static.

Dj-static is a middleware utility that can be used to serve static files in production using a Web Server Gateway Interface (WSGI) like Gunicorn (don't worry about what those are for now). The steps below show how to setup Django and dj-static to serve static files.

Step 1: Install dj-static

Follow these steps to install dj-static and add it to the requirements.txt file.

  1. Open a terminal and change the working directory to /.../crmeasy/
  2. Enter the following commands
1
2
3
4
5
6
# ensure you're in the crmeasy directory
(venv)$ pwd
/.../crmeasy

# install the utility
(venv)$ pip install dj-static

Step 2: Freeze Requirements File

Update the requirements file.

1
2
# update the requirements.txt file
(venv)$ pip freeze > requirements.txt

Step 2: Create Static Folders

The first step is to create the folders that will be used to store the static files. To help keep the project files organized, we'll create a folder for each type of file.

Navigate to the terminal and create the folders as specified below. If you're more comfortable creating the folders in your IDE you're free to do so.

  1. Navigate to the /.../crmeasy/crmapp directory and create a folder named static/
  2. Inside of the static/ folder, create four new folders;
    1) css/
    2) images/
    3) js/
    4) fonts/

Below is what the directory structure should look like. Note there will be additional files in the crmeasy/ and crmapp/ folders that aren't shown below.

1
2
3
4
5
6
7
crmeasy/  
  |---crmapp/  
    |---static/  
      |---css/  
      |---fonts/  
      |---images/  
      |---js/  

Step 3: Set Static Settings

The next step is to make some adjustments to the /.../crmeasy/crmapp/settings.py file. Open this file in your IDE now to edit it. Locate the STATIC_URL setting section and update it as follows:

1
2
3
4
5
STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Step 4: Configure wsgi.py

Open /.../crmeasy/crmapp/wsgi.py in your IDE and update it as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
"""
WSGI config for crmapp project.

It exposes the WSGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/howto/deployment/wsgi/
"""

import os

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "crmapp.settings")

from django.core.wsgi import get_wsgi_application
from dj_static import Cling

application = Cling(get_wsgi_application())

Step 5: Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "configured static file settings"

Track your progress with a free account