Lesson 2
Serving Static Files in Django
Exploring Static Files in Django

Welcome to the next step in your journey with Django! In this unit, we will explore how to serve static files in your Django project. Static files are crucial for any web application because they include resources like CSS, JavaScript, and images, which enhance the user experience. This lesson will provide you with the foundational skills required to serve these files effectively.

What You'll Learn

In this unit, you'll learn how to serve static files in your Django project. Here are the key steps we will cover:

Configuring Static Files in settings.py: You will adjust your Django settings to define where static files are located and how they are served.

Python
1# project/myproject/settings.py
2STATIC_URL = '/static/'
3STATIC_ROOT = BASE_DIR / "staticfiles"
4STATICFILES_DIRS = [
5    BASE_DIR / "static",
6]

The configuration above tells Django to look for static files in the static directory within your project and serve them at the /static/ URL.

Creating a Static File: We'll create a static CSS file that will be used to style our HTML template.

CSS
1/* project/static/css/style.css */
2body { background-color: lightblue; }

Using Static Files in Templates: You'll learn how to load and use these static files within your Django templates.

HTML, XML
1<!-- project/myapp/templates/home.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <title>Home</title>
6    {% load static %}
7    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
8</head>
9<body>
10    <h1>Hello, world!</h1>
11</body>
12</html>

The code above defines a simple HTML template that shows the text "Hello, world!" in a styled format using the CSS file we created.

Let's pay close attention to the way the CSS file is loaded in the template.

  • The {% load static %} tag loads the static template tags that allow you to use the {% static %} template tag and access static files.
  • The {% static 'css/style.css' %} in the href attribute of the <link> tag tells Django to look for the style.css file in the css directory within the static directory.

With this, we link the CSS file to the HTML template and style the content accordingly.

Rendering Templates in Views: Finally, you'll learn how to render the HTML template in a view and serve it to the user.

Python
1# project/myapp/views.py
2from django.shortcuts import render
3
4def home(request):
5    return render(request, 'home.html')

The home view renders the home.html template, which includes the static CSS file we created earlier. Django will look for home.html in the templates directory of your app and render it with the CSS file linked to it. As a result of this, the user will see the styled content when they visit the home page.

Why It Matters

Serving static files is essential for creating a visually appealing and interactive web application. Without static files, your web pages would be plain and lack the necessary styling and behavior that users expect. By mastering this skill, you can provide a richer user experience and make your web applications more engaging.

Excited to see your web application evolve visually? Let's dive into the practice section and start serving static files in your Django project!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.