Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 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:

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 the 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>
Run Example »

Restart the server for the changes to take effect:

py manage.py runserver

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 set 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):

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 choose 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:

my_tennis_club/my_tennis_club/settings.py:

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

ALLOWED_HOSTS = ['*']

.
.
ALLOWED_HOSTS

When using 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.

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.



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.