A static file is content that does not change while it is served. Unlike HTML produced by a Django view, static files usually support presentation: CSS, JavaScript, images, and similar assets. A page can combine dynamic HTML with these fixed resources. section 7.3 section 7.6
Django helps manage static-file locations and URLs, but it is not optimized to serve them in production. The development server can serve them while testing; a production web server should take over that job. Development and production commonly use different filesystem paths and base URLs, so templates should not hard-code the full URL. section 7.3 section 7.6
Use a project static directory and Django's template support to reference an asset reliably:
- Create a static directory, with subdirectories such as static/img for images. section 7.3
- Set STATIC_URL as the URL prefix and add the directory to STATICFILES_DIRS. section 7.3
- Load the static tag library in a template with {% load static %}. Loading it makes the tag available in that template, much like importing a Python module makes its names available. section 7.3
- Generate an asset URL with {% static 'img/logo.png' %} instead of writing a fixed /static/ path. section 7.3
Adding a logo to a home page
Place a RiffMates logo under static/img, configure the static directory, then load static in home.html. The image element uses {% static 'img/logo.png' %}, allowing Django to supply the appropriate base URL and full filename. The home route renders the page; the logo itself remains a separate static resource rather than view output. section 7.3
Listing 7.13 Template for the home page that includes a static file
<!-- RiffMates/templates/home.html -->
{% extends "base.html" %}
{% load static %} #1
{% block content %}
<img src="{% static 'img/logo.png' %}" height="100"> #2
<h1>Welcome to RiffMates!</h1>
<ul> #3
<li> <a href="{% url 'news' %}">News</a> </li>
<li> <a href="{% url 'musicians' %}">Musicians</a> </li>
<li> <a href="{% url 'bands' %}">Bands</a> </li>
<li> <a href="{% url 'venues' %}">Venues</a> </li>
<li> <a href="{% url 'list_ads' %}">Classified Ads</a> </li>
<li> <a href="{% url 'comment' %}">Leave a comment</a> </li>
</ul>
{% endblock content %}
This template shows the essential pattern: load the static tag library once, then use the static tag as the image source. section 7.3
Static content can also include a JavaScript library. For example, HTMX may be loaded from a CDN or downloaded and served from the project’s static files. Serving a local copy avoids relying on the CDN, but browsers cannot reuse a copy cached from another site, which can increase page load time. section 12.3
