My last blog was a primer for getting into scripting web templates using Jinja2. In this next blog (part two of an intended four part series) we’ll get started by installing the necessary dependencies, setting up a directory, and starting to build our site.
Installation
Before we get started, it’s important to note I’m running Ubuntu Gnome 15.04, so the majority of commands I’ll be showing you revolve around my operating system of choice. So keep that in mind moving forward.
Installing the jinja necessities is quite simple. There are three ways to install jinja:
easy_install jinja2pip install jinja2git clone git://github.com/mitsuhiko/jinja2.git
A little about Flask
Flask is what we’re going to use to actually render our site. It’s Python driven and comes packaged with Jinja so there’s little else to do in the way of installation, but in the event that you happen to have problems, just run:
pip install Flask
Hello World!
To test if Flask is ready to go, let’s do the standard check. Create a file called hello.py and in that file type in:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
Change your permissions accordingly then run python hello.py. Browse to localhost:5000 and voila! There’s your first page in Flask.
Now that that’s done, let’s take a look at what’s happening here so we can understand the python a little better. Essentially, you’re setting your app.route to the resource / page you would like to provide. After that, you’re assigning functions to render whatever page you’d like. For a bigger site, you’re going to assign functions for each page you’d like to render so, for a site with multiple pages, it’ll look a little like:
Back to Jinja
An important part of Jinja is your directory structure. Knowing what items are going to be templates or pages and what items will be static will be key in developing your page. Let’s take a look at the below diagram which illustrates what your site’s directory should look like.
You’ll see in the top directory, there are folders labeled ‘templates’ and ‘static.’ These will house all of your pages’ content. The ‘run.py’ and ‘app.py’ files are the python files which build your site.
File: app.py
This file will be where you define all of your pages like we did for our ‘hello.py’ earlier.
File: run.py
This file is where we will actually use to run the app.py feature. We can include arguments to specify ports, ip addresses or whatever.
Folder: templates
This folder houses all of your web pages.
Folder: static
This folder will contain all of your stylistic files such as images, css files, and any other scripts you’d like. The idea here is that the static folder will hold files that will be used across multiple pages.
Making The First Page
Making the index is the start of your site. This will be your home page that users will see when first visiting your site. The first thing we will need to do is open up your ‘app.py’ file and add:
After that, create two files called ‘layout.html’ and ‘index.html’ in your templates folder. From the last blog, we’ve learned that inheritance is one of the best features in Jinja, so we’re going to create a general layout first and then add in all of our content utilizing child pages, such as index.html. Once created, open up the layout.html page and let’s start building.
Now we add some content. Open up you index.html page and type in:
The jinja tags {% extends “template.html” %} indicates that this page is a child page of template.html and inherits everything that we’ve previously defined therefore there’s no need to repeat code.
Now, create a style.css file in the ‘./static/styles’ folder and we’re going to add the following styles:
And finally, open the run.py file and we’re going to add the code:
Thanks to steiner for the above code.
After that, run the command python run.py serve to test your page.
In the next post, we’ll talk about filters and how they can be applied to your site.
