DEV Community

David Tio
David Tio

Posted on • Originally published at blog.dtio.app

Building a Blog Platform with Docker #1: Flask Setup

#docker #webdev #flask #python

Building a Blog Platform with Docker #1: Flask Setup

Quick one-liner: Get a basic Flask app running with separate CSS — no Docker yet, just Python and a stylesheet.

Why This Matters

I'm building a new blog platform.

The reason is simple: I'm tired of writing HTML by hand. In 2026. For my tech blog. It's embarrassing.

I also want series grouping (so readers can actually navigate my Docker tutorials), and I want to own the platform instead of renting space on Blogger. Plus, I wrote Levelling Docker — might as well apply the same "learn by building" approach to my own infrastructure.

This is the first post in what will be an occasional series. I'll build features, write about them, and share the code. No fixed schedule. No promises about how many posts. We'll see where it goes.

Starting Simple

Today's goal: Get a Flask app running that says "Welcome to David Tio's Blog".

That's it. No Docker yet. No database. No Markdown. Just a basic Python web app.

Docker comes later — only when the app is more or less ready.

The Setup

For this post I'll be using terminal and vscodium. You can use any recent Linux distro and any text editor if you want to follow along.

Create a folder for the project:

$ mkdir tiohub-blog
$ cd tiohub-blog
$ mkdir templates
Enter fullscreen mode Exit fullscreen mode

Set up a virtual environment (always use venv, trust me):

$ python -m venv venv
$ source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Now that venv is activated, I will install flask into the virtual environment.

$ pip install flask
Enter fullscreen mode Exit fullscreen mode

Now create the Flask app, app.py:

from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8000, debug=True)
Enter fullscreen mode Exit fullscreen mode

And the template, templates/index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to David Tio's Blog</title>
</head>
<body>
    <h1>Welcome to David Tio's Blog</h1>
    <p>Building a blog platform with Docker.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Run it:

$ python app.py
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:8000. You'll see... text. Black on white. Very 1993.

It works. It's also ugly. Let's add some styles.

Add a Stylesheet

I don't do inline CSS. Create a separate file from the start.

$ mkdir -p static/css
Enter fullscreen mode Exit fullscreen mode

static/css/style.css:

body {
    background: #0f172a;
    color: #e5e7eb;
    font-family: system-ui, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
}

h1 {
    color: #14b8a6;
    border-bottom: 3px solid #14b8a6;
    padding-bottom: 0.5rem;
}

p {
    margin: 1rem 0;
}
Enter fullscreen mode Exit fullscreen mode

Update index.html to link it:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to David Tio's Blog</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Welcome to David Tio's Blog</h1>
    <p>Building a blog platform with Docker.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

That url_for thing? Flask generates the correct URL for static files automatically. No hardcoded paths.

Refresh. Dark background, teal heading, centered layout. Much better.

Flask app with dark theme running on localhost:8000

A Few Things to Note

Why separate CSS files? You could inline the styles. For a single page, it's fine. But I've learned the hard way — inline CSS creeps. Next thing you know, your template is 200 lines and half of it is <style> tags.

Separate files mean:

  • Easier to find your styles
  • Multiple templates can share the same stylesheet
  • HTML stays focused on structure
  • Ready for Tailwind or a build step later

Why url_for? You could hardcode /static/css/style.css. But then if you change your static folder structure, you have to update every template. url_for handles that for you.

Why debug mode? The debug=True flag auto-reloads when you change code. It's great for development. Don't use it in production — we'll fix that when we deploy.

What's the Planned Stack?

For now: Flask + Python + a CSS file. That's it.

I'm thinking SQLite for the database (blogs don't need PostgreSQL). Tailwind CSS for styling eventually (via CDN, no build step). Traefik for routing when we add Docker. Markdown for writing posts.

But here's the thing: this might change. I might swap Traefik for something else. I might decide SQLite isn't enough. I'll figure it out as I build.

The beauty of starting simple is: you can pivot without losing weeks of work.

Coming Up

Next post will probably be Tailwind CSS. I want a proper navigation bar, a footer, maybe some nicer typography.

After that: Markdown support. I want to write .md files and have them render as HTML.

Then: Docker. I'll containerize the Flask app and show you why it's worth the effort.

No timeline on any of this. I'll post when I've built something worth sharing.

If you're following along and want to see something specific, drop a comment or reach out. This is a public build — your feedback might shape what I build next.

Found this helpful?

Published: 29 Mar 2026
Author: David Tio
Tags: Python, Flask, Docker, Blog Platform, Build Log
Word Count: ~800

SEO Metadata

  • Title: Building a Blog Platform with Docker #1: Flask Setup (2026)
  • Meta Description: Follow along as I build a blog platform from scratch. Episode 1: Flask setup with separate CSS. Build log with code examples.
  • Target Keywords: flask setup, python blog build log, docker blog series, flask css separate file, building blog platform 2026
  • Word Count: ~800

Top comments (0)