Static files in development in Django - Mini Project: Build & Apply

Static files in development

📖 Scenario: You are building a simple Django website that needs to show a logo image and apply some basic styles using CSS. To do this, you must set up static files correctly so Django can find and serve your CSS and image files during development.

🎯 Goal: Set up Django static files configuration and create a simple HTML page that loads a CSS file and displays an image from the static folder.

📋 What You'll Learn

Create a STATIC_URL setting in settings.py

Create a folder named static inside your Django app

Add a CSS file and an image file inside the static folder

Load static files in the Django template using the {% load static %} tag

Use the {% static %} template tag to link the CSS and image files

Ensure the development server serves static files correctly

💡 Why This Matters

🌍 Real World

Websites often need to serve images, stylesheets, and scripts. Proper static file setup ensures these assets load correctly during development.

💼 Career

Understanding static files is essential for Django developers to build visually appealing and functional web applications.

1

Add STATIC_URL setting in settings.py

In your Django project's settings.py file, create a variable called STATIC_URL and set it to the string '/static/'.

Django

# Your code here

Hint

This setting tells Django the URL prefix to use for static files during development.

2

Create a static folder and add CSS and image files

Inside your Django app folder, create a folder named static. Inside this static folder, create a CSS file named styles.css with the content body { background-color: #f0f0f0; }. Also, add an image file named logo.png (you can use any small image).

Django

STATIC_URL = '/static/'
# Create static/styles.css and add body background color
# Add logo.png image file inside static folder

Hint

The static folder inside your app holds your CSS and image files. The CSS file changes the background color.

3

Load static files in the Django template

In your Django template HTML file, add the line {% load static %} at the very top. Then, inside the <head> tag, link the CSS file using <link rel="stylesheet" href="{% static 'styles.css' %}">. Inside the <body>, add an <img> tag with the source set to {% static 'logo.png' %} and alt text Logo.

Django

STATIC_URL = '/static/'

# Add {% load static %} at the top of your template
# Link styles.css in 
# Add  with logo.png in 

Hint

The {% load static %} tag enables using the {% static %} template tag to link static files.

4

Run development server and verify static files load

Start the Django development server using python manage.py runserver. Open your browser and go to http://127.0.0.1:8000/ to see the page with the background color applied and the logo image displayed. Ensure the static files are served correctly without errors.

Django

STATIC_URL = '/static/'

# static/styles.css content:
# body { background-color: #f0f0f0; }

# static/logo.png is an image file placed here


{% load static %}



    
    
    Static Files Example
    


    



# Run the server and check the page

Hint

Use the Django development server to test your static files setup. The background color and logo image should appear on the page.

Practice

1. What is the purpose of the STATIC_URL setting in a Django project during development?

easy

A. It defines the base URL to access static files like CSS and JavaScript.

B. It specifies the folder where Django stores uploaded media files.

C. It sets the database connection string for static content.

D. It enables automatic caching of static files in production.

Solution

1. Step 1: Understand the role of STATIC_URL

   STATIC_URL tells Django where to find static files when rendering pages, usually a URL prefix like '/static/'.

2. Step 2: Differentiate from other settings

   It is not related to media files, databases, or caching but specifically for static file URLs.

3. Final Answer:

   It defines the base URL to access static files like CSS and JavaScript. -> Option A

4. Quick Check:

   STATIC_URL = base URL for static files [OK]

Hint: STATIC_URL sets the web address prefix for static files [OK]

Common Mistakes:

• Confusing STATIC_URL with media file settings
• Thinking STATIC_URL controls file storage location
• Assuming STATIC_URL manages caching or databases

2. Which of the following is the correct way to include a static CSS file named styles.css in a Django template?

easy

A. <link href="/static/styles.css" rel="stylesheet">

B. <link href="/media/styles.css" rel="stylesheet">

C. <link href="{{ STATIC_URL }}styles.css" rel="stylesheet">

D. <link href="{% static 'styles.css' %}" rel="stylesheet">

Solution

1. Step 1: Use the {% static %} template tag

   In Django templates, static files should be included using the {% static %} tag to generate the correct URL.

2. Step 2: Check syntax correctness

   The correct syntax is <link href="{% static 'filename' %}" rel="stylesheet"> to load static files properly.

3. Final Answer:

   <link href="{% static 'styles.css' %}" rel="stylesheet"> -> Option D

4. Quick Check:

   Use {% static 'file' %} to link static files [OK]

Hint: Use {% static 'file' %} tag inside templates for static files [OK]

Common Mistakes:

• Hardcoding /static/ path without {% static %} tag
• Using {{ STATIC_URL }} which is not available by default
• Confusing media URL with static URL

3. Given the following Django settings and template snippet, what URL will be rendered for the CSS file?

STATIC_URL = '/assets/'

<link href="{% static 'css/main.css' %}" rel="stylesheet">

medium

A. /static/css/main.css

B. /assets/css/main.css

C. /media/css/main.css

D. /css/main.css

Solution

1. Step 1: Check STATIC_URL value

   STATIC_URL is set to '/assets/', so all static file URLs start with this prefix.

2. Step 2: Apply {% static %} tag behavior

   The {% static 'css/main.css' %} tag prepends STATIC_URL to the path, resulting in '/assets/css/main.css'.

3. Final Answer:

   /assets/css/main.css -> Option B

4. Quick Check:

   STATIC_URL + file path = rendered URL [OK]

Hint: STATIC_URL prefix + file path = final static file URL [OK]

Common Mistakes:

• Assuming default '/static/' prefix instead of custom '/assets/'
• Mixing media URL with static URL
• Ignoring STATIC_URL setting in templates

4. You added a static image file and referenced it in your template using {% static 'images/logo.png' %}, but the image does not show during development. Which is the most likely cause?

medium

A. You did not set MEDIA_URL correctly.

B. You forgot to run collectstatic during development.

C. The django.contrib.staticfiles app is not in INSTALLED_APPS.

D. The STATIC_URL setting is missing a trailing slash.

Solution

1. Step 1: Check staticfiles app presence

   Django serves static files in development only if 'django.contrib.staticfiles' is in INSTALLED_APPS.

2. Step 2: Understand collectstatic role

   collectstatic is for production; during development, staticfiles app handles serving automatically.

3. Final Answer:

   The django.contrib.staticfiles app is not in INSTALLED_APPS. -> Option C

4. Quick Check:

   Missing staticfiles app blocks static serving [OK]

Hint: Ensure 'django.contrib.staticfiles' is in INSTALLED_APPS [OK]

Common Mistakes:

• Running collectstatic unnecessarily in development
• Confusing MEDIA_URL with STATIC_URL
• Ignoring INSTALLED_APPS configuration

5. You want to serve static files from a custom folder named assets inside your Django app during development. Which combination of settings and template usage will correctly serve a CSS file assets/css/style.css?

Choose the correct settings and template snippet.

hard

A. In settings.py: STATICFILES_DIRS = [BASE_DIR / 'assets']In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

B. In settings.py: MEDIA_URL = '/assets/'In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

C. In settings.py: STATIC_ROOT = 'assets'In template: <link href="/assets/css/style.css" rel="stylesheet">

D. In settings.py: STATICFILES_DIRS = ['assets']In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

Solution

1. Step 1: Configure STATICFILES_DIRS correctly

   STATICFILES_DIRS should be a list of absolute paths; using BASE_DIR / 'assets' ensures correct path to the assets folder.

2. Step 2: Use {% static %} tag with relative path

   The template should use {% static 'css/style.css' %} to generate the URL, matching the folder structure inside assets.

3. Final Answer:

   In settings.py: STATICFILES_DIRS = [BASE_DIR / 'assets'] and in template: <link href="{% static 'css/style.css' %}" rel="stylesheet"> -> Option A

4. Quick Check:

   STATICFILES_DIRS needs absolute path; use {% static %} for URLs [OK]

Hint: Use absolute path in STATICFILES_DIRS and {% static %} tag [OK]

Common Mistakes:

• Using relative path strings without BASE_DIR
• Confusing STATIC_ROOT with STATICFILES_DIRS
• Setting MEDIA_URL instead of STATICFILES_DIRS