Building this blog using Hugo and Netlify
For my first post, I thought it would be nice to share how I set up this blog.
I wanted to set up a blog for a while so that I could share my thoughts
and learnings with the world, and improve my writing while at it. I figured that
since I would write about some technical stuff, I would have to really interrogate
my understanding of things before I could post about them.
Building this blog was 99% fun. The 1% bad part was dealing with GoDaddy's
crappy and slow UI. I'll go ahead and outline my steps
Choosing the blogging platform/tool #
A blogging website #
I think the default option for most people would be to use
Wordpress. The free plan works fine however,
I didn't like the fact that my website would come with wordpress
ads. If I didn't want ads, I would have to pay a minimum of $4/month, and this
was too high for me because I knew that I could away with cheaper.
The other, more technical option, was to download the source code and manage
the build, deploy and hosting processes myself. This should tickle some
developer's fancy, but I wasn't ready to start tinkering with PHP code,
so this was a non starterd.
There are a ton of other blogging sites that one could use, but I didn't bother
looking after realizing that I could build one to my liking without spending a
dime (though I will have to spend some time 😀️).
Building my own #
The main reason I chose to build my own, was that I was looking for a very
minimal blog. I wanted the reader and myself to focus on the writing. I was
inspired by Tom MacWright's blog, and how simple it
looked (there is some good stuff on that blog feel free to check it out).
One thing about building your own, is that you will have to fiddle around with
setup, layout, deployment etc. While this could be a good learning experience,
I did not want to reinvent the wheel for some of those tasks, especially,
building and deployment.
In comes static site generators. These generators basically handle the building
part and enforce some convention to allow you to focus on crafting your content.
Some of the popular ones are Jekyll,
Hugo, Gatsby etc.
I started off with Jekyll, because I saw more references to it. I created
another version of this site and tried to host it on GitLab using Gitlab pages.
However, setting up the domain name on GitLab and GoDaddy was annoying and
frustrating. I tried adding Gitlab's TXT record to GoDaddy so I could
encrypt my domain and I expected the DNS records to propagate, but this was not
the case. I decided to delete the site's repo, and consequently ditch the
domain.
After that horrible exprience, I decided to start afresh with Hugo. Working
with Hugo is conceptually similar to Jekyll with a few differences including
choice of language. One difference that was noticably obvious was the build
time. I tried comparing the pixyll theme implemenation on Jekyll and Hugo,
and I found that the latter built the site faster. I found Hugo's documentation
to be extensive, which is always a good thing in software.
The next step was choosing a theme. As mentioned earlier, I wanted a super
minimal site with these requirements:
- Fast render time
- No fancy transitions
- No ads
- No fancy interactions
- No flashy images(unless it's an image attachment for a blog post)
There are many hugo themes and templates out there, and I settled on
Anubis. It was very minimal,
looked good on mobile and desktop, and it had pretty good LightHouse scores.
I deliberately didn't explore Gatsby because I did not want to use React, and
I think it's a bit of an overkill for simple static websites. In Jekyll and
Hugo, I only needed to put my markdown files in content/ but for Gatsby, I
needed to install plugins and handle some GraphQL, and that's a bit much for me,
possibly overengineered for my particular use case.
Alright, we have our site setup with Hugo, and a theme, the next and final step
was figuring out hosting. I settled on Netlify, since I was quite familiar with
it's product offering, I liked ability to deploy straight from GitLab, and I
would get an encrypted domain. Setting up a domain with them was super easy,
and after the intial deploy, my secure site was global in less than 3 hours.
Conclusion #
I am quite happy that I have this blog up and running. This was a high level
description of the process that I went through to get things up and running.
I have left some details out e.g. installing Hugo, or setting up deploys from
GitLab to Netlify, because these processes are well documented.
There are still more things I would like to add/change e.g improve constrast of
the theme, dark mode etc. but I am happy with this start.