What is a Static Site Generator?

A Static Site Generator (SSG) is a tool that builds a website by generating static HTML files from source content and templates. Unlike dynamic websites that generate pages on-demand via server-side code (like Python or Node.js), static site generators pre-build the entire site at compile time. This means that the final output is a collection of static files (HTML, CSS, JS) ready to be served by a web server.

Many SSGs provide the capability to produce content in markdown format, converting that into HTML during the build process. This makes creating pages quick and easy for those of us who prefer working with markdown for note taking.

What is Hugo?

Hugo is a static site generator written in Go (Golang), known for it’s speed and flexible content structure It is widely used for producing blogs, documentation sites, portfolios, and marketing websites.

I have used Hugo in the past for previous static websites and found it easy to work with. Like other SSGs, Hugo provides the capability to run a development server locally to preview your work before pushing into production.

Hugo Features

• Fast build times: Can generate thousands of pages in milliseconds.
• Single binary: No runtime or dependencies, just download and run.
• Powerful templating: Built-in Go-based template engine.
• Flexible content model: Organize content however you like (pages, sections, taxonomies).

Alternatives

• Jekyll
  • Another popular static site generator written in Ruby, primarily used for creating blogs, documentation sites, and personal websites.
  • Jekyll also the engine behind GitHub Pages, making it convenient for developers who host their sites on GitHub.
• 11ty (Eleventy)
  • Written in JavaScript and designed for developers who want to build static websites with full control over structure, templating, and performance, without the overhead of complex frameworks.
• Astro
  • Running on Node.js, Astro is designed for building fast, content-rich websites using a component-based architecture. Unlike some other SSGs that render everything at build time, Astro utilizes a “zero-JS by default” approach, which results in shipping as little JavaScript as possible to the client.

Install Hugo

Hugo can be installed on Windows, MacOS, Linux and BSD operating systems. For specific guidance for each OS, please visit the Hugo documentation for more details. As I am currently running Windows 11 on my machine, and already a user of Winget, therefore this was my chosen installation method.

Windows

1
2
3
4
5
6
7
8

# Install Hugo via Winget.
winget install Hugo.Hugo.Extended

# Confirm installation/check version.
hugo version

# Uninstall Hugo (if required).
winget uninstall --name "Hugo (Extended)"

Linux

1
2
3
4
5
6
7
8

# Install via Snap package (Ubuntu)
sudo snap install hugo

# Install via Aopt repositories (Debian-derived)
sudo apt install hugo

# Fedora
sudo dnf install hugo

MacOS

1

brew install hugo

Create New Site

1
2
3
4
5
6

# Create new Hugo site called TestSite
hugo new site TestSite
cd TestSite

# Install a theme.
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Edit the file hugo.toml located in the root of the project folder. Add the theme folder name to the configuration file and save.

1
2

# Add theme parameter and theme name.
theme = 'ananke'

Start the Hugo server. A local address will be provided in the terminal. Copy this and paste it in your web browser to view the default page of the new site.

1
2

# Start Hugo local server.
hugo server

Output:

1
2
3
4
5
6

Built in 274 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

This allows you to review the site locally before pushing it into production.

Final Steps

When the site is ready to go live, ensure that the codebase is commited to a repository (Github, GitLab, Azure DevOps etc). This will allow for version control, centralised storage, and automation for deployments via workflows. For guidance on how to configure automated deployments using Terraform, Hugo and Github Actions, check out this article on how to get started.

Cover image take from Hugo website.