Target

Target

Step by Step

1. Create a django Project with django-admin.py in virtual_env

(django_venv) $ django-admin startproject hw1

2. Get html file into templates folder

$ cd hw1
$ mkdir templates

Then copy index.html into this folder.
Edit hw1/settings.py file like this below:

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

3. Add a new app into project

$ python manage.py startapp blog_web

Edit hw1/settings.py file like this below:

# Application definition

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

4. Edit urls config to make it run

• Edit hw1/blog_web/views.py like this:

from django.shortcuts import render


# Create your views here.
def blog_view(request):
    return render(request, 'index.html')

• Edit hw1/urls.py like this:

from django.conf.urls import url
from django.contrib import admin
from blog_web.views import blog_view

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^blog/', blog_view)
]

• run server and have a look in http://localhost:8000/blog

$ python manage.py migrate
$ python manage.py runserver

First run without static files

5. Add static file

copy static folder into hw1 folder

static folder

edit hw1/settings.py like this:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

edit hw1/templates/index.html like this:

change example

Result page TA-DA

All done