Django - Add Static File
Create Static Folder
When building web applications, you probably want to add some static files like images or css files.
Start by creating a folder namedstatic in your project, the same place where you created thetemplates folder:
The name of the folder has to bestatic.
manage.py
my_tennis_club/
members/
templates/
static/
Add a CSS file in thestatic folder, the name is your choice, we will call itmyfirst.css in this example:
manage.py
my_tennis_club/
members/
templates/
static/
myfirst.css
Open the CSS file and insert the following:
my_tennis_club/members/static/myfirst.css:
body { background-color: lightblue; font-family: verdana;}Modify the Template
Now you have a CSS file, with some CSS styling. The next step will be to include this file in a HTML template:
Open thetemplates/template.html file and add the following:
{% load static %}And:
<link rel="stylesheet" href="{% static 'myfirst.css' %}">Example
my_tennis_club/members/templates/template.html:
{% load static %}<!DOCTYPE html><html><link rel="stylesheet" href="{% static 'myfirst.css' %}"><body>{% for x in fruits %} <h1>{{ x }}</h1>{% endfor %}</body></html>Restart the server for the changes to take effect:
And check out the result in your own browser:127.0.0.1:8000/testing/.
Didn't Work?
Just testing? If you just want to play around, and not going to deploy your work, you can setDEBUG = True in thesettings.py file, and the example above will work.
Plan to deploy? If you plan to deploy your work, you should setDEBUG = False in thesettings.py file. The example above will fail, because Django has no built-in solution for serving static files, but there are other ways to serve static files, you will learn how in the next chapter.
Example (in development):
my_tennis_club/my_tennis_club/settings.py:
..# SECURITY WARNING: don't run with debug turned on in production!DEBUG = True..This will make the example work, but we want you to chooseDEBUG = False,because that is the best way to learn how to work with Django.
Choose Debug = False
For the rest of this tutorial, we will run withDEBUG = False, even in development, because that is the best way to learn how to work with Django.
Example:
my_tennis_club/my_tennis_club/settings.py:
..# SECURITY WARNING: don't run with debug turned on in production!DEBUG = FalseALLOWED_HOSTS = ['*']..ALLOWED_HOSTSWhen usingDEBUG = False you have to specify which host name(s) are allowedto host your work. You could choose'127.0.0.1' or'localhost'which both represents the address of your local machine.
We choose'*', which meansany address are allowed to host this site.This should be change into a real domain name when you deploy your project to a public server.
Didn't Work?
That is right, the examplestill does not work.
You will have install a third-party library in order to handle static files.
There are many alternatives, we will show you how to use a Python library calledWhiteNoise in thenext chapter.
