Tutorial on HCD

Introduction

Mon, 01 Jan 0001 00:00:00 +0000

This article assumes you already have a basic understanding of programming languages, so it won't introduce programming concepts from scratch. Instead, it builds on that foundation to introduce Hugo's syntax.

Basic Syntax

Mon, 01 Jan 0001 00:00:00 +0000

Arithmetic and Comparison

Hugo doesn't support symbols like + or <. You need to use function calls for these operations.

{{ add 1 1 }}
{{ sub 2 1 }}
{{ mul 2 2 }}
{{ div 4 2 }}
{{ eq 1 1 }}
{{ ne 1 2 }}
{{ lt 1 2 }}
{{ le 2 2 }}
{{ gt 3 2 }}
{{ ge 2 2 }}

2
1
4
2
true
true
true
true
true
true

if / else if / else

The basic if-else syntax. false, an empty string, 0, nil, an empty slice, and an empty dict are all falsy values.

Resource Processing

Mon, 01 Jan 0001 00:00:00 +0000

resource.Resource objects handle Hugo's resource processing.

Creation

You can create resource.Resource objects in several ways. As global functions, you have:

These four methods are used to retrieve resources from the assets directory. To retrieve resources from the current page, use .Resources.Get, .Resources.GetMatch, and so on instead.

Development Setup

Mon, 01 Jan 0001 00:00:00 +0000

This article covers development-related setup for working with Hugo.

Editor Setup

VS Code syntax highlighting and autocomplete: theNewDynamic/language-hugo-vscode
JetBrains syntax highlighting and autocomplete: Smart Hugo

Formatter Setup

HTML

You can use a Prettier plugin to format HTML + Go template files.

Build a Theme

Mon, 01 Jan 0001 00:00:00 +0000

This article walks you through building a theme from scratch. Learning by doing gets you there faster.

Create the Project

hugo new project my-blog --format=yaml
cd my-blog

Stylesheet

Get the styles ready first. CSS has nothing to do with templates, so copy a simple template into assets/css/main.css for now.