Everything you need to know about static files in Django.

9 months ago | 9 min Read | 231

If you ever face a problem serving static files in production but need the site to display these files, this blog post is for you. Here, I cover all the settings for static files and how to serve them in production.

What are static files?

Static files are non-dynamic files that are part of your website. These include elements like your website's logo, images in the hero section, custom CSS files, and client-side JavaScript code. Essentially, static files are assets that do not change in response to user input or other server-side events.

For example, when you visit a website, the logo you see at the top is a static file. Similarly, the styles that make your website look appealing, such as fonts, colors, and layout controlled by CSS, are static files. If you have written JavaScript code that runs in the user's browser to make your website interactive, these scripts are also static files.

In the Django framework, the admin panel is an integral feature with a pre-designed, attractive interface. This interface relies on several JavaScript and CSS files to function and look good. These files, being part of the static assets, need to be properly managed and served to ensure that the admin panel and the rest of your website look and function as intended.

Serving static files in a development environment is straightforward, as Django’s built-in server handles them automatically. However, when you move your project to production, you need to configure your web server to serve these static files efficiently. This often involves setting up a dedicated file server or using a Content Delivery Network (CDN) to ensure that static assets are delivered quickly and reliably to users worldwide.

Throughout this blog post, I will guide you through the necessary steps and settings to manage and serve static files in a Django project, ensuring that your website remains fast, efficient, and visually appealing in a production environment.

Static files settings you must know about it?

1. STATIC_ROOT

STATIC_ROOT = PROJECT_ROOT.joinpath("assets")

• What it does: This setting tells Django where to put all the static files when you run a command to collect them all in one place.
• Why it's useful: When you're ready to put your website online, you need all your static files in one folder so the web server can find them easily.
• Example: If your project is in a folder called blog, then all the static files will be collected into a folder called assets inside blog.

2. STATIC_URL

STATIC_URL = '/static/'

• What it does: This setting defines the base URL for accessing static files in your web app.
• Why it's useful: It helps Django know where to find the static files when someone visits your website.
• Example: If someone goes to http://yourwebsite.com/static/example.jpg, Django knows to look for example.jpg in the right place.

3. STATICFILES_DIRS

STATICFILES_DIRS = [
    PROJECT_ROOT.joinpath("static"),
]

• What it does: This setting tells Django about any extra places where you might have static files.
• Why it's useful: Besides the static files that come with your apps, you might have other static files in different folders. This setting makes sure Django knows about those extra folders.
• Example: Django will also look for static files there. If you have a folder called static in your project directory,

Putting It All Together

• During Development: When you're working on your website on your computer, Django will look for static files in the extra folders you specified and in each app's static files folder.
• During Deployment: When you're ready to put your website online, you run the command

python manage.py collectstatic

• to collect all static files into one big folder (STATIC_ROOT). This makes it easier for the webserver to serve the files to your users.

In short:

• STATIC_ROOT is where all your static files will be gathered for deployment.
• STATIC_URL is the URL path to access those static files.
• STATICFILES_DIRS includes any extra places where you might have static files during development.

Also, you need to add this setting in urls.py where you develop the website.

from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

to serve static and media files in Django.

How to handle static files in production using Nginx and Gunicorn?

First, run the following commands.

• Run the collect static file.

python manage.py collectstatic

This command creates a folder named assets (you give in STATIC_ROOT). You can check it. Now configure Nginx.

location /static/ {
        alias /home/django/{project_folder}/assets/;
    }

• Now when you want to change something in static files, you need to make sure to run the command collectstatic and restart Nginx and Gunicorn.