upbeat.it

by Cesare Rocchi

From Octopress to Hugo

by Cesare Rocchi

Tags: blogging

I moved this blog form Octopress to Hugo. Octopress was good but hasn’t been updated in a while. Version 3.0 was promised a year ago but still no news. I don’t blame the author, I know plans can go sideways. Plus I wanted an excuse to use Hugo, because it’s a good candidate for the core of a new product I am designing.

I kept an eye on Hugo for quite a while. Like Octopress it takes in input markdown files, applies a theme, processes templates and generates a structured folder, ready to be served. I host this blog on S3 but you can run your own web server or use GitHub pages. While you write a post you can start a local server just by typing

hugo server

It’s a sort of “preview mode” so that the web page is refreshed every time you save a markdown file. Hugo is blazing fast in generating websites. I didn’t need such a speed but I am sure it can’t hurt :) One aspect that I like a lot is that the community is very active and supportive. I posted a bunch of requests for help and I always received very kind replies. I know that kindness should be the norm but I think it’s important to underline it when you spot it.

I found the Heather theme and it has been a great starting point for my custom theme. I added the search bar at the top, next and previous links at the bottom of post pages and a common footer. A few other small details are missing but I’ll add them along the way. Once I am done I’ll definitely open source it.

Translating formats

Octopress and Hugo formats are a bit different. The former uses --- to delimit the front matter and the latter uses +++. I also decided to switch from Yaml to TOML so I had to process my existing posts a bit. The Ruby script I used is available on Github. Feel free to tweak it at your convenience.

Unfortunately I had to manually fix the markup for blockquotes. In Octopress I used this format (managed by a plugin):

{% blockquote Cesare Rocchi http://upbeat.it }
{% endblockquote %}

In Hugo a plugin is called shortcode. It’s a sort of partial that can be called with parameters. So in Hugo I create a blockquote like this

{{ < blockquote name="Cesare Rocchi" link="http://upbeat.it" > }}

Although it required some manual changes now it’s much more structured and flexible at the same time.

Finally I switched font. I liked you Georgia, you will be missed but Merriweather is more readable.

The migration took me roughly four hours. I did it in four days, one hour a day, before going to sleep. It wasn’t relaxing but not even too demanding. One thing I liked of Octopress was the rake new_post command, that generated a correctly capitalized title in markdown and included the date in the file name. I’ll try to reproduce it with a script.

Hugo is a very promising tool. It’s easy to install and use. Here’s the official documentation. I am not yet an expert at it but if you need some help hit me on Twitter and I’ll be happy to take a look.