How is this blog built?

In this post, I want to explain the technologies I use for building this blog. There are never enough technical blogs around, so hopefully it will inspire you to start on your own. ☺️

The website

The first decision I made, a long time ago, was that I wanted to write Markdown and not raw HTML (or any sort of non plain-text format). Markdown is fast to write and edit, has enough formatting tools for my purposes, and makes it easy to compare revisions of files.

I initially started writing this blog using Ghost, which is a node application. I hosted it on the tiniest VM available on Digital Ocean - it used to cost me about 5€ / month. It was pretty good, but I had a couple of annoyances with it:

  • upgrading the version of Ghost was a bit annoying, and sometimes tiny things broke;
  • my blog was served by a node backend, on a VM exposed to the Internet, and it was terrifying to look at the machine’s logs and see the amount of probing and hacking attempts it received.

In the end, I decided to switch technology and I jumped to the tool I’m currently using - Hugo. What I love about it is that it generates the website at “compile time”, i.e. its build process produces a directory of static .html files. Serving only static files is great - they are small, meaning they make the website load pretty much instantaneously, and they are (almost) free on the backend.

Hugo is written in go - I have installed it with homebrew, which keeps it updated automatically. I have been using it since 2017, and updating has never broken anything for me.

Hugo is also incredibly fast to generate the pages - my website, with 170 pages, builds in 167ms. When writing a new post locally, it features hot reload which is instantaneous. For comparison, I wrote some posts on the technical blog of my previous employer, which used Gatsby and it took various tens of seconds to build. While I liked many things about Gatsby, speed was not one of them.

Another thing that I love about Hugo is that I didn’t have to become an expert in it to be effective. I eventually made some customization to my template of choice, but getting started was super easy. It also supports useful things out of the box, such as RSS - which, luckily, has not died with Google Reader: it’s alive and well, and I still use it every day to keep up with (literally) hundreds of blogs collected over the years and a very limited number of news website.

I store all the files, plus the Hugo metadata, in a private repo on GitLab. I have considered making it public, but I don’t think anyone would be interested in looking at it, and I am not sure I want my draft posts to be readable by anyone. 🙂

Hugo works by means of a theme, which is used as the template system that your markdown content fills in. I am using the theme Coder, which I have slightly customized - for example, I added the list of recent blog posts on the home page. I like that theme because it is very clean, and it works well in both light and dark mode.

A good reference, other than the official site, is Justin James’ series about Hugo.

Hosting and DNS

Since my website is a small folder of html, css, and images, I am hosting my website on Netlify, which offers a generous free tier - enough to survive hitting the front page of Hacker News for a few hours. They also include a simple CI pipeline that supports Hugo out of the box - I just had to point it at my git repo and everything was automated. Zero effort, HTTPS included, free. Pretty great deal.

For the domain, I have been using Namecheap for almost a decade. They came highly recommended and I have nothing to complain about - the control panel is quite simple to use, and I have never had any problem. The domain is less than $15 per year, which is the only recurring cost of my website now.

I am also very happy with my actual choice of domain - while there are a lot of fantastic tech blogs with creative names, my nickname on just about every website is andreabergia, and I am glad to own andreabergia.com. Yes, I am that unoriginal. I have never bothered to set up emails, though - addresses such as me@andreabergia.com or info@andreabergia.com never sounded super appealing. But, considering how shitty Google is becoming, I should probably stop using GMail anyway…

Other tools

For drawing diagrams, I have recently started to use Excalidraw. I like its “fuzzy” style - makes me less worried about having everything perfectly aligned. Plus, it’s open source, which doesn’t hurt.

Basic spellchecking is integrated into my text editor, but I also use Grammarly when I am done with the last draft of the post - it has helped me many times to find silly mistakes.

I do not use ChatGPT or other AI tools to write my posts. Sure, they might help and probably come up with better grammar than I do, but I prefer my posts to reflect my ideas, not those of an LLM. I have, however, been using GitHub Copilot in the past year or so for writing some code. It is surprisingly useful and probably worth a post of its own.

TL;DR

Here is my stack:

  • markdown sources hosted on GitLab;
  • Hugo with the Coder theme for generating static HTML files from the .md files;
  • Netlify for hosting;
  • Namecheap for DNS.

Now, go and write your own blog! 🙂