Build coachjaap.nl with Hugo

Submitted by clemens on Fri, 2019/11/08 - 3:50pm
Hugo twitter logo

Building the website Coach Jaap using Hugo using theme Introduction was a challenge.

The initial build was OK but the fine tuning took way to much time.

Responsive images

I knew we need responsive images. I was suprised Hugo does not support that yet.

Fortunately the blog by Laura promised ease of implementation.

The theme had a list of content from /content/home for the home page. The /layouts/index.html provided this. But the current context of the index page changed when rendering the items in the list.

I had to change the context for /layouts/shortcodes/img.html.

{{/* .Page is a 'pageForShortcode' thingy so get it's parent */}}
{{ $p := .Page.Parent }}

{{ if eq .Page.File.Path "home/index.md" }}
  {{ $p = .Page }}
{{ end }}

OpenGraph

I learned the theme took the og:image from the original images of which some where 7MB in size.

Checking the specs on FB Developer and FB best practics I resized the image to 600x600 and hard coded just one image in **/layouts/partials/openGraph.html

Lessons learned

  • Buildiing a static site using Hugo is easy. Fine tuning is much harder.
  • Do not assume all themes have the same file structure
  • Glad to have found some blogs about the troubles found
  • Make sure you know (to find) the specs.
Hugo
Static site