Theme

Minimum layout

A basic Hugo theme only needs these files:

The index.html file is the home page of the site.

The _default directory contains the default layouts applied to single content pages (single.html) and pages that display lists of content (list.html).

Generating the Theme

You can make a theme by creating a new directory in the themes folder of your site, buy Hugo has a built-in theme generator that creates everything you need for your theme. Execute this command from the root of your Hugo site to generate a new theme named basic:

hugo new theme basic

docker run --rm -it \
  -v "$(pwd):/src" \
  -u $(id -u):$(id -g) \
  klakegg/hugo \
  new theme basic

This command creates the themes/basic directory and several subdirectories and files:

The theme has a place for its own archetypes, as well as directories to store the layout files and static assets like stylesheets, scripts, and images.

Enable a theme

config.toml:

...
theme = "basic"
...

Main template

Hugo provides a single place for you to put your skeleton so that all other layouts can build on it.

layouts/_default/baseof.html

This file will be the “base” of every other layout you’ll create. And instead of including the full skeleton, it’s pulling in other files, or partials, which contain pieces of the layout.

Partials are located in the layouts/partials directory.

Including a partial:

{{- partial "head.html" . -}}

The dash suppresses whitespace characters in the output, such as spaces and newline characters. Placing a dash after the opening braces removes all whitespace in front of the expression, and placing the dash in front of the closing braces removes whitespace after the expression.

Also, there’s a dot after the name of the partial. The partial function takes a filename and a context for the data. In order to access data like the page title and content, you hae to pass the context to the partial function, and a period means “the current context”. Remember that the default context for a layout is the Page context, so when you pass the dot to the partial function, you’re making the Page context available to the partial.

How to pull in content. The baseof.html:

{{- block "main" . }}{{- end }}

And layouts:

{{ define "main" }}

  {{ .Content }}

{{ end }}