Migrating to Hugo

3 minute read Published:

Table of Contents

Introduction

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 the required setup. Well, fast forward few years after and 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.

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

Installation

The installation couldn’t be more straightforward: I followed the official installation guide which consisted on 2 single steps: (i) download the binary from Hugo releases and (ii) add the binary to the PATH.

Migration

Migration of posts

I used the official migration tool to do most of the ground work - see hugo import jekyll command (doc here). This migrated the posts data as well as the static content. Do note that it did not migrate the static pages.

Theme

This was a bit of a bummer: the import tool did not migrate the current theme/layout I had created from the Jekyll Hyde theme. I was not particularly attached to it so I decided to explore the Hugo theme marketplace. I only had few requirements: dark theme, minimalistic and responsive. Lunancy was quite similar to my Jekyll theme But while browsing another theme caught my eye: after-dark. The theme is quite complete and contains quite a number of off-the-shelve features that are good and will save me quite some time such as: table of contents, analytics, syntax highlighting - on top of my other initial requirements.

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, but the archive page was a bit more tricky.

In Jekyll I just needed to do this with the Liquid template language Jekyll uses:

	{% for post in site.posts %}
	  <li> {{ post.date | date_to_string }} &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
	{% endfor %}
There was no easy way to do something similar in Hugo. After some search, I found this Hugo discourse page that highlighted some of the different options that other people explored. Ultimately I decided to use this option that uses a new content type. Simple and elegant - you can now see it live here

Disqus comments

I previously posted on how to add Disqus comments to a Jekyll blog. Hugo ships with a built-in template that does the heavy-lifting for you: you just need to add disqusShortname = "your_disqus_username" in your site config.toml file and you are all set (the inclusion of the partial template is done by the theme in my case already)

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

In Jekyll, I was using lightbox2 - but there was nothing of the sort by default in either Hugo or the after-dark theme. Li-Wen Yip already created a solution that relies on PhotoWipe - see hugo-easy-galley and his post on the project

Deployment

My previous blog used s3_website so I just needed to generate a new set of keys and add them to the env variable to get it all running. Awesome!

comments powered by Disqus