David Large for CloudCannon

Posted on Jun 10, 2022 • Edited on Jul 22, 2022 • Originally published at cloudcannon.com

Getting set up with Hugo

#hugo #jamstack #beginners #tutorial

Brought to you by CloudCannon, the Git-based CMS for Hugo.

Welcome to this introduction to Hugo tutorial. The goal of this series is to take you from a lion cub with basic web design knowledge to creating your first Hugo website. In this series you’ll learn how to set up a Hugo site, the basics of usingHugo layouts, partials, and templating, set up a blog, and finally use data files. By the end of this series you’ll have the foundational knowledge to build your own Hugo sites.

Let’s get into your first lesson.

What is Hugo?

Hugo is a static site generator. It takes a directory of source files and runs a build process over them to generate a purely static website.

What makes Hugo unique is its unparalleled build speeds and strict conventions around layouts, taxonomies, and content. It’s a static site generator that powers high profile websites such as Let’s Encrypt, 1Password, Linode, and digital.gov.

Installing Hugo

Hugo is one of the simplest static site generators to install as it’s distributed as a single binary — one of the many perks of a Go program.

If you’re using macOS or Linux, then Homebrew is the easiest way to install Hugo. Once you have Homebrew installed, you can run:

    brew install hugo

If you’re on Windows, then the Chocolatey package manager is the way to go. Once Chocolatey is installed, run:

    choco install hugo-extended -confirm

Let’s triple check that all went to plan. In your terminal check the Hugo version:

    hugo version

If that printed out a version number, you’re good to go! If not, consult the Hugo documentation or reach out on the Hugo community forums.

Set up your Hugo site

In your terminal, navigate to the directory where you want your Hugo project to live in you and run this command:

    hugo new site my-first-hugo-site

Hugo will set up the scaffolding for your site. Open up your site in your favorite code editor and poke through the contents.

You’ll see a number of directories that probably don’t mean anything to you at this stage. I’ll give a brief explanation of each one but don’t fret if you don’t understand them right now. We’ll be using them over the course of this tutorial which will build familiarity.

archetypes - defines default metadata (also known as front matter) for new content. You don’t need to worry about archetypes for this series.
config.toml - the configuration file for your soon-to-be flourishing Hugo site.
content - your (typically markdown) content for pages lives here.
data - csv, json, xml or toml files that can be accessed like a read-only database.
layouts - the page templates for your content.
static - all of your assets that don’t need processing (often images, fonts, pdfs etc.)
themes - Jumpstart your Hugo site with an existing theme. (We won’t be using themes in this series.)