Hugo: Static Site Generator, Themes, Performance Guide

What is Hugo?

Hugo is an open-source static site generator (SSG) written in Go. It takes Markdown content + HTML/Go templates + a config file and produces a fully static HTML site that can be deployed to any CDN, S3, GitHub Pages, Netlify, or Cloudflare. Hugo is famous for its build speed — generating thousands of pages in seconds, often 10-100× faster than Node-based SSGs like Gatsby or Next.js export.

Hugo is single-binary (no Node, no Ruby, no runtime dependencies), distributed as one executable for any OS. That makes setup and CI integration trivial.

Why Hugo?

• Insanely fast builds. 1ms per page typical. 10,000 pages in seconds.
• Single binary. No npm install, no gem install — one download.
• Content from Markdown. Front-matter (TOML/YAML/JSON) + body.
• Powerful templating. Go templates with rich helpers.
• Themes ecosystem. 300+ free themes at themes.gohugo.io.
• Multi-language out-of-box. i18n + per-language content directories.
• Image processing. Built-in resize, format conversion, lazy-loading helpers.
• Output formats. Generate HTML + RSS + JSON + AMP from same content.

Hugo project structure

my-site/
├── archetypes/         # New-content templates
├── content/            # Markdown content
│   ├── posts/
│   │   ├── post-1.md
│   │   └── post-2.md
│   └── about.md
├── data/               # Site-wide data files (JSON/YAML/TOML)
├── layouts/            # HTML templates
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── single.html  # Single page
│   │   └── list.html    # List page
│   └── partials/
├── static/             # Static assets (copied as-is)
├── themes/             # Themes (git submodules)
├── public/             # Generated output
├── hugo.toml           # Site config
└── go.mod              # If using Hugo Modules

Hugo vs other SSGs

Quickstart: build a Hugo site

# Install Hugo (macOS)
brew install hugo

# Create new site
hugo new site my-site
cd my-site

# Add a theme (git submodule)
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml

# Add a post
hugo new content posts/hello.md
# Edit content/posts/hello.md, set draft = false

# Run dev server with live reload
hugo server -D

# Build for production
hugo --minify
# Output in public/

Markdown front matter example

+++
title = 'My First Post'
date = 2026-05-05
draft = false
tags = ['hugo', 'tutorial']
+++

# Hello, Hugo!

This is **Markdown** content rendered to HTML.

Hugo template syntax (Go templates)

<!-- layouts/_default/single.html -->
{{ define "main" }}
  <article>
    <h1>{{ .Title }}</h1>
    <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
    {{ .Content }}
  </article>
{{ end }}

Hugo best practices

• Use Hugo Pipes for asset processing. SCSS, JS bundling, fingerprinting.
• Use Hugo Modules for themes. Better than git submodules for dependency mgmt.
• Image processing built-in. {{ $img := resources.Get "hero.jpg" | images.Resize "800x" }}
• Page bundles for asset locality. Keep MD + images together.
• Multi-language: per-language content dirs. content.en/, content.fr/.
• Deploy to CDN. Output is pure static — Cloudflare Pages, Netlify, S3+CF, GitHub Pages.
• Use --minify in production. Removes whitespace.
• Cache busting via fingerprinting. {{ $css := resources.Get "main.scss" | css.Sass | resources.Fingerprint }}

Common pitfalls

• Theme breaking changes. Pin theme version; track upstream.
• Go template learning curve. Different from Liquid/Jinja; takes ramp-up.
• Limited dynamic features. No server runtime — must use 3rd-party for forms, search.
• Build-time only data. Site data is frozen at build; CMS workflows need rebuild trigger.
• Image resizing on first build is slow. Cache in resources/_gen/; commit or persist in CI.
• Markdown variability. Hugo's Goldmark extensions differ from CommonMark; test pages render as expected.

Hugo deployment options

FAQ: Hugo

Hugo or Jekyll?

Hugo is dramatically faster (10-100×) and has no Ruby dependency. Jekyll has GitHub Pages native support without configuration. Modern projects: Hugo. Legacy GitHub Pages: Jekyll fine.

Hugo or Astro?

Hugo for fastest builds + content-only sites. Astro for content + interactive components (islands).

Can Hugo do server-side rendering?

No — Hugo is a SSG (static site generator). Output is HTML files. For dynamic features, pair with serverless functions or use a different framework.

How do I add comments to a Hugo site?

Third-party: Disqus, Utterances (GitHub issues), Giscus (GitHub discussions), Cusdis. Hugo has no built-in comment system.

Is Hugo good for large sites?

Yes — Hugo is the fastest SSG. Sites with 10,000+ pages build in seconds. Used by smashingmagazine.com, kubernetes.io.

Does Hugo support multi-language sites?

Yes — built-in i18n. Translate content per language; use {{ i18n "key" }} in templates.

What's the difference between Hugo themes and modules?

Themes: traditional approach, often via git submodule. Modules: Hugo's Go-modules-based system, more powerful for composing multiple sources.

Test your Hugo site's performance with LoadFocus

LoadFocus runs Lighthouse audits + load tests against your Hugo deployment from 25+ regions, validating the speed advantage shows up in Core Web Vitals. Sign up free at loadfocus.com/signup.