Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

Django - Collect Static Files


Handle Static Files

Static files in your project, like stylesheets, JavaScripts, and images, are not handled automatically by Django when DEBUG = False.

When DEBUG = True, this worked fine, all we had to do was to put them in the static folder of the application.

When DEBUG = False, static files have to be collected and put in a specified folder before we can use it.


Collect Static Files

To collect all necessary static files for your project, start by specifying a STATIC_ROOT property in the settings.py file.

This specifies a folder where you want to collect your static files.

You can call the folder whatever you like, we will call it productionfiles:

my_tennis_club/my_tennis_club/settings.py:

.
.

STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

.
.

You could manually create this folder and collect and put all static files of your project into this folder, but Django has a command that do this for you:

py manage.py collectstatic

Which will produce this result:

131 static files copied to 'C:\Users\your_name\myworld\my_tennis_club\productionfiles'.

131 files? Why so many? Well this is because of the admin user interface, that comes built-in with Django. We want to keep this feature in production, and it comes with a whole bunch of files including stylesheets, fonts, images, and JavaScripts.

my_tennis_club
    members/
    my_tennis_club/
    productionfiles/
        admin/
        myfirst.css

The Example Should Work

Now you have collected the static files of your project, and if you have installed WhiteNoise, the example from the Add Static Files chapter will finally work.

Start the server and see the result:

py manage.py runserver

And check out the result in your own browser: 127.0.0.1:8000/testing/.

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 »