Create django project and display static content

We ll be working with Django 2.1.1

django-admin is a commandline tool installed along with Django

Start project

django-admin startproject first_project

This creates a folder first_project with a bunch of files: (makes the directory a package) (This is where we store all our project settings) (stores URL patterns for our project (Acts as webserver gateway interface. It will help us deply our webapp to production) (Majority of our code will go in here)

Run project

python runserver

Starting development server at

Create a Django app

Django apps can be plugged into Django projects to render a specific application

python startapp first_app

This creates a folder first_app with a bunch of files to be used in Model View Template Pattern: (makes the directory a package) (This is where we register models) (application specific configurations) (Store applications data models. Specific entities and relationship between data) (Series of functions of test our application code) (functions that handle request and return responses)

Migration directory (Stores database specific information as it relates to the models)

Adding app to Django project

This is done by modifying to let first_project know about first_app

Add first_app to the list INSTALLED_APPS

    # Default apps
    #Created apps

Creating a View

In, create a function index and add it to

# Create your views here.
from django.http import HttpResponse

def index(request):
    #request is an object from django.http
    return HttpResponse("Hello World!")

In, add a path to views.index in urlpatterns

from django.contrib import admin
from django.urls import path
##New import
from first_app import views

urlpatterns = [
    path('', views.index, name="index"), ##Maps applications view to the url
    path('admin/',, ##Appears default


python runserver

opens a URL with Hello world text

Mapping of URLS from other directories

It is better to have url mappings of each app separate.

Therefore, we have a separate in the app folder and include the following path in of the project,

from django.urls import path, include

urlpatterns = [
       path('first_app/', include('first_app.urls')), # url : ""
       # 'first_app' can be any arbitary string
       # path('new_ext/', include('first_app.urls'))

The URL will be



We dont want the HTML inside python. So we want to replace this line in the views with HTML files

HttpResponse("Hello World!")

For this, we put the HTML files in a template folder and add it to our settings

Create a new folder templates in the project folder

In, add the path of this directory to TEMPLATES dict

#Dir pointing to
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
##template dir
TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
        'APP_DIRS': True,
        'DIRS': [TEMPLATE_DIR,],


NOTE: By default, django will automatically search in first_app/templates if APP_DIRS is set True. If we place index.html in first_app/templates we do not have to modify

index.html (include the template variable to have text injection from views)

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>First App</title>
    <h1>Hello! This is index.html</h1>

    <!-- template variabe -->


def index(request):
    my_dict = { 'insert_me':"Hello I am from"}
    return render(request,'index.html',context=my_dict)


Hello! This is index.html

Hello I am from

NOTE: text from template variable in is also executed

Injecting Static files (Images, CSS, JS etc)

This is requried to let python find the files (say CSS, JS or image files) in our directory

Create a new directory and add its path to STATICFILES_DIRS in If the files are placed under first_app/static, we dont have to modify

STATIC_DIR = os.path.join(BASE_DIR,"static")
#include static dir here

Images and other static media are placed under this directory

They can be accessed by appending the path to URL. (If an image seo-og.jpg is placed under static/first_app/images/)


To Use the image in HTML file, append the source with % static and include {% load staticfiles %} at the top of HTML file

<!DOCTYPE html>
{%  load staticfiles  %}
    <meta charset="utf-8">
    <title>First App</title>

     <!-- image injection -->
    <img style="width:500px;height:500px;" src="{%  static "first_app/images/seo-og.jpg"  %}" alt="Couldnt find">


Can also include stylesheet

<link rel="stylesheet" href="{%  static "first_app/css/mystyle.css"  %}" />