Chris Shaw

Chris Shaw

Lead Profile All Articles

I am an ardent software developer and eager lifelong learner of code. My passion is the python language with particular emphasis in the 'django' and  'opencv' packages. I have created this blog to share my e... Read More


Setting django's static and media URLS

March 4, 2019 Chris Shaw 17275 views

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 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 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, 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, 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:

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.

Related Articles

blog comments powered by Disqus