How to write a Blog App


Since years I had the idea in my head to write some blogs about different topics like IT, Politics, Economy etc. There are some Blogging software like sand on the beach but for a former developer like me there is no other realistic option than to write an own software for it of course.
And by the way this gives me an opportunity to strengthen my practical skills not just talking about IT-Architecture but doing it practically.
On the other hand it shouldn’t be too stressfull as I have some other things to do as well within my limited times.


Whatever the Blog software will look like in some months (I will find out with the time what really matter) there are some basic considerations:

  • The blog itself should be able to create with a simple text editor, because that’s what I have typically available on all my business trips
  • The syntax of the blog including all the fancy formatations should be easy as possible and there is no need for the last beauty effects
  • For the deployment some extra master degree shouldn’t be needed

Design Considerations

There is always a solution to create HTML pages and present them as static content from any simple Web-server. OK, but to write HTML code, really?
No, a better idea is to use some techniques well known from GitHub and Medium: markdown (MD) files.
see e.g. Markdown Guide
This means:

  • Create a blog as MD file
  • Build some CMS functionality around
  • Publish the HTML compiled MD files

Some challenges become visible very early on the way:

  • How to handle Metadata for the CMS functionality?
  • How to handle relative URL-links e.g. for embedded pictures?
  • How to manage testing?
Solution Description

Very roughly I decided to use a Frontend - Backend solution and I selected the tools:

The Architecture for the first Version could be described as:

The ideas behind:

Prepare the MD files (the blogs) with some CMS like metadata, ignored by the MD interpreter
See an example of this blog:

[//]: # (Name: How to write a Blog app with Angular and Flask)
[//]: # (Description: A PoC about the creation of an Angular and Flask based blog software)
[//]: # (Creator: Detlef Winkelvoss)
[//]: # (Date: 23.05.2020)
[//]: # (Update: 23.05.2020)
[//]: # (Tag: Blog)
[//]: # (Tag: CMS)

These metadata will be managed by a REST service provided by the Flask framework.
The Frontend Angular application is using the REST service to create a CMS decorator and publish the MD files via the ngx-markdown NPM module.
Both - the Frontend and the Backend shar the file access for the MD files. They must be located in the assets folder of the Angular app.
In the src folder there are some examples of such MD-files (blogs)


The code can be found in my GitHub repository: hdwinkel/winkels-blog-app
It is a mono-repo, this means that all code for Frontend and Backend is in the same repository.

Some special considerations for the Flask Backend

The Flask framework allows to been used out of the box. But for security and QoS reasons the framework will be used in a Python server: gunicorn
As for the different environments the location of the assets folder have to be changed dynamically, the python script uses Environment variables, defined in the .env file.
For the Backend build process a Docker environment is recommended, see docker-compose and Dockerfile in the src and backend subfolder.

Some special considerations for the Angular Frontend

The frontend is a simple Angular application (and is in a PoC alpha state).
The tricky part is to manage the complexity with the MD-files located in the assets folder and the decorating CMS metadata.
see src code for the details
There are some considerations to deploy an Angular app in a web-browser and connect them to a backend in a dockerized environment.
This will be part of another blog.

Quarkus Logger

alt text

This repo shall host all activities to create a quarkus based IoT logging landscape
It consist of some different parts:

  • Some IoT DHT sensors connected with an ESP8266 to a logging controller
  • A Logging controller realized in MQTT and NodeRed
    (installed in a Docker environment on a Raspberry Pi)
  • A Raspberry Pi Cluster based on an arm64 Ubuntu running a Kubernetes Cluster K3S,
    hosting a Quarkus application
  • A MariaDB database installed in a Docker container on a Raspberry Pi
  • Prometheus and Grafana installed in a Docker container on a Raspberry Pi

What is it for?

It is a project for self-learning different aspects of modern development:

  • How to build IoT landscapes?
  • Understanding modern IT Architectures including Microservices and Kubernetes Clusters
  • How to manage modern development processes including CI/CD, DevOps


IoT and Data Aspects The IoT side of the PoC (Producing/Consuming Sensor and other data from SmartHome)

Architecture, Quarkus, Kubernetes The Architecture with a Controller and a Rapberry Cluster hosting Docker and Kubernetes and running Middleware and a MicroService application (Quarkus-App)

Development Aspects The Development aspects including CI/CD


To be able to understand the whole lifecycle in a real life simulation the complexity is quite high. It spans from Arduino for sensors until Docker and Kubernetes to host Quarkus Microservices applications.

Usage Tool
Development IoT Arduino IDE C-code
Development IDE Visual Studio Code (Java, Python, JavaScrip code)
Programming Languages Java, Python, JavaScript
MicroService Framework Quarkus
Automatic Build and Packaging Maven
Source Control Git, GitHub
Deployment Container Staging DockerHub
Container Orchestration Kubernetes
CI/CD Jenkins
Database MariaDB
Database GUI Heidi-SQL
Monitoring Prometheus
Dashboards Grafana
Message Orchestration Node Red
Message Broker MQTT Mosqitto
OS for Development XUbuntu in VMWare Player
OS for Deployment Arm64 Ubuntu (emulated in QEMU)

What isn’t it?

The repo is NOT a ready to use package for production e.g. at home.
The ideas are still valid and all sceanarios runs but the code quality isn’t expected as world class, just to understand the scenarios.
I will improve the code quality and reduce the technical debts when I’ve a bit more time for it :-)

For Documentation see the doc folder

For questions around the scenarios and technologies you can contact me of course:

If I have made some mistakes or have I violated copyright notices, please let me know so that I can correct it.