Pre-requisite:

• Set up Django and linked database of choice

After having installed Django, there are various folders that have been automatically created for you. At this point, your web application has no look yet. This article will show you the simple process of how to set up your homepage on your local system.

Navigate to the directory containing the file manage.py, and run on your terminal:

python manage.py runserver

Your web application is running on http://127.0.0.1:8000/ but there is nothing there to display yet as we have not configured it. By the end of this article, you should be able to set up the endpoint ‘/homepage’ to display your application’s homepage. This means the website will be hosted on http://127.0.0.1:8000/homepage.

Set up project root folder’s urls.py

Your current project directory should look like this:

+ — -project
|  | manage.py
| |
| + — -project-root
| | | settings.py
| | | urls.py
| | | wsgi.py
| | | __init__.py
| | |
| | \ — -__pycache__
| |
| \ — -app
| | admin.py
| | apps.py
| | models.py
| | tests.py
| | __init__.py
| |
| + — -migrations
| \ — -__pycache__

In the project’s root folder, you will find a file named urls.py as highlighted above. Go to this file and paste the following code into the file:

“””project URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path(‘’, views.home, name=’home’)
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path(‘’, Home.as_view(), name=’home’)
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path(‘blog/’, include(‘blog.urls’))
“””
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path(‘homepage/’, include(‘app.urls’)),
path(‘admin/’, admin.site.urls),
]

From pasting this text, the new line of code we are adding is the one in red. Adding a new url pattern with path ‘homepage/’ means that we are creating something at http://127.0.0.1:8000/homepage. We are also including a URLconf from our app folder. If your folder is named differently, then change the code accordingly.

Set up app folder’s urls.py and html files

Navigate to your app folder directory and create a new file called urls.py as shown below.

+ — -project
| | manage.py
| |
| + — -project-root
| | | settings.py
| | | urls.py
| | | wsgi.py
| | | __init__.py
| | |
| | \ — -__pycache__
| |
| \ — -app
| | admin.py
| | apps.py
| | models.py
| | tests.py
| | urls.py
| | views.py
| | __init__.py
| |
| + — -migrations
| \ — -__pycache__

Paste the following code into this file:

from django.urls import path
from . import views
urlpatterns = [
path(‘’, views.index, name=’index’),
]

In the same directory, you should have a file named views.py. We will create a function called index which is what makes the http request for our website to be loaded.

Your views.py file needs to have the following code:

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
# Render the HTML template index.html
return render(request, ‘index.html’, context=context)

Now, we’ve set it up such that http://127.0.0.1:8000/homepage will render the HTML template index.html, so we need to create the index.html file.

Create a new folder templates in the same directory as the urls.py file, like so:

+ — -project
| | manage.py
| |
| + — -project-root
| | | settings.py
| | | urls.py
| | | wsgi.py
| | | __init__.py
| | |
| | \ — -__pycache__
| |
| \ — -app
| | admin.py
| | apps.py
| | models.py
| | tests.py
| | urls.py
| | views.py
| | __init__.py
| |
| + — -migrations
| |
| + — -templates
| | index.html
| |
| \ — -__pycache__

Register your templates settings.py file

Add this line to your settings.py file, under the TEMPLATES section:

TEMPLATES = [
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
‘DIRS’: [
os.path.join(BASE_DIR, ‘templates’),
],
‘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’,
],
},
},
]

Start decorating your website!

Now, everything is set up! What determines how your website looks like depends on the contents of the index.html file. You can begin to set up your homepage now.