Setting django's static and media URLS

Setting your static and media urls for your django project on a shared server is simple. Make it habit to be one of the first things you do as you start a new project. All the examples in this project are for django version 2.x.

As I start a new project on my shared server, the very first time I edit my settings.py file, there are a few changes I make. I do these straight away, so that I know everything will work as I expect it to from the start.

1. Set my timezone
2. Setup my database
3. Set my static and media URLs and base template finder
4. Setup my email backend
5. Collect Static Files
6. Create a project on sentry.io and add the settings
7. Turn off debug

In this article, we are going to look at the quick setup for URLs. First in our projects settings.py, in the TEMPLATES section find:

'DIRS': [],

and change it to:

'DIRS': [os.path.join(BASE_DIR, 'templates')],

This will enable us to have a folder for our template in our root directory.

Next, at the bottom below STATIC_URL = '/static/' add these lines:

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

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

And then in our urls.py, add the following imports at the top:

from django.conf import settings
from django.conf.urls.static import static

And at the bottom, these URLs:

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Let us create the folders, templates, media and static in the root folder:

(venv_name:3.5)username@server [~/mysite_html]# mkdir template static static/css static/js static/img

Our folder structure should now resemble:

manage.py
media/
mysite/
    settings.py
    urls.py
    wsgi.py
passenger_wsgi.py
static/
    css/
    js/
    img/
templates/

We can now put our css files inside the static/css/ folder, js files inside the static/js/ folder and fixed images inside the static/img/ folder. We then access them in the templates by loading the staticfiles tag. In the example below, we will load a css file from the static/css/ folder called site.css, a js file from the folder static/js called site.js and an image called image.jpg from the folder static/img/.

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}Home{% endblock %}

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

{% block js %}
<link href="{% static 'js/site.js' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<img src="{% static 'img/image.jpg' %}" alt="">
{% endblock %}

 Wrap Up

I find that following a set procedure gives me predictable results and gets my project up and running quickly. Your procedure may be different from mine. Do what makes you comfortable.