Hat tips…

At the end of November I attended a ‘Lunch && Code’ session in the Digital Greenhouse. One of the sessions run by Jason Magee was on Jeykll which like Hugo is a static site generator built with blogging in mind. During the QA discussions after the presentation Steve Streeting suggesed Hugo as another good alternative.

Hugo v Jekyll

First up both Jekyll and Hugo are excellent, but during the Christmas break I had a play with both and quickly settled on Hugo, primarily because of the speed in which it built the site (it is ridiculously quick) but also because I found its content model more intuitive. It looked to be easy to customise and tailor to what I was looking for and bar the inevitable bit of banging my head against a wall didn’t disappoint.

Some Hugo concepts

Hugo separates content from the presentation files.

Content

The content file for this page is shown below.

  • Metadata: A content file has a metadata section at the top of the file (called Front matter). You can add custom metadata tags that you can reference in your presentation templates.
  • Content: the text beneath the metadata section is the content. This uses the markdown language which if you haven’t used it before is easy to pick up.
+++
icon = "icon-heart"
draft = false
date = "2016-12-27T21:08:06Z"
title = "Hugo is awesome"
description = "First impressions - Hugo is awesome."
+++
## Hat tips...
At the end of November I attended a 'Lunch && Code' session in the Digital Greenhouse. One of the sessions run by...
...

Presentation

A site is made up of a number of template files. This site has a root template called index.html that is itself made up of other templates:

<!DOCTYPE html>
<html>
    <head>
        {{ partial "head.html" .}}
    </head>
    <body>
        {{ partial "nav.html" .}}

        {{ partial "blog.html" .}}

        {{ partial "projects.html" .}}

        {{ partial "about.html" .}}

        {{ partial "counters.html" .}}

        {{ partial "contact.html" .}}

        {{ partial "footer.html" .}}

        {{ partial "js.html" .}}
    </body>
</html>

I have no prior experience of Go, but the its templating language is inuitive and more importantly well documented.

Other key points

  • You can split your site into as many different sections as you want and customise the layout for each
  • All of the sites static assets such as javascript, images, css, fonts are stored and organised beneath a static directory
  • There is a master config file for the site that allows you a central place to review and edit attributes such as base URL or any other custom attributes you may define such as google analytics tracking id.

My journey with Hugo

To hopefully get a better idea of the learning curve, I have created summary of my first week (5 evenings) with Hugo.

Evening One

Within the first few hours I had worked my way through a handful of themes and became comfortable adding content and making some simple customisations. Hugo has a number of themes showcased and are easy to install by cloning the git repo.

$ cd themes
$ git clone https://github.com/saey55/hugo-elate-theme

Each theme is stored in its own directory and I had several installed beneath my playground site. Hugo allows you to switch the site themes when you start the Hugo server. Whilst you do need to restart the server if you are changing themes, you can then make changes to the theme or content files and see the results without bouncing it.

hugo server --theme=hugo-elate-theme

Hugo’s speed allows you to make changes to underlying content, css, javascript and other template files and review them in the browser within seconds which automatically refreshes as changes are made. Even whilst writing this I am able to save my content file, which I am editing within Sublime, add see the results instantly. This becomes increasingly valuable as you tinker around trying various things out or get the syntax right. I am able to try what i think it is, review the results, try something else and normally quickly get what I am looking for before having to dive in to documentation.

Evening Two

I had found the Elate theme which I largely liked the look of. I drew up a list of things that needed to be changed:

  • Remove the sections that I did not need (intro video, testimonials, services)
  • Make it multi-page - Whilst the theme looks brilliant, it is a single page theme which is designed to render all of its content as defined within the config file.
    • Create a new section for blogs
      • A list / table of contents page
      • A detail page (to display content such as the one you are reading now)
    • Create a new section for projects
      • A list / table of contents page
      • A detail page to display the project detail content
    • Replace the intro section (first section on the homepage) to dynamically display the last 6 blog articles
      • Get each to link through to the blog detail page
      • Also contain a link to an archive page that listed all of the available blog content
    • Replace the work section (second section on the homepage) to dynamically display all of the project summaries
      • Get each to link through to the project detail page
  • Tighten up the look and feel. Remove some of the padding.

With a todo list primed, I spent the rest of the evening tackling the first item and getting familiar with creating new sections in Hugo.

Evening Three, Four and Five

The next 3 evenings were spent creating the new blog and project sections and the templates to render the detailed content, standalone list pages and also the section of html that will be included on the homepage.

Conclusion

Hugo is awesome!

There were a few frustrations along the way, but these were more to do with the css and javascript within the theme than too many caused by Hugo templates. Had I not wanted to bash a theme about and had been happy to use one of the many available then you could quite easily been up and running inside an evening or two.