Hugo Cheat Sheet

How to install Hugo

  1. Install Git.
  2. Install GO. Get it here.. Then run go version to check if it got installed correctly.
  3. Finally, isntall Hugo with WinGet by running winget install Hugo.Hugo.Extended.

Check the full tutorial here.

Hugo pluralizes content pages

If you don’t want this behavior, add pluralizeListTitles = false to your config.toml file at the root of your project.

Multiple pages with different html

If you want a separate layout for your “about” and “project” pages, for example:

    /layouts/_default/single.html: Applies to /content/about.md, /content/contact.md, etc. (and anything else that aren't covered by other section templates like /layouts/projects/single.html), appearing as http://example.com/about/ and http://example.com/contact/
    /layouts/about/single.html: Applies to /content/about/our-company.md, /content/about/our-products.md, etc., appearing as http://example.com/about/our-products/ etc.
    /layouts/projects/single.html: Applies to /content/projects/red-cross.md, /content/projects/unicef.md, etc., appearing as http://example.com/projects/red-cross/ etc.

Directory Lists

Hugo really wants you to place a _index.md file in each directory and sub-directory inside your content folder.

Imagine you want to create a Latest Posts section.
To list all the blog posts inside your /content/blog directory, use this:

{{ range (where .Site.Pages "Section" "blog") }}
    {{ range first 2 .Pages }}
        <ul>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </ul>
    {{ end }}
{{ end }}

Creating your Home Page

I found it a bit unintuitive how Hugo sets up your home page at first. I’d recommend reading through the Home Page Template section of their website.
But tl;dr:

Create an _index.md file inside your content/ directory.

Then create an index.html file inside your layouts/ directory and use this template to get started:

{{ define "main" }}
    <main aria-role="main">
    <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
    </header>
    <div class="homepage-content">
        <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
        {{.Content}}
    </div>
    <div>
        {{ range first 10 .Site.RegularPages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
    </main>
{{ end }}

Use {{ .Site.BaseURL }}

Image: ![alt text here](image/path/here.jpg)
Link: [alt text here](url_here.html)
Image with Title (text shows up on hover): ![alt text here](image/path/here.jpg "Image Title here")
Image with link and title: [![alt text here](image/path/here.jpg "Image Title here")](url_here.html)

Example of all 3: Lovely Designs website button

Shortcode for linking to a blog post from anywhere, using its absolute path: {{ < ref "/blog/my-post" > }}. More info here

Hugo Commands

Fresh render every time

Use hugo serve --disableFastRender to make the website do a full rebuild every time. Be careful not not use hugo serve -disableFastRender (just one dash) as this will result in a bug where hugo will create a folder called “isableFastRender” in your directory.

Change port

Add -p 1234 to the end of your command.

Clean build

Use hugo --cleanDestinationDir to “remove files from destination not found in static directories”. In other words, it deletes leftover files in the public folder that are no longer referenced anywhere on the website.

March 11, 2023

Home


Blog

Neogram