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
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 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.
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 %}
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.