↓Skip to main content
  1. Refs/

Hugo

··4 mins
Table of Contents

Go To References #

  • Hugo Quick Start | Hugo Docs - Covers basic hugo setup and installation (e.g. brew install hugo), as well as the various ways of adding and setting up a theme

  • Hugo Page on Gitlab - Click Use template in the Pages/Hugo section, then name the project, and click Create project

  • Hugo, the scope, the context, and the dot | Regis Philibert - Great explanation about how contexts get passed around in Hugo with the {{ . }}, how contexts switch when in a Page or Partial or when using with and range, and how to access the top level context from a partial with $

  • .Scratch | Hugo Docs - Explains the basics of using the temporary ‘scratchpad’ for storing and manipulating data. Most useful section was the creation of a local scratch with {{ $scratch := newScratch }}

  • Hugo .Scratch explained | Regis Philibert - Detailed explanation of .Scratch with a great use case for conditionally setting CSS classes across Partials and Pages. Also has a useful comparison at the end, between using .Scratch vs. passing a (dict "key1" $arg1 "page" . ) when calling a Partial.

  • Hugo Conditionals | Mike Dane - Explains basic conditional syntax, e.g.

    {{ if or (not .src) (eq .src "") }}
{{ else if condition }}
{{ else }}
{{ end }}

    Note: The above if condition checks if .src is false, nil, or an empty string

  • Image Processing | Hugo Docs - Basic overview of built-in image processing capabilities (e.g. moving to srcset from src and moving from using the static folder to using the assets folder (or within the Page resources for storing images). Important distinctions:

    • For page resource, must use dot with capital R and GetMatch:
      {{ $image := .Resources.GetMatch "sunset.jpg" }}
    • For global resources, must use lowercase r with no dot, followed by Get:
      {{ $image := resources.Get "images/sunset.jpg" }}
    • Render using .RelPermalink:
    {{ $image := .Resources.GetMatch "sunset.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

    Can also do more than simple Resizing:

    • Simple resize: {{ $image.Resize "96x" }}
    • Webp format with quality of 50: {{ $image.Resize "600x webp q50" }}
    • Add background color: {{ $image.Resize "600x jpg #333" }}

  • How to add image processing to your Hugo website and improve performance - Contains a great shortcode which I’ve tweaked and modified into a partial to add srcset to all large images and for the preview images on the list pages. Will add a tutorial on how exactly I did that in the future.

  • Head to Head: Shortcodes vs Partials in Hugo | J.P. Droege - Explains differences between Shortcodes and Partials, namely where you call them:

    • Partials are called from templates and other partials
      {{ partial “headshot” (dict “ctx” $ “id” .) }}
    • Shortcodes are called directly from markdown files
      {{< headshot kim_keecheon >}}
      {{< headshot kim_keecheon >}} Inner text {{< /headshot >}}

  • Hugo tips: How to create author pages - Great example from Netlify about setting up multiple author support within Hugo, along with an example site.

  • Multiple Authors Support in Hugo Website | Coding N Concepts - Another example of a multi-author site, this time utilizing the data folder.

  • Last modified date | Mert Bakir - How to keep the lastmod date auto-updated

  • Permalinks | Hugo Docs - How to display URL paths that are different from content folder structure

Tools #

  • FrontMatter VSCode extension - Awesome extension which turns VSCode into an actual Content Management System (CMS)
  • FrontMatter Documentation - Overview of FrontMatter a Headless CMS running in VSCode / VSCodium. It allows you to not only create new content, but also manage data and images, as well as launch and preview the live site right in the IDE. Works with Hugo, Gatsby, Jekyll, and more.

Awesome Themes #

  • Congo theme | James Panther - This is the theme that this site is built on. James provides awesome support and is always making updates and is very responsive when I’ve had questions or needed help. Highly recommend!

Videos #

↑