Setting up the Blog with Hugo

I’ve recently migrated this web site from one that was hand-written over to use a static-generator called “Hugo”. Given the infinite variety of web sites possible, a static generator is always going to be hard-pushed to suit everybody’s needs, but Hugo seems to have been able to cater for the requirements of this simple web site quite well.

The general data-flow when using Hugo looks like this;

You author some content which is usually written up as markdown and then a set of templates or a theme can use the content to render out a web site. There is no software running when the site is published; it just ends up being a bunch of HTML files and supporting resources that are copied to a web server.

The content can be placed into specific directories in order to categorize it into “types”. For example some types of content might be;

• blog
• recipies
• projects

Templates

A template is written using Go Template. Templates are often either “list” or “single” templates. A list template will show a list of the content items and then typically one would click on the list item and then navigate to a page showing the content. A concrete example might be a list of blog entries. You see a list of blog entries and then click on one to view the single blog entry.

This template-language exposes data from the content + site data to the template file. An example template that forms part of viewing a single item of content might look like this;

<tr>
  <td>{{ .Date.Format "2006-01-02" }}</td>
  <td>
    <h1>
      <a href="{{ .Permalink }}">
        {{ .Title }}
      </a>
    </h1>
    <p>{{ .Summary }}</p>
  </td>
</tr>

The templates can call in partials which are fragments of templates that make reuse and file-management easier.

Themes

There are many themes available for typical scenarios such as blogs or personal home-pages. A theme is a bunch of templates that are designed to work well together and that can be applied to your content. I found that what I wanted did not match any of the existing themes so I created my own templates. There is a set algorithm for Hugo to find templates to apply depending on the content being rendered.

Advantages

The advantage of using a site generator such Hugo is that changes to the appearance of the web site can be expressed in the templates or theme and then that change is blended with the content and flows cohesively through into the generated site. Hugo can do this without needing to have a CMS software system running server-side.

Development Web Server

Hugo also supports a mini web-server for development purposes. Hugo can be started-up in development mode with the web-server running. Instead of generating the final web site files, Hugo will serve these up, continuously rendering the content as it changes. This makes the development cycle less onerous.