HTML Templates in Django

In this section we will be created a the templates folder, a place to put all our HTML where django can find it, and then making the index.html file so that our home page will load the webpage we are telling it to load!

Create the Template Folder

Django likes to keep everything organized so that it knows where to look when it wants to do something like load "index.html". Thus, the standard is to keep all the HTML files in the same folder, a folder we are going to call "templates".

Make the templates folder inside of your web application at the same level of the manage.py:

Telling Django Where Templates Is

Now that we've made the templates folder, we have to tell Django where it is so it can look inside of it for our HTML files. This information on where to find the templates folder is the type of thing that the settings.py file is used for. Go to settings.py which is inside the inner instaclone folder. Scroll to the variable called TEMPLATES:

In the "DIRS" key, we will be putting all folders that contain templates, such as the one we just created. To specify our templates folder, we have to join the BASE_DIR, or the top level folder of our app, with "template" as follows:

os.path.join(BASE_DIR, 'templates')

Note that BASE_DIR is defined at the tope of the settings file so we can use it here. Your TEMPLATES variable should now look like:

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',
            ],
        },
    },
]

Writing index.html

The last step is to actually make the index.html file. In the next section we'll learn how HTML works and what the syntax is. However, for now we just need to put something in the index.html file so that when we go to the homepage, it shows that the index.html is being loaded. Thus, create an index.html file inside of the templates/ folder and what some plain text, such as your name:

Going to Our Homepage

We have finally gone through all the steps necessary to have a HTML page load when the user goes to a specific URL (in this case /). Now let's see the fruits of our labor. Make sure that your local server is still running and then go to our homepage at 127.0.0.1:8000! When you go you should see your name on the web page (you're famous!):

If it is not showing you your index.html, look at the terminal running your local server and see if you are receiving an error there. It is likely a small syntax error, if anything which you can easily fix. Otherwise, go back and make sure you followed the steps in the past few sections closely

Conclusion

Congratulations! You have truly made your first web page appear! We created our templates folder, linked it to our app in the settings.py, and then created the index.html file. Since we linked everything up already in the past two sections, when we went to the homepage, it showed us our index.html!

Now that we know how the basic flow of our website goes, we are going to learn how to make the static web pages nice by learning HTML, CSS, and Javascript!