Rendering Static HTML page using Django

In this tutorial, we will learn how to render static HTML pages in a Django application.

1. Technologies & Prerequisites

Python 3.7, 3.8
Django 3.1
HTML 5

2. Setup Django Environment

2.1 Virtualenv

The first step of beginning any python project is creating a virtual environment. Follow this tutorial to set up and activate a virtualenvand then install Django.

virtualenv env
source env/bin/activate
pip install Django

2.2 Setup Django Project

Start a Django project (here, project name:django_html) and create an app named home. Check this tutorial for more details.

django-admin startproject django_html
cd django_html/
python manage.py startapp home

2.3 Create HTML Page

Django uses templates to generate HTML dynamically. A template contains the static part as well some static syntax for displaying the dynamic content of the desired HTML page. Django has the Django template language for its own template system.

Create a directory named templates inside the newly created home apps directory.

By convention, Django’s template engine looks for a ‘templates’ subdirectory in each of the INSTALLED_APPS.

mkdir home/templates

Inside the templates dir, create a file named index.html with the following content.

home/templates/home/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home Page</title>
</head>
<body>
    <h1>Home Page</h1>
    <p>This page is rendered as a Django Template</p>
    <h3>Happy Learning :)</h3>
</body>
</html>

2.4 Templates Configuration

2.4.1 Listing App

Add the name of the newly created app home to the INSTALLED_APPS list in settings.py.

django_html/settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',
]

2.4.2 Templates Settings

Have a look at the TEMPLATES settings in the settings.py file, which contains the configurations for the templates engines and describes how Django will load and render templates.

django_html/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

BACKEND: Path to the default Django Template engine class.
DIRS: List of directories where the engine should look for source files, in given search order.
APP_DIRS: If True, the engine will look for templates inside installed applications.
OPTIONS: contains backend-specific settings.

We do not have to make any changes in these settings. As we have listed our app in the INSTALLED_APPS list, other things are taken care of by Django’s template engine.

2.5 Setup Views & URLs

2.5.1 views.py

Next, create a view in home/views.py for the template.

home/views.py

from django.shortcuts import render

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

The index() method renders the HTML page. This is made possible using the render helper function from the django.shortcuts package.

Here, the render() function takes the request object and the template_name as the arguments and returns an HttpResponse object with the rendered text.

2.5.2 urls.py

Create a file urls.py inside app directory home/ with the following content.

home/urls.py

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index),
]

Next, create a URL pattern for this app in the URL patterns for our project, ie. in the file django_html/urls.py.

django_html/urls.py

from django.contrib import admin
from django.urls import path, include

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

2.6 Run Project

Now, run the application using

python manage.py runserver

Navigate to http://localhost:8000/ and you can see the HTML page create being rendered.

3. References

Download Source from GIT:

Rendering Static HTML page using Django

Happy Learning 🙂