I’ve been slowly spending some free evenings moving my site over to Hugo and figured I’d post some anecdotes.

One of the things that I’ve always liked about Tumblr over other options like Wordpress or Ghost is that it supports different types of posts. In addition to the obligatory text post there’s also photos, quotes, links, chats, audio and video. Going through them as I transition to Hugo, I’ve noticed that photo posts are apparently what I pick the most, and I appreciate having them treated as first-class content.

The rest of my website is run with Nesta right now, which structures content similarly to most static site generators but has the benefit of being able to run Ruby with each page request too. This was how I always had the latest blog post from Tumblr on the homepage. Since that wouldn’t be necessary if all of my website was consolidated, I started looking at static site generators. Hugo stood out from the many, many other options because of one particular feature: content types. In particular, this would allow a blog to have different post types just like Tumblr. 😍

One of the trickier parts that I ran into was on my homepage, where I list my latest projects and talks. Instead of hard-coding these sections, I had been iterating over each “section” of content on my site, except for the root section. It wasn’t immediately clear from the documentation what Hugo’s .Site.Sections variable actually returns. I hoped that it would be a struct with some metadata (URL, plural name, etc.), but in reality it’s a map of section URLs to an array of pages (hint: checkout these template debugging tips. Using Hugo 0.14, what I ended up with was something like this:

{{ range $key, $section := $.Site.Sections }}
  {{ if ne $key "" }}
    <h2><a href="/{{ $key }}">{{ title $key }}s</a></h2>
    <ul>
      {{ range first 5 $section.Pages }}
        {{ .Render "li" }}
      {{ end }}
      <li>
        <a href="/{{ $key }}">See them all</a>
      </li>
    </ul>
  {{ end }}
{{ end }}

In hindsight this seems really straightforward. 😌

Between Hugo’s fast render times and the live reload feature, developing with it has been a breeze so far. I’m also using a little shell script that Nathan Youngman made to watch and compile a directory of SASS files alongside the Hugo watcher.

I’ve got a few more experiments to try with it before committing, but so far I like where this is going.