{"id":120253,"date":"2024-12-18T00:46:04","date_gmt":"2024-12-18T00:46:04","guid":{"rendered":"\/tutorials\/?p=120253"},"modified":"2024-12-20T12:09:38","modified_gmt":"2024-12-20T12:09:38","slug":"django-static-files","status":"publish","type":"post","link":"\/ph\/tutorials\/django-static-files","title":{"rendered":"How to handle static files in Django"},"content":{"rendered":"

Django provides a simple and efficient way to manage static files, such as CSS, JavaScript, and images, which are an important part of an application or a website.<\/p>

In this tutorial, we will explain how to handle Django static files to ensure they are properly served and organized during development and deployment.<\/p>

\n\n\n\n\n\n\n<\/p>

Setting up static files in Django<\/h2>

Below you’ll find instructions on how you can set up and configure static files.<\/p>

Configuring static files in settings.py<\/h3>

To manage static files in Django, you need to configure your project to know where to look for and serve them. You can do so by specifying the Static URL<\/strong> and Directory<\/strong> in settings.py<\/strong>.<\/p>

# settings.py\nSTATIC_URL = '\/static\/'\nSTATICFILES_DIRS = [\n    BASE_DIR \/ \"static\",  # Optional: Add this if you want to store static files in a 'static' folder within your project\n]<\/pre>
The STATIC_URL <\/strong>parameter defines the URL prefix Django will use when serving static files. Meanwhile, STATICFILES_DIRS<\/strong> specifies additional directories where Django will look for the files.<\/p>
App-specific static files<\/h3>
By default, Django will look for static files inside each app’s static <\/strong>directory. For example, if you have an app named myapp<\/strong>, you can create a folder structure like this:<\/p>
myapp\/\n│\n├── static\/\n│   └── myapp\/\n│       └── style.css\n└── views.py<\/pre>
Django will automatically recognize and serve these files during development.<\/p>
Linking static files in templates<\/h2>
To use static files in your Django templates<\/a>, you must first load Django’s {% static %}<\/strong> template tag. Then, you can reference your static files by their relative paths:<\/p>
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Home Page<\/title>\n    {% load static %}\n    <link rel=\"stylesheet\" href=\"{% static 'myapp\/style.css' %}\">\n<\/head>\n<body>\n    <h1>Welcome to My Django App<\/h1>\n    <img src=\"{% static 'myapp\/images\/logo.png' %}\" alt=\"Logo\">\n<\/body>\n<\/html><\/pre>
Here’s the explanation of the static tags:<\/p>