How to create static application with django?

Hello World, Welcome to this site. This is the third tutorial of the series “learn Django from scratch with example“. In this tutorial, we will create a static blog application with Django. We will learn the following things in this tutorial.

  • How to create view templates in Django?
  • How to add static files in Django templates?
  • How to extend a template in Django?
  • How to share common data in all views?


How to create view templates in Django?

  • Create “templates” folder in newly created “post” application.
  • Create “index.html” file in “templates” folder.
  • Add the following code in “index.html” file.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog appication with django</title>
</head>
<body>
	<div class="container">
		<h3>This is blog application created with djangp</h3>
	</div>
</body>
</html>
  • Our template will load from “views.py” in “post” folder.
  • Open “views.py” and create the following function in it.
from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request,"index.html")
  • View’s function work with “post/urls.py“. Currently we do not have “urls.py“.
  • Create “urls.py” in “post” application and add the following code.
from django.urls import path
from . import views
urlpatterns = [
    path("",views.home,name='home')
]
  • Now we will connect our post application with blog project.
  • In blog project folder, you will see the another blog folder. This blog folder contains all general setting of this project.
  • Open “urls.py” from this blog folder
  • Make the following changes in this file like following.
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('post/', include('post.urls')),
]
  • Open “setting.py” from “blog” folder. Add “post” in “INSTALLED_APPS” list.
  • Run application with post suffix. for example, http://127.0.0.1:8000/post

DJango follow model-view-template architecture.


How to add static files in Django template?

  • In this part, we will add css, js and imgs.
  • Create “static” folder in “post” folder.
  • We can put all the css and js files in this folder.
  • I am using bootstrap 4, so download bootstrap files and add the following changes in “index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog appication with django</title>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}" />
</head>
<body>
	<div class="container">
		<h3>This is blog application created with djangp</h3>
	</div>
</body>
</html>
  • Stop the server with CTRL+C and run again with same command py manage.py runserver.
  • When you see source code of this page, you will see that bootstrap css is attached with this page.

Please add your feedback in the comment section. Thank you 🙂 🙂

Leave a Reply