Skip to main content

Tech with Christian Blueprint

Get behind the scenes and see how I made my blog Tech with Christian. I'll show you my whole tech stack for running this blog. When you are done reading this blueprint, you will be able to create a blog yourself like mine.

I'm getting a lot of questions about what the tech stack behind this blog looks like. To answer this the easy way with good documentation, I have created this blueprint page for you.

The page will show you how you can create an identical blog like the one you are visiting right now. If you are ready, then just move to the next section to get started creating your own awesome blog.


I initially started the blog using WordPress, but after several attempts to make that platform better in terms of performance, I gave up. Don't get me wrong, WordPress is an amazing platform, but it got tooooo many options for extensions that make it slow and you have to install a lot of plugins to just get the basics.

I went to the internet and searched for replacements for my WordPress site, and yeah - I found a lot of options, but one I really liked was Ghost.

Ghost: The Creator Economy Platform
The world’s most popular modern publishing platform for creating a new media platform. Used by Apple, SkyNews, Buffer, Kickstarter, and thousands more.

Ghost has been tested to be up to 1900% faster and I really liked that it was focusing on only the content and that I had so many great publisher tools baked into it from the very beginning without the need for installing plugins/extensions into it.

UI / Design

The design is made by Biron Themes using their theme named Nikko. It's a little pricy, but I like the many options Nikko offers and the UI/UX is simply amazing if you ask me. Great job there Biron Themes!

Nikko - Membership & Newsletter Ghost Theme
Nikko is a Newsletter and Blog Ghost Theme, ideal for a membership and newsletter site and great Substack alternative. It comes with clean design and a modern look, you can be easily change the settings to match your style. It comes with different home pages, custom post types, and custom pages.

I have chosen the Personal home page and adjusted it to my needs using the included HTML code snippet that will generate the blocks on the front page. the colors are the same, I just switched the images like the logo, hero image, etc...

The only thing I have added is some custom routes, but that is for a collection, so it's not changing the behavior of the blog when talking about design or functionality. It's only to group a set of tags for some tutorials I made into a series of posts.

DNS and Security

I have always been a big fan of Cloudflare because of its ease of use and the features they offer for free.

If you don't know Cloudflare, here is a short summary. Cloudflare is a global network designed to make everything you connect to the Internet secure, private, fast, and reliable.

  • Secure your websites, APIs, and Internet applications.
  • Protect corporate networks, employees, and devices.
  • Write and deploy code that runs on the network edge.

Cloudflare is in charge of acting as a WAF (Web Application Firewall) for this blog and they also handle all DNS activities. This means that they are proxying the traffic into my servers securely because I installed certificates on the server that interacts with Cloudflare.

Cloudflare - The Web Performance & Security Company
Here at Cloudflare, we make the Internet work the way it should. Offering CDN, DNS, DDoS protection and security, find out how we can help your site.

