Hugo

Tips and tricks for Hugo, a static site generator.

Hugo is a static site generator that creates websites from Markdown. It’s typically used to create documentation sites (like this one).

Here, I collect relevant links, tips, and tricks.

Serve local site

To preview local changes:

$ hugo serve

By default, Hugo publishes your preview to https://lanceleonard.com.

You can also use command-line options to customize Hugo’s behavior.

For example:

$ hugo serve --disableFastRender --ignoreCache --logLevel warn

These options tell Hugo to fully rebuild the entire site when updating the local preview and to display more error messages.

To learn more, use Hugo’s built-in help:

$ hugo -help

Show version

To display the Hugo version number (or to see if it’s installed):

$ hugo version
hugo v0.125.5+extended darwin/amd64 BuildDate=2024-05-01T15:22:11Z VendorInfo=brew

This example shows that the extended version of Hugo v0.125.5 is installed.

Hide content

There are times when you’ll want to hide content from from different views.

For example, an article might:

  • Be in progress and not quite ready for public consumption
  • Have to wait for another article
  • Serve as a bridging element without having public content

Here are different ways to hide content.

Hide article content

Use HTML comments to hide content within an article.

## Section 1
<!-- 
## Section 2 in progress
-->
## Section 3

This keeps the content from rendering on the published webpage; however, it’s still published in the source.

Use care when working with sensitive content.

Set draft mode

Use draft mode to keep articles private.

Do this in the article’s front matter:

---
title: "My article title"
description: "My article description"
draft: true
---

If a doc appears in the table of contents (TOC) after setting this option, verify that you’ve set the value as shown.

To illustrate, you might accidentally add a semicolon to the end of the line (a common mistake). While this is a syntax error, Hugo doesn’t generate a warning. Instead, it simply ignores the directive.

To list articles currently in draft mode:

$ hugo list drafts

For details, see the Hugo reference page.

Exclude from contents

To exclude an article from the navigation menu displayed along the left side of the page, hide it from the table of contents (toc):

---
title: "My article title"
description: "My article description"
toc_hide: true
---

Hide summary

By default, article descriptions appear in index pages as article summaries.

You can hide descriptions from the index page by updating the article’s front matter:

---
title: "My article title"
description: "My article description"
hide_summary: true
---

Vital statistics

  • 16 May 2024: Added version section
  • 8 May 2024: First post:

Fix dark mode code block

How to get code to render in dark mode using docsy theme.