Python and Django 3.0 Tutorial

Lesson 5: Static files, CSS, Images configuration for a Django Project

In the blog project, we will add CSS styling along with we will see how to host images under development.

The static files could be a little tricky to host on development. You cannot just put CSS and JS in your project and hope the Django server will host it by default. We need to change some settings in order to work properly.

In the previous lesson 4, we talked about the basic structure of the blog. We have a template rendering the content coming from models.py file and with the help of views.py, we are able to render it inside of an HTML file. Please go through the previous lesson 4 in order to understand this lesson.

Now, we will put some CSS in our project. The first step is to put the static folder in our project which will take care of our static assets.

The first thing you need to care about is the variable STATIC_ROOT in your settings.py file.

STATIC_ROOT = "home/myusername/myproject/static"

however, this will not work in every operating system, where people have different username and project names. So, the solution is to use python to automatically create the STATIC_ROOT folder inside any machine.

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

The STATIC_URL = ‘/static/’ at the very bottom of settings.py file is to tell Django where to look for static content.

STATIC_URL = ‘/static/’

Every app can have its own STATIC folder, or you can make 1 giant STATIC folder and put all your CSS code there. In our app, we will make an individual static folder for an individual app. To do that, just create a directory inside of the app

$pwd
/desktop/project/blog_project/blog/homepage
$mdkir static
$cd static
$mkdir css img js
$cd css
$touch base.css

however, if you would like to just have one static folder, go to settings and add STATICFILES_DIRS there.

STATICFILES_DIRS = [
os.path.join(BASE_DIR, “static”)
]

STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.

Another root folder is called STATIC_ROOT, While in development, STATIC_ROOT does nothing. You even don't need to set it. Django looks for static files inside each app's directory (myProject/appName/static) and serves them automatically. The static root will be useful when we were deploying our app on the web. The static root will copy and paste all our static files to the root folder we have declared. So when we run the command mentioned below, we will put all our static content into one directory, and later service like Nginx or Apache will look into that directory to fetch static files.

python manage.py collectstatic

But all these configurations are just for development. We will see the configuration for deployment in future lessons.

One CSS per App

If you are interested in keeping one CSS file to your app ( remember you create an app in Django by python manage.py startapp <app-name>? )

so the thing you need to do is create a static folder inside of your app. And in the static folder, add a CSS folder and in that folder, add your styles.css file.

project/
       __init__.py       
       settings.py
       urls.py
       wsgi.py
app/
       __pycache__
       __init__.py 
       static
             css/
                 styles.css       
       templates/ 
                 app/
                    base.html      
       admin.py
       apps.py
       .
       .

in the next lesson, we will put CSS and Images in our project.

Till then, goodbye :)

Photo by Pankaj Patel on Unsplash