Cloudflare is also acting as a CDN for delivering static assets like CSS, images, and JavaScript across the globe, which helps me deliver a better experience for my visitors if they are from any other country than Germany (Why Germany? I'll explain later).

Image Optimization

Everything on the internet has to be delivered as fast as possible and images are no exception. Actually, they are probably one of the worst things we can add next after videos on our websites in terms of slowing down the performance.

Because of that, I do everything in my power to minimize the size of the images. I found a great tool named ShortPixel, which is a free image compressor that allows me to convert images into Webp and Avif formats at the same time. This reduces the images by an average of 83% in size, but it's still the same image.

Free Online Image Compressor, WebP/AVIF Converter and background removal tool
Free online optimizer tool for JPG, PNG & (animated) GIF images. Free AVIF/WebP converter and background removal tool. Compress your images by up to 90% without any humanly visible differences.

The quality is being degraded a little, but compared to how much faster the blog is loading and you still are able to see the contents of the image without any issues, I think it's totally worth it.


All images are created using various tools. Below is a list of what I use to create my diagrams, and featured images for the posts.

I am a software developer, not a graphic designer but I like it when things look great! My blog should be no exception, so I signed up for a premium license at

Freepik: Download Free Videos, Vectors, Photos, and PSD
Millions of Free Graphic Resources. ✓ Videos ✓Vectors ✓ Photos ✓ PSD ✓ Icons. All that you need for your Creative Projects. #freepik

Freepik allows me to download the best high-quality photos, vectors, videos, and mockups that I can easily edit myself. I always download vectors I then combine with other stuff.

To edit my featured images I use Adobe Illustrator CC. It's an amazing tool for working with vector images. You can sign-up for a license at Adobe Creative Cloud to get the tool (and many others).

Industry-leading vector graphics software | Adobe Illustrator
Adobe Illustrator is vector-based graphics software that lets you scale down your artwork for mobile screens or scale up to billboard size — and it always looks crisp and beautiful.


I use two tools, depending on the complexity of the diagram. If the diagram is just to showcase a high-level view of what I am going to build, I go for a tool named Excalidraw. It allows me to make a rapid hand-drawn image and they got a nice option to include other drawings like icons, etc... from a community collection.

Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

If the explanation of the solution is going a little deeper I always go for because of its enormous library of shapes and illustrations matching cloud vendors, etc...

Flowchart Maker & Online Diagram Software is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship, org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic circuit and soci…

You can install their desktop application to get some more features like cloud fonts, etc... When I am creating diagrams in I mark the whole diagram when it's done and select the Sketch option in the right panel and change the font to Handlee.


Control Panel

I have tried several tools for hosting websites and initially, I was running this blog using a proxy server named Traefik. This is an amazing proxy/traffic tool and I use it in many other solutions I have made, but it was not the right partner for this blog.

Traefik Labs: Say Goodbye to Connectivity Chaos
Reimagine your application connectivity and API management with Traefik’s unmatched approach to cloud native.

The reason I changes was because I needed a more simple way to host many websites instead of running everything using configuration files. I am also hosting websites for other people and to do that with a self-service portal, I decided to switch away and use another tool named CloudPanel.

Hosting Control Panel - CloudPanel

CloudPanel is a free software to configure and manage a server with an obsessive focus on simplicity. You can run static websites, PHP, Node.js, and Python applications with just a few clicks on your mouse.

I like CloudPanel for its simplicity of administration and ease of installation on my server. You can easily add a new website and set up the DNS in Cloudflare, then CloudPanel handles the rest. I have chosen a combination of Docker and native sites in CloudPanel.

CloudPanel is making use of Nginx, which is an amazing web server and with the Vhost option for each site, you can change the configuration of the site it CloudPanel to forward all traffic to another IP and port on your server.

All my Ghost instances are running on Docker, because I would like the option to easily update it, add other services in front of the site like Varnish, and the option to easily move it to another server if needed.


I am using Docker to run my containers that are responsible for running databases and the CMS for the blog.

Docker: Accelerated, Containerized Application Development
Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code.


To speed up the delivery of files to visitors I have added Varnish in front of Ghost to cache items like CSS.

Varnish HTTP Cache — Varnish HTTP Cache

As I mentioned Varnish is running in a container using Docker in front of my Ghost CMS container and is handling traffic back and forth between CloudPanel and my Ghost CMS container.


For the database, I am running a MySQL container in the same network stack as the Ghost container.

MySQL :: Developer Zone


When writing my articles I am doing my best to write them in fluent English and put in commas and punctuations in the right places. Let me be honest, I am not the best at that. To solve that issue I am using a Chrome extension named Grammarly, which is sitting alongside me when I am writing content to tell me whenever I make a mistake.

Grammarly: Free Writing AI Assistance
Millions trust Grammarly’s AI writing assistance to communicate with confidence and make writing faster and more delightful. Getting started is simple — download the app today.

Grammarly is using AI to read my texts and is capable of telling me how my text may sound to readers, where I got some fluent flaws, and correct me when I forget a comma.


This is my current blueprint for running this blog at Tech with Christian. If you got any questions to the contents of this page, feel free to reach out and say hello.