2. Static Files

Using Static Files (CSS, JavaScript) in Django Templates (CSS, JavaScript, images) help style and add interactivity to your web pages. Django provides a built-in way to manage static files using the static template tag.

1. Static Files In Django

1.1 Configuring Static Files

Define STATICFILES_DIRS in settings.py: Django looks for static files inside each app’s static/ folder. To use a global static/ directory, define it in settings.py:

import os

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

This tells Django to look for static files in the static/ directory inside your project.

1.2 Organizing Static File

Inside your Django project, create a static/ folder:

myproject/
 ├── static/
 │    ├── css/
 │    │    ├── styles.css
 │    ├── js/
 │    │    ├── script.js
 │    ├── images/
 │    │    ├── logo.png

Each app can also have its own static/ folder:

blog/
 ├── static/
 │    ├── blog/
 │    │    ├── blog.css

1.3 Loading Static Files in Template

Use {% load static %} at the beginning of your HTML files to load static files.

Example: Adding CSS to `base.html`

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Website{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <header>
        <img src="{% static 'images/logo.png' %}" alt="Logo">
        <nav>
            <a href="/">Home</a>
            <a href="/about/">About</a>
        </nav>
    </header>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>&copy; 2024 My Blog</p>
    </footer>

    <script src="{% static 'js/script.js' %}"></script>
</body>
</html>

1.4 Writing a Simple CSS File

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

1.5 Writing a Simple JavaScript File

document.addEventListener("DOMContentLoaded", function() {
    console.log("JavaScript is working!");
});

1.6 Collecting Static Files for Deployment

When deploying, use collectstatic to gather all static files in one place:

python manage.py collectstatic

This collects all static files into a single folder (e.g., staticfiles/) for easy deployment.

2. `STATIC_URL`, `STATICFILES_DIRS`, `STATIC_ROOT`?

Django uses STATIC_URL and STATICFILES_DIRS to manage static files (CSS, JavaScript, images, fonts, etc.). Although they seem similar, they serve different purposes.

2.1. `STATIC_URL` (Static File URL Path)

STATIC_URL = '/static/'

Defines the URL path where static files will be served.
When you use {% static 'css/styles.css' %}, Django converts it to:
```
/static/css/styles.css
```

Example Usage in HTML

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

This loads the CSS file from:

http://127.0.0.1:8000/static/css/styles.css

2.2. `STATICFILES_DIRS` (Additional Locations for Static Files)

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Tells Django where to look for additional static files during development.
Useful when you have a global static/ folder in the project root (outside any app).
Without this, Django only looks inside static/ folders inside each app.

Why Do We Need `STATICFILES_DIRS`?

By default, Django only looks for static files inside each app’s static/ folder:

blog/
 ├── static/
 │    ├── blog/
 │    │    ├── blog.css
store/
 ├── static/
 │    ├── store/
 │    │    ├── store.css

If you have a global static/ folder:

myproject/
 ├── static/
 │    ├── css/
 │    │    ├── styles.css
 │    ├── js/
 │    │    ├── script.js

You must add STATICFILES_DIRS so Django knows about this folder.

2.3. Why Do We Need Both?

Setting	Purpose
`STATIC_URL`	Defines the URL path to access static files (e.g., `/static/`).
`STATICFILES_DIRS`	Tells Django where to find additional static files in development.

What Happens Internally?

Django looks for static files inside each app’s static/ folder.
If STATICFILES_DIRS is set, it also looks in those directories.
When serving static files, Django prefixes them with STATIC_URL.

2.4 What About `STATIC_ROOT`?

When deploying, you also need STATIC_ROOT for collecting static files.

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

This is used when running:

python manage.py collectstatic

It gathers all static files into STATIC_ROOT, which is then served in production (e.g., via Nginx, WhiteNoise, or AWS S3).