This is a how-to for building simple sites in Flask. If you want a quick personal blog, I’d recommend deploying a pre-built WordPress instance on Google Cloud or AWS. In my case, I wanted to get a little more experience with Flask and general web development, so I built a basic blog in Flask. This could easily serve as an example for deploying APIs on Google App Engine.

Complete example on GitHub.

Getting Started⌗

First, you’ll need flask.

pip install flask

A boilerplate flask app looks like this. Serve index.html on /test.

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route("/test")
def index():
    return send_from_directory('static', 'index.html')

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080, debug=True)

Below are are additional examples for URL routing. send_static() serves any and all files from the static directory using the URL path as a variable. send_post() only serves URLs from myList.

@app.route('/static/<path:path>')
def send_static(path):
    return send_from_directory('static', path)

myList = ['post1', 'post2', 'post3']
@app.route('/<any({}):path>''.format(str(myList)[1:-1]))
def send_post(path):
    return send_from_directory('posts', path+'.html')

Flask Templates⌗

send_from_directory is useful for serving static files, but render_template is better for dynamicly generating pages. Below I pass a variable, myList, to the template index.html. By default, flask looks for templates under static/. Templates have access to python variables and can perform basic functions using the Jinja template engine. Jinja is included with Flask - check out this article for more about template syntax.`

@app.route("/test")
def index():
    myList = ['post1', 'post2', 'post3']
    return render_template('index.html', myList=myList)

Our template uses special tags {{ variable }} and {% function %} to interact with our posts variable. We’ve also added {% block content %}, which contains the body of our html page.

<!--- static/index.html --->
{% block content %}
<ul>
    {% for p in posts %}
    <li>
        {{ p }}
    </li>
    {% endfor %}
</ul>
{% endblock %}

<!--- Output --->
∙ post1
∙ post2
∙ post3

Organizing Pages⌗

I created a manifest file, paths.yaml, as a list of all the URLs I want to serve. Each path includes a pointer to the html page containing the post/page content. Any other post or URL specific info could be stored here as well, such as post image, author, date, etc.

# paths.yaml
posts:
    my-first-post:
        name: My very first post.
        html: posts/my-first-post.html
    my-second-post:
        name: AWS Temporary Access Tokens
        html: posts/my-second-post.html

Flask loads the list of paths as routes and passes the post variable to the template as a variable, depending on the path.

posts = yaml.safe_load(open("paths.yaml","r"))['posts']
@app.route("/".format(str(list(posts.keys()))[1:-1]))
def send_post(path):
    return render_template('post.html', post=posts[path])

Our template, post.html, displays the post’s name and displays the post’s html.

{% block content %}
    {{ post['name'] }}
    {% include post['html'] %}
{% endblock %}

Putting it all Together⌗

Directory structure:

main.py
paths.yaml
templates/
    index.html
    post.html
    posts/
        my-first-post.html
        my-second-post.html

templates/posts/my-first-post.html

<p>This is my first post.</p>

templates/index.html

{% block content %}
<ul>
    {% for p in posts %}
    <li>
        <a href='{{p}}'>{{ p }}</a>
    </li>
    {% endfor %}
</ul>
{% endblock %}

paths.yaml

posts:
    my-first-post:
        name: My very first post.
        html: posts/my-first-post.html
    my-second-post:
        name: AWS Temporary Access Tokens
        html: posts/my-second-post.html

main.py

#!/usr/bin/env python3
from flask import Flask, render_template
import yaml

app = Flask(__name__)
posts = yaml.safe_load(open('paths.yaml','r'))['posts']

@app.route('/<any({}):path>'.format(str(list(posts.keys()))[1:-1]))
def send_post(path):
    return render_template('post.html', post=posts[path])

@app.route('/')
def index():
    return render_template('index.html', posts=posts)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080, debug=True)

Results:

<!--- curl http://127.0.0.1:8080 --->
<ul>
    <li>
        <a href='my-first-post'>my-first-post</a>
    </li>
    <li>
        <a href='my-second-post'>my-second-post</a>
    </li>
</ul>

<!--- curl http://127.0.0.1:8080/my-first-post --->
My very first post.
<p>This is my first post.</p>

Deploy on GAE⌗

In order to deploy your app on GAE, you’ll just need to add an app.yml and requirements.txt before deploying.

app.yml

service: default
runtime: python37

requirements.txt

flask==1.0.2
pyyaml==5.1.2
gunicorn

GAE Deploy command

gcloud app deploy .