The index page (or home page) is often the first page users see when they visit your Django site. It’s a crucial part of your application, and Django makes it easy to set it up using views, templates, and URL configuration.
This article walks you through the full process of creating a clean, functional index page in Django—from setup to styling.
Step 1: Set Up Your Django Project
If you haven’t already, start a Django project and an app:
django-admin startproject mysite
cd mysite
python manage.py startapp core
Register your app in settings.py:
# mysite/settings.py
INSTALLED_APPS = [
...
'core',
]
Step 2: Organize Your App Structure
Make sure your app contains the following directories and files:
core/
├── views.py
├── urls.py
├── templates/
│ └── core/
│ └── index.html
Step 3: Create the Index View
In core/views.py, define a simple view to render your index page:
# core/views.py
from django.shortcuts import render
def index(request):
return render(request, 'core/index.html')
Step 4: Configure URLs
A. App-level URL Configuration
Create a urls.py in the core app if it doesn't exist:
# core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
B. Project-level URL Configuration
In mysite/urls.py, include the core app’s URLs:
# mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')), # This sets the index page
]
✅ Now visiting
http://127.0.0.1:8000/will show the index page!
Step 5: Create the Index Template
Create the template directory and file:
mkdir -p core/templates/core
touch core/templates/core/index.html
Sample Template:
<!-- core/templates/core/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Django Site</title>
</head>
<body>
<h1>Welcome to My Django Site!</h1>
<p>This is the index page.</p>
</body>
</html>
Optional: Add Static Files (CSS, JS, Images)
To include styles and images:
A. Configure Static Files
In settings.py:
STATIC_URL = '/static/'
Create a static folder in your app:
core/
└── static/
└── core/
└── style.css
B. Use in Template
<!-- core/templates/core/index.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>My Django Site</title>
<link rel="stylesheet" href="{% static 'core/style.css' %}">
</head>
<body>
<h1>Welcome to My Django Site!</h1>
</body>
</html>
✅ Best Practices for Index Page
| Practice | Why It Matters |
|---|---|
| Keep the view logic minimal | Index page should be fast-loading |
| Use templates for layout | Separates logic from presentation |
Load styles with {% static %} |
Clean asset management |
Use {% url %} for internal links |
Makes routing flexible and maintainable |
⚠️ Common Pitfalls
| Mistake | Issue | Fix |
|---|---|---|
| ❌ Not including app URLs | Index page won’t be routed | Use include('core.urls') in main urls.py |
| ❌ Template not found | Wrong path or missing file | Use core/index.html inside templates/core/ |
| ❌ Static files not loading | Missing {% load static %} |
Always load static at top of template |
| ❌ Using hardcoded links | Breaks with route changes | Use {% url 'route_name' %} instead |
Complete Example Summary
core/views.py
from django.shortcuts import render
def index(request):
return render(request, 'core/index.html')
core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')),
]
core/templates/core/index.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Django Index Page</title>
<link rel="stylesheet" href="{% static 'core/style.css' %}">
</head>
<body>
<h1>Hello, welcome to the Index Page!</h1>
</body>
</html>
Conclusion
The index page is your site’s front door. Setting it up properly in Django involves:
-
Creating a simple view,
-
Connecting it through URLs,
-
Designing a clean template,
-
Optionally adding styling.
Following best practices ensures that your index page loads fast, looks good, and serves as a strong foundation for your site.
What’s Next?
Would you like to:
-
Add dynamic content to your index page?
-
Build a base layout using
base.htmland{% extends %}? -
Add a navigation bar using
{% url %}links?
