RichyHBM

Software engineer with a focus on game development and scalable backend development

Moving to Hugo

I’ve been using my old static site generator setup for years now, when I first started using DocPad it was fast, simple and had the ability to add plugins which made it immensely extensible. However since then development has died down and there have been some questions about how long the development will continue, my site has become more complex requiring a number of additional plugins, and the general performance of DocPad seems to have slowed down (mostly due to the additional plugins ect.)

When I first started this site the main tools for SSG were DocPad and Jekyll, and even DocPad was a little obscure back then, but since there have been plenty more contenders. Hugo seems to be the one getting the most attention, partly so I think, because GoLang has been getting more attention recently; but also because it is just a great site generator.

The fact it is built in Go makes it very fast building your sites, not to mention its just a single executable and you don’t have to fetch any of its dependencies when building your site. Unlike with DocPad, which is built on NodeJS, that requires a load of node_modules that take time to download, make copying to/from a USB stick cumbersome and can cause issues with different file systems.

One thing to note however is that Hugo doesn’t support plugins, at least not as well as DocPad; that said though I am yet to find a feature I was previously using a DocPad plugin for that Hugo doesn’t implement natively, it has homepages, paging, specific tag behavior, built in syntax highlighting and even allows me to write up all these posts in markdown! Having all of this native makes it build the site much faster than previously building my site in less than a second.

For the most part moving to Hugo was fairly simple, I just had to change the DocPad template logic code into Hugo’s (or rather GoLang) template code as well as removing any Jade/Pug templates and using markdown where possible.

Going from code like this

h2 Tags
ul
  each tag in getFilesAtPath('tags').toJSON()
    li
      a(href='#{tag.url}')= `${tag.basename}`

To code like this

<h2>Tags</h2>
<ul>
{{ range $k, $v := .Site.Taxonomies.tags }}
    <li class="tag">
        <a href="/tags/{{ $k | urlize }}">{{ $k }} ({{ len $v }})</a>
    </li>    
{{ end }}
</ul>

While I was at it I also took the opportunity to update and simplify some other dependencies my site used, Skeleton the old CSS framework I used hasn’t had any updates in over 3 years and as such I felt it was time to look for something new. After looking through lots of different minimalist css frameworks I came across milligram, which seems to be heavily inspired by Skeleton. I also took the opportunity to slim down my custom CSS whilst still retaining the same look and feel, and I upgraded jquery to the latest version.

Share!

Follow me!

Subscribe!