← Blog

This site is now powered by Hugo

Motivation to move to a static site generator

One can tell it’s been some time since I wrote anything significant here. It was partly due to a busier personal life, another part was because with my existing setup, it was hard to write things quicker.

Let me explain, this website and my blog is hosted as GitHub pages.

When I started this blog, I used to write raw HTML pages, and push things to GitHub to deploy to my website.

Since it was hard to work with HTML files directly, after some time, I kept a draft.md file in my repository where I drafted a blogpost.

When I’m done, I would convert this markdown to HTML with a Python library, edit a few styles and then I was done. It was slightly easier.

The painful part was editing these pages.

  1. If I edited the Markdown, it generated a HTML I had to reformat slightly to make things look good.
  2. If I edited the HTML directly, I was going back to square 1.

Not only that, creating a blogpost was one too many steps, creating a Markdown file, converting it to HTML, edits, re-edits, etc.

Paralelly, I saw many awesome people I follow keeping a TIL(Today I Learned) page, ref, where they would document short form knowledge that wouldn’t require as many writing and editing as a blogpost. I also wanted to have a similar section, but maybe title it “notes”, because my professional life isn’t that interesting to encounter new and interesting things on a daily basis. But if keeping a blog alive was so much effort, I couldn’t possibly sustain a TIL/Notes page.

I had never used static site generators before. I’ve played with the idea of using Jekyll for when I next updated my website. But since it requires the Ruby ecosystem which I’m not very familiar with – I had to avoid it.

Over the last year, I’ve known that Hugo is written in Go and is very popular, and when I came across Bear Blog’s Hugo theme – it reminded me how bloated my website was.

Migrating a blog written with custom HTML/CSS to a static site manager is a tough task, and I had recognized this well. One would have to parse the html and convert it to Markdown files consistently.

With a couple of weekends in my hand, I set sail towards this goal.

Moving to Hugo

Initially, I had planned to move content to the Bear Blog theme, and then with Claude, I could write custom CSS for performant improvements which wouldn’t hurt the load speed.

I realized that it wouldn’t work to move my pages to Markdown and then to the directory structure required by Hugo. There were too many inconsitencies between how I want my website to look like and what the Bear Blog improvements could provide. There would also have beeen too much work which I could just as well spend on converting my existing website to a Hugo template.

And thus I dumped my existing HTML, CSS files to Claude, along with some screenshots of some existing pages in my website and asked it to generate the theme files.

As always, LLMs do init things very well and with the amount of templating Hugo lets you do, I knew that at the end of this exercise, I could convert my website interchangeably to a group of Markdown files and was very happy of this prospect!

It took me a couple of sessions, but I could get this Hugo powered theme to look like my original website relatively easily.

In the process:

  • I had already planned to introduce “Notes” to my website, very much inspired by this hugo theme.
  • Claude also gifted me a “Night Mode” which was too nice to pass on.
  • I could also cleanly avoid rendering headers and navigation from a blogpost/note page so the reader can concentrate better.
  • Removing some clutter from the site, i.e external calls for fonts, bootstrap.css, removing dependency on FontAwesome helped me move the “About” page’s size from 2.3 MB to 197 kB. For reference https://research.swtch.com/ costs you 183 kB, and I’m a mere mortal.

Some of the only tricky things to get done were:

  1. managing multiple taxonomies

  2. Conditionally hiding the header and simplifying navigation which looks something like this in HTML

    <body class="{{ if or (and (eq .Type "blog") (not .IsSection)) (and (eq .Type "til") (not .IsSection)) }}single-post{{ end }}">
    <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-xs-10 col-lg-6 content-space">
                    {{ if not (or (and (eq .Type "blog") (not .IsSection)) (and (eq .Type "til") (not .IsSection))) }}
                        {{ partial "header" . }}
                    {{ end }}

  3. Implementing RSS: since this website now has a RSS feed for blog and “Notes”, and a combination of both, the footer conditionally decides which RSS to display depending on the page a reader is in.

  4. I made Claude write a Python script to migrate all of my HTML pages to Markdown files. In this process, there were multiple issues in individual pages which I had to either fix manually, or in the template.

This particular post is written from Markdown and the process feels much better than editing raw HTML files.

Future work

As software developers, it’s easy to be nerd-sniped by something new and fancy and spend less time on maintenance. But this migration comes with some extra responsibilities

  1. The older blogposts might have some visual inconsistencies which I plan to address over the next few weeks.
  2. The old “Photos” section is removed and I’d have a find a new place for it. I also have to update the albums to include my more recent past.
  3. I would have to make the website more ‘Night Mode’ friendly. The “pink/orange/red hybrid” color scheme going on here isn’t soothing to look at before going to bed. I will improve on it. Plus the code tags don’t respect your ‘Night Mode’ selection.
  4. Write about things for everyone to have great text content to enjoy!