Django Static File

Static Files such as Images, CSS, or JS files are often loaded via a different app in production websites to avoid loading multiple stuff from the same server. This article revolves around, how you can set up the static app in Django and server Static Files from the same.

Create and Activate the Virtual Environment

Let’s understand how to add the Django static file in Django so create a new project first For that let’s create a virtual environment and then download the package if you haven’t downloaded it. Create a virtual environment and let’s name it geeks

py -m venv geeks

Now we have to activate the virtual environment by running the following commands

Windows:

geeks\Scripts\activate

MacOs/Ubantu:

source geeks/bin/activateenvironment

This is how it will look

Now install Django

pip install django

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

django-admin startproject projectname (template code)
django-admin startproject checkstatic

Now enter your project for windows run the following commmand

cd  checkstatic

Now we will create a new app name “showstatic” for the project

python3 manage.py startapp appname (template code)
python3 manage.py startapp showstatic

Now we will walk in the IDE, I am using Visual studio code if you are using same the type (code .) in cmd. The first thing we would do is in setting.py add your app in line 32 add like this (you will see this from the apps.py file of the app)

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

now try to runserver once to confirm everything is working smoothly

python3 manage.py runserver

If you see this page the congrats you taken your first step successfully

How to Create a Static App in Django?

Now we 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.

Folder structure

Now add this line in settings.py file, below:

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

urls.py: The code then appends additional URL patterns using the + operator. These patterns are used to serve media files during development. It allows you to serve user-uploaded media (e.g., images or files) by mapping the URL defined in settings.MEDIA_URL to the corresponding directory specified by settings.MEDIA_ROOT.

Python3

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    # path to redirect to your app
    path('', include('mini.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

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

This is how it will look if everything was fine, most of the files are from admin we don’t need to worry about it,

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 ?

Now to check just create the “templates” folder in showstatic and create a file name home.html to view our static files

{% load static %}
<img src = "{% static 'logo.png' %}" height="200" width="200" class="d-inline-block align-top">
<br>
<h1>Hi its working</h1>

Now to view this page we need to give a route for it so now just add this in url.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')

Now run the server and see

python3 manage.py runserver

Bingo its working!!