Configuring Static Files in Django
In settings.py file inside the INSTALLED_APPS list, there is an app called 'django.contrib.staticfiles', this baked in app manages the static files across the entire project during development as well in production.
First, open settings.py file and go straight to the STATIC_URL setting, which should be like this.
STATIC_URL = '/static/'
This static URL will append to base URL for serving static files in development like http://127.0.0.1:8000/static/css/style.css basically think this as a reference to static files.
You can set it to anything. Just make sure to end it a trailing slash ‘/’ at the end.
Next, we need to declare the STATICFILES_DIRS
STATIC_URL = '/static/'
#Location of static files
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
This tells Django the location of static files in our project. The common practice is to have all the static files in a top-level static directory.
STATICFILES_DIRS being a list indicates that having multiple static directories is possible.
Next, we have to set the STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_ROOT is the single root directory from where the Django application will serve the static files in production.
While deployment you would typically want to serve the static files from the conventional /var/www/example.com
The command manage.py collectstatic will automatically compile all the static files throughout the project and dump it into a single root directory, which is declared in STATIC_ROOT.
We are done with the settings, save and close the file.
Creating Static Files
From your root directory, run the following commands in the terminal to create directories, or you can just use the GUI.
mkdir static
mkdir static/css
mkdir static/js
mkdir static/img
Now you can move all your static assets here create a base.css file and add the stylesheet from the blog app there.
Now, if you are run the server and visit the localhost, you won’t see the styling, but why?
That’s because static assets must be loaded explicitly in the templates.
Loading static files in Templates
Open base.html file and at the very top add {% load static % }
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Django Sohan</title>
This tells Django to load static template tags inside the template so you use the {% static %} template filer to include different static assets.
For example, in order to include the newly created base.css file in my template, I have to add this inside the <head> of the HTML document
<link rel="stylesheet" href="{% static 'css/base.css' %}">
Save and reload the page, you should see the change.
Similarly, you can load different scripts and images in templates.
<img src="{% static 'img/path_to_the_img' %}">
<script src="{% static 'img/path_to_the_script' %}"></script>
Configuring Media Files in Django
Open settings.py file of your project and add the following configuration.
# Base url to serve media files
MEDIA_URL = '/media/'
# Path where media is stored
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL is the URL that will serve the media files.
During development, it doesn’t matter much as long it doesn’t conflict with any view of the apps. In production, uploaded files should be served from a different domain such as Amazon S3.
MEDIA_ROOT is the path to the root directory where the files are getting stored.
Serving Media Files in Development
By default, Django doesn’t serve media files during development( when debug=True).
In order to make the development server serve the media files open the url.py of the project and make the below changes.
url.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
...]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
That’s all now, run the local development server add files in the media root folder and retrieve them from media URL.