📁 What are Static Files?

Static files are CSS stylesheets, JavaScript files, images, and fonts that don't change. Django provides a special system to manage and serve these files efficiently during development and production.


# settings.py - Basic static files configuration
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

Types of Static Files

Django organizes static files into different categories based on their purpose. Understanding these types helps you structure your project properly and load resources efficiently in templates.

🎨

CSS Files

Stylesheets for design

static/css/style.css

⚡

JavaScript

Interactive functionality

static/js/script.js

🖼️

Images

Photos and graphics

static/images/logo.png

🔤

Fonts

Custom typography files

static/fonts/custom.woff

🔹 Create Static Folder Structure

Organize your static files in a clear folder structure:

myproject/
├── myapp/
│   └── static/
│       └── myapp/
│           ├── css/
│           │   └── style.css
│           ├── js/
│           │   └── script.js
│           └── images/
│               └── logo.png
└── manage.py

Why nest app name in static folder?

Django collects all static files into one location. Nesting prevents filename conflicts between different apps.

🔹 Configure Static Files Settings

Add these settings to your settings.py file:

# settings.py
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# URL to access static files in browser
STATIC_URL = '/static/'

# Directories where Django looks for static files
STATICFILES_DIRS = [
    BASE_DIR / 'static',  # Project-level static folder
]

# Where collectstatic gathers all files (for production)
STATIC_ROOT = BASE_DIR / 'staticfiles'

🔹 Create a CSS File

Create a simple stylesheet in your static folder:

/* static/myapp/css/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

🔹 Load Static Files in Templates

Use the {% load static %} tag to access static files:

<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Django Site</title>
    
    <!-- Load CSS file -->
    <link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
    
    <!-- Load JavaScript file -->
    <script src="{% static 'myapp/js/script.js' %}"></script>
</head>
<body>
    <div class="container">
        <!-- Load image -->
        <img src="{% static 'myapp/images/logo.png' %}" alt="Logo">
        
        <h1>Welcome to My Site</h1>
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Output:

Welcome to My Site

🔹 Create a JavaScript File

Add interactivity with JavaScript:

// static/myapp/js/script.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Page loaded successfully!');
    
    // Add click event to buttons
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            alert('Button clicked!');
        });
    });
});

🔹 Verify Static Files Work

Test your static files setup:

Development Server Steps:

Make sure DEBUG = True in settings.py
Run: python manage.py runserver
Visit your page and check browser console
Inspect element to verify CSS is loaded
Check Network tab for 200 status on static files

# settings.py - Required for development
DEBUG = True

# Django automatically serves static files when DEBUG=True

Add Static Files