Skip to content

Day 7 - Let's build an App in Python

Let's create a simple blog app with the help of Flask that supports posts in markdown.

Initiating virtual env and installing packages

Let's create a directory for our blog project. After you have created your project directory, create virtual environment using the following commands:

  • Windows
c:\>python -m venv c:\path\to\myenv
  • Linux//MacOs
python3 -m venv /path/to/new/virtual/environment

Activate the virtual environment:

  • Windows cmd
C:\> <venv>\Scripts\activate.bat
  • Windows powershell
  • Linux//MacOs
source <venv>/bin/activate

Now let's use pip to install required modules and packages that we will be using in this project.

pip install flask markdown

Creating the flask app

First, create a new Flask app, by creating a file in root of the project directory called

from flask import Flask, render_template
import markdown

app = Flask(__name__)

Define a route for the home page:

def home():
    return render_template('index.html')

Define a route to handle requests for individual blog posts:

def post(path):
    with open(f'posts/{path}.md', 'r') as file:
        content =
        html = markdown.markdown(content)
        return render_template('post.html', content=html)

Create templates for the home page and individual blog posts, we can do this by creating a new directory in root of project called templates. And then further create the two following html files:

  • index.html:
<!DOCTYPE html>
    <title>My Blog</title>
    <h1>My Blog</h1>
    {% for post in posts %}
    <h2><a href="/posts/{{ post }}">{{ post }}</a></h2>
    {% endfor %}
  • post.html:
<!DOCTYPE html>
    <title>{{ title }}</title>
    <h1>{{ title }}</h1>
    <div>{{ content|safe }}</div>

Modify the home route to display a list of blog post titles:

def home():
    posts = []
    for file in os.listdir('posts'):
        if file.endswith('.md'):
            title = file[:-3]
    return render_template('index.html', posts=posts)

Adding markdown posts

Now before running the app, let's add few posts. Create a directory called posts and add some Markdown files with blog post content. Let's add a

# Hello

This is my first blog post
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6

I just love **bold text**.

Now, let's run the app, type the following command:


And you should see the following output in the termainal:

 python                                                                                                                * Serving Flask app 'main'                                                                                                     * Debug mode: on                                                                                                              WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.         
 * Running on
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!

Here is how it would look, I have 2 blog posts and have some gifs in my blog posts. Navigate to in a browser window:

Home Page of our blog

If we click on the hello blog post:

Hello blog post