How to use Static Files in Django?

Hi Dev,

This tutorial will give you example of how to use static files in django. This article will give you simple example of how to load and use static files in django. We will look at example of django static files. This article goes in detailed on collect static files in django.

Django, Static files like CSS, JavaScript, and fonts are a core piece of any modern web application. They are also typically confusing for Django newcomers since Django provides tremendous flexibility around how these files are used. how you can setup static app in Django and server Static Files from the same.

Here i explained simply step by step example of how to use static files in django.

In this step, we’ll create a new django project using the django-admin.and let’s create a virtual environment first head back to your command-line interface and run the following command:

pip install virtualenv
virtualenv myenv
myenv\Scripts\Activate

now install Django

pip install django

now we will create our django project with the name “checkstatic”

django-admin startproject checkstatic
cd checkstatic

Now we'll create a single app called showstatic to store a list of files name. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python3 manage.py startapp showstatic

Next, you need to add it in the settings.py file as follows:

....
INSTALLED_APPS = [
    'showstatic.apps.ShowstaticConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Now we need to create a static folder inside the main folder (checkstatic) where we will keep our static files. One can add your files (pdf, images, text files, or anything you want) in the static folder.

now we need to make Django know that you have created a static folder so now add this line in settings.py file,

STATIC_URL = ‘/static/’
STATIC_ROOT = os.path.join(BASE_DIR, 'static') #new

Now said django to look where for the static files you have added write this above STATIC_URL = ‘/static/’

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'checkstatic/static/')
]

Now we will write a command that will bring/collect all the static files from our project and bring it to one single folder

python manage.py collectstatic

in your project folder, you will see a new folder added named “static” and your file is inside it!!

How to Load and use Static Files in Django ?

So in this example we need to check just create the “templates” folder in showstatic and create a file name home.html to view our static files

{% load static %}
<div class="container" style="text-align: center; margin-top:50px ;">
    <img src = "{% static 'tuts-station-logo.png' %}" height="100" width="300">
    <h3>It's Working!</h3>
</div>

now to view this page we need to give a route for it so now just add this in urls.py of checkstatic

from django.contrib import admin
from django.urls import path
from showstatic import views

urlpatterns = [
   path('admin/', admin.site.urls),
   path('',views.home,name='home'),
]

and in views.py of showstatic add this

def home(request):
   return render(request,'home.html')

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python manage.py runserver

Next, go to the http://localhost:8000/ address with a web browser.

I Hope It will help you....