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.
CMS
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 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!
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 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.
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.
Images
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.
Featured Images
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.com
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).
Diagrams
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.
If the explanation of the solution is going a little deeper I always go for Draw.io because of its enormous library of shapes and illustrations matching cloud vendors, etc...
You can install their desktop application to get some more features like cloud fonts, etc... When I am creating diagrams in Draw.io I mark the whole diagram when it's done and select the Sketch option in the right panel and change the font to Handlee.
Hosting
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.
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.
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.
Docker
I am using Docker to run my containers that are responsible for running databases and the CMS for the blog.
Caching
To speed up the delivery of files to visitors I have added Varnish in front of Ghost to cache items like CSS.
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.
Database
For the database, I am running a MySQL container in the same network stack as the Ghost container.
Grammar
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.
Jeanette StockCo-founder ofVenture Out
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.
Summary
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.