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 settings.py 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 settings.py 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 http://127.0.0.1:8000/static/css/style.css 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/example.com
The command manage.py 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/imgNow 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>
<head>
<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.