Migrating to Hugo

This blog was created quite some time ago but has not received any update in ages! One of the reasons behind was the fact that although it was fun to create, the setup to create new posts was fragile and required a number of ruby / npm packages in order to generate the site. At some point in 2015 I changed distro to Archlinux and procrastinated installing the required setup. Well, fast forward few years and in 2018 I got motivated again to blog and decided to look at the flourishing static website generator ecosystem. Hugo caught my eye and I decided to give it a shot. I did the migration, updated the blog and… forgot to commit the changes in the repo. Now 5y later (!!!) I am trying to update the blog and have to redo the same migration - but hugo and the themese used previously have drastically changed.

This post will summarize the different things I had to do in order to migrate from Jekyll to Hugo.

Installation

Follow the instructions in the official installation guide. For me, it was as simple as doing sudo pacman -S hugo.

Migration

Posts

I used the official migration tool to do most of the ground work: hugo import jekyll command (documentation here).

1
2

mkdir migration
hugo import jekyll -v com.sebasr migrate

This migrated the posts data as well as the static content. Do note that it did not migrate the static pages.

Theme

The theme I originally migrated to (after-dark) is now gone. I only had (and still have) a few requirements: dark theme, minimalistic and responsive. I tried several and eventually settled for archie.

1
2
3

cd migration
git clone https://github.com/athul/archie.git themes/archie
echo 'theme = "archie"' >> hugo.toml

Static pages

The migration tool had left out the migration of two of my single pages: “about” and “archive”. The migration of the about page was simple since it was plain markdown. I did not have to do anything for the “archive” page - it was done automatically by the theme. Sweet!

RSS feed

Remember my previous post on Adding RSS to Jekyll blog? Well, with Hugo I had to do nothing - the RSS feed is automatically created in http://sebasr.com/post/index.xml.

Image galleries

I had originally migrated the site to use hugo-easy-gallery, but when I checked it out again, the code was stale (last commit more than 1y ago) and the project seemed abandoned (they were looking for maintainers). I looked a bit and found hugo-shortcode-gallery but it seemed a bit bloated for the simple use case I had. I eventually created my own simple hugo shortcode with a simple match pattern.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>

{{ $images := (.Page.Resources.ByType "image") }}
{{ if .Get "match"}}
    {{ $images = (.Page.Resources.Match (.Get "match")) }}
{{ end }}

{{ with $images }}
    {{ range . }}
    {{ $resized := .Fill "150x115 q20" }}
    <a href="{{ .Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
    {{ end }}
{{ end }}

Deployment

Hugo now ships with a way to deploy to S3/cloudfront - I just followed the instructions from this blog post. Using Github actions to automate the workflow of publishing was really a breeze!