2 - Adding a Customized Home Page

Today, we will be looking at how we can add a simple landing page to our project so that it does not show the below screenshot anymore when you are on the home page

Create a template folder and index.html file

In order to get things rolling we will first create a template folder in the root directory of our project and add a index.html file that will render the default home page

Next, we will create a straightforward text to show up on this page with no functionalities for now.

💡

This index.html can contain anything that you want at this point. You can decide to add more HTML content, more CSS styles and some interactive Javascript code too, it is all up to your own imagination

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nigerian Schools</title>
</head>

<body
  style='height: 100vh; width: 100vw; 
        display: flex; flex-direction: column; 
        justify-content: center; align-items: center;'>
  <h1>
    Nigerian Schools API
  </h1>
  <p>
    This is a simple API that returns a list of schools in Nigeria.
  </p>
</body>

</html>

Configure settings.py & urls.py files ⚙

Now let's do some final configuration in the settings.py and urls.py file to complete this process.

Add the templates directory to the settings file below

TEMPLATES = [
    {
        ...
        "DIRS": [BASE_DIR / "templates"],
        ...
    },
]

With this, Django will know to look at our new directory anytime it needs to render any HTML page

💡

If we need to override any package template or even customize the Django admin panel, we will create the file in this directory and Django will know to render the custom one over the default.

Finally, we add the home path to our list of URLs that are registered in the project.

from django.views.generic import TemplateView
from django.urls import path

urlpatterns = [
    path("", TemplateView.as_view(template_name="index.html")),
    ...
]

We are making use of a utility view from Django for now because we just want to render the page. Later on in the project we will create a view for the home page and return some data from the database that we will render on the page.

🎉🎉 And we are done 🎉🎉

Spin up your local server in your terminal with python manage.py runserver and go to http://localhos:8000 and you should see something similar to the image below

I hope you found this article useful?

2 - Adding a Customized Home Page

Custom home page for a Django project

Table of contents

Create a template folder and index.html file

Configure settings.py & urls.py files ⚙