How I created a blog without any costs (Part 1)

Today, I'd like to share how I created a manageable blogging service without having to pay any costs.

Being an inexperienced blog writer, it took me two hours of writing to realize, that I'd need to split this post into two parts. There's just too much to share! I'll link the second part as soon as it's written up.

Intensions

As a web developer, I wanted to run a site to share projects and tech-related things for a very long time. But I was in the situation like everybody else being busy with work. I just didn't have enough time to dive into it.

Since the beginning of the year, I started to change a few things to create a more reasonable work-life balance which allows me to finally have a go at it. I plan on blogging about work-life, but for today, we focus on the setup :-).

For the blog itself, I wanted to have something that I can use from time to time to write a blog post. Until now, I don't have a very clear plan of how often I'll use it or how it ends up content-wise. So I wanted to keep the costs at a reasonable level, ideally, I wanted to stay at no costs.

Requirements

At first, I needed to have a look at what I'd need from the technical side to go online. Following are the requirements I identified that I'd need to address:

• A webserver to host the content and make it available on the web.
• A domain where my content would be accessible for people.
• A content management system to have a consistent design where I would not waste too much time creating content and linking them correctly.
• Easy SEO support to be not ignored by search engine crawlers like Google, Bing, Duck Duck Go.
• SSL for HTTPS which is important to not be considered "unsafe".
• Reasonable stability where my content would be available the majority of the time.

By looking at the requirements, nothing too expensive, but every tiny bit adds a bit. In the past, I suggested to people that wouldn't want to sacrifice too much energy to go for one of the top players that run something like WordPress (CMS) and just pay the price. Don't get me wrong, I believe mature CMS providers are doing a great job allowing people to jump in and "go live" without much effort. It's absolutely fine that they charge for it!

But as a web developer, I thought, let's challenge yourself and see if you can come up with something similar that ideally runs at zero costs and doesn't require you to go insane when trying to manage it.

Setup

The content

From the writing perspective, I knew that I didn't want to hassle with HTML markup and formatting too much. Every blog post should be just "plain-text". This allows me to share the content easily with other communication channels. On top of it, it wouldn't take any effort to migrate to another setup in the future. It's a brain-dead job to go update HTML/CSS markup or update the formatting - we've all been there!

The decision I had to take was rather easy for me on this. At my daily work, I'm following this already by only writing documentation in Markdown. So this was a no-brainer for me, I'd just write every blog post in Markdown and use a process to style the text for readability.

The hosting

All the content management systems are great, they allow us to quickly add a page and go live. Usually, this requires a web service that renders and delivers the pages at run-time.

I reviewed my options on this and I had to accept that this is a tough one. While many web providers allow you to host your site, they wouldn't provide you with the content management rendering part for free. So a simple "delivery" web service would be possible but not the application service that dynamically renders it.

Going Static!

By thinking a bit over it, I realized that I don't need to render pages dynamically as I'm only adding stuff from time to time. In the end, it doesn't add anything for the end-user. So I asked myself, why don't I create these pages myself beforehand?

I followed this idea and came across a project Next.js that works on top of the most popular JavaScript framework reactjs and advertises itself with:

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page. Static Generation (Recommended): The HTML is generated at build time and will be reused on each request. ^nextjs-ssg

Awesome, this is exactly what I'd need. It also has the benefit that the pages would be delivered quite fast to the end-user, as everything is pre-rendered and only needed to be sent over the network.

I played around with a few templates and while they looked very promising, I decided against them. In the end, it felt like there was too much react code involved that I wouldn't need and too many dependencies that wouldn't allow me to easily migrate. Actually, I spend a whole day trying to migrate one of these templates to the latest dependencies and failed. Not that I think it's not doable, but I couldn't figure it out as I'm also not very experienced with react.js. Anyway, I understood the signs and told myself to not put too much energy in it, as I wouldn't want to go insane about to managing it which implies updating it from time to time.

I continued looking for possibilities and came across Nuxt.js with its content module. Nuxt.js is a similar approach but built on top of Vue.js, another poplular JavaScript framework. I had my experience with Vue in the past and knew it was easy to pick up. After reviewing documentation, I quickly found myself doing the getting-started guide which turned out to be very smooth. Everything I needed was possible:

• static page generation (Content module)
• writing articles with markdown (MDX module)
• code snippet highlighting (Prism module)

How does it work? While you write your article in markdown, a local live development service shows your progress as you save. And once you run "generate" from the command line. Nuxt.js creates static HTML files for every article and stores them into a "dist" folder which can be uploaded.

My developer heart jumped when I saw that there is even a color-mode module that lets you easily switch between light and dark themes. We know, every developer loves dark themes!! Give it a try on the top right-hand side of this page :-).

Outlook

In the end, it became very clear that I wouldn't need to pay for a CMS to generate blog posts. But going for an approach to generate everything locally introduces new challenges.

• Where to host the generated contents?
• How to easily bring changes online?
• How to avoid storing everything locally?
• How to achieve that I could write from different devices?

Read up the follow-up post on this where I go into how to address these points.

---