Oct 19, 2016

Migrated: From Jekyll to Hugo

If I recall correctly this is the fourth time migrating my blog to a different service or engine, I started using Blogger, migrated to Wordpress, then Jekyll and now Hugo.

The truth is that after migrating and building my blog for the first time with Hugo I was extremely surprised: it took less than 400ms, with Jekyll? It takes more than 5 minutes! Sometimes even more specially when you start getting errors that prevent the build, not to mention that the automatic rebuild after resaving does not seem to work properly.

How was it?

Migrating to Hugo was pretty straightforward, I followed the official Migrate to Hugo from Jekyll guide, then I reworked my Lagom theme to implement it using Go’s template system. It took me about 3 weeknights to complete the whole migration. From that I learned the following:

Embedded tweets

In Jekyll I used the jekyll-twitter-plugin to embed tweets, Hugo includes a shortcode called, surprisingly, tweet. So stuff like this:

{% twitter oembed https://twitter.com/mariocarrion/status/771469295431868416 %}

becomes:

{{< tweet 779294387348135936 >}}

Permalinks are built by default using the following format:

/2016/10/06/go-web-programming/index.html

That does not work for me, because of the SEO, so I had to rename all the posts to the date+article-name.html format, so those became:

/2016/10/06/go-web-programming.html

Post references

In Jekyll links to your own posts on your blog use the following format:

{% post_url 2016-09-16-first-sprint-with-go-and-docker %}) 

In Hugo there are two shortcodes for generating links like that, either relative or absolute, so previous Jekyll links became something like the following:

{{< relref "2016-09-16-first-sprint-with-go-and-docker.markdown" >}}

Syntax Highlighting

Jekyll uses something like:

{% highlight ruby %}
puts 'foo'
{% endhighlight %}

The migration script correctly migrated those tags above to the Hugo format, so everything became:

{{< highlight ruby >}}
puts 'foo'
{{< / highlight >}}

However I didn’t have any syntax highlighting, fixing this issue was easy after reading the official guide; I was missing the pygmentize command, installing Pygments fixed the issue:

easy_install Pygments

Archive page

In Jekyll I built the Archive page using Liquid, in Hugo I had to rewrite everything using a shortcode, and then reference this shortcode from the page itself.

HTML and CSS minification

Minification in Jekyll was handled through the jekyll-press; Hugo does not support anything similar out of box, instead what is suggested is to use a external tool for doing so, one of the recommended options is Minify. In the end I made a Makefile that calls Hugo and minify to generate the final site, all is working really good.

Cleanup program

In order to save myself some time and make sure there were no errors while replacing the old tags with the new tags (tweet tags, renaming the permalinks and cleaning up old fronmatter tags) I wrote a Go program.

What I’m missing right now are the Open Graph and Twitter meta tags for properly displaying the content when sharing, I’ll be working on that next, for now everything builds faster and I could not be any happier.