bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/Django/Static Files
Django•Static Files

Django - Add Static File

Concept visual

Django - Add Static File

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

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 named static in your project, the same place where you created the templates folder: The name of the folder has to be static. my_tennis_club manage.py my_tennis_club/ members/ templates/ static/ Add a CSS file in the static folder, the name is your choice, we will call it myfirst.css in this example: my_tennis_club manage.py my_tennis_club/ members/ templates/ static/ myfirst.css Open the CSS file and insert the following:

Formula

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:

Formula

Open the templates/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></h1>

{% endfor %}

</body> </html> Restart the server for the changes to take effect: python manage.py runserver And check out the result in your own browser:

Formula

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 set

Formula

DEBUG = True in the settings.py file, and the example above will work.

Plan to deploy?

If you plan to deploy your work, you should set DEBUG = False in the settings.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):

Formula

my_tennis_club/my_tennis_club/settings.py

.. # SECURITY WARNING: don't run with debug turned on in production!

Formula

DEBUG = True..

This will make the example work, but we want you to choose

Formula

DEBUG = 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 with
DEBUG = False, even in development, because that is the best way to learn how to work with Django.

Example:

Formula

my_tennis_club/my_tennis_club/settings.py

.. # SECURITY WARNING: don't run with debug turned on in production!

Formula

DEBUG = False

ALLOWED_HOSTS = ['*'] .. ALLOWED_HOSTS

When using

Formula

DEBUG = False you have to specify which host name(s) are allowed to host your work. You could choose

'127.0.0.1' or 'localhost' which both represents the address of your local machine.

We choose

'*', which means any 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 example still does not work.

Formula

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 called WhiteNoise in the next chapter.

Next

Django - Installing WhiteNoise