Static Site Generation With Hugo

Introduction

Static site generators have revolutionized modern web development by offering a perfect blend of simplicity, performance, and security. Among these tools, Hugo stands out as one of the fastest and most flexible options available. Built with Go, Hugo can generate thousands of pages in seconds, making it ideal for blogs, documentation sites, portfolios, and marketing pages.

In this guide, I’ll show you how to build a static website with Hugo and deploy it to modern CDN platforms for optimal performance and global reach.

What is Hugo?

Hugo is an open-source static site generator written in Go. Unlike traditional Content Management Systems (CMS) that generate pages dynamically on each request, Hugo pre-builds all your pages as static HTML files. This approach offers several advantages:

Performance: Static files are served directly without database queries or server-side processing
Security: No databases or server-side code means fewer attack vectors
Scalability: Static files can be easily cached and distributed via CDNs
Cost: Lower hosting costs since you’re serving static files
Version Control: Your entire site can be managed with Git

Getting Started with Hugo

Installation

First, install Hugo on your system:

macOS:

brew install hugo

Linux:

snap install hugo

Windows:

choco install hugo

Creating Your First Site

Create a new Hugo site:

hugo new site my-website
cd my-website

This creates the basic Hugo directory structure:

my-website/
├── archetypes/
├── content/
├── layouts/
├── static/
├── themes/
└── config.toml

Adding a Theme

Hugo has a rich ecosystem of themes. Let’s add a popular one:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> config.toml

Creating Content

Create your first blog post:

hugo new posts/my-first-post.md

Edit the file in content/posts/my-first-post.md:

---
title: "My First Post"
date: 2024-01-15T10:00:00Z
draft: false
---

Welcome to my new Hugo-powered website! This is my first post.

## Why Hugo?

Hugo is amazing because it's fast, flexible, and fun to use.

Local Development

Run the Hugo development server:

hugo server -D

Visit http://localhost:1313 to see your site in action. The -D flag includes draft content in development.

Building for Production

When you’re ready to deploy, build your site:

hugo

This generates your static site in the public/ directory. All HTML, CSS, JavaScript, and assets are optimized and ready for deployment.

Deploying to CDN Platforms

Modern CDN platforms make deploying Hugo sites incredibly easy. Let’s explore the most popular options.

Deploying to Netlify

Netlify offers continuous deployment, form handling, and serverless functions.

Step 1: Create a netlify.toml in your project root:

[build]
  publish = "public"
  command = "hugo --gc --minify"

[build.environment]
  HUGO_VERSION = "0.120.0"
  HUGO_ENV = "production"

[context.production.environment]
  HUGO_VERSION = "0.120.0"
  HUGO_ENV = "production"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"

Step 2: Push your code to GitHub, GitLab, or Bitbucket

Step 3: Connect your repository to Netlify:

Visit netlify.com and sign in
Click “New site from Git”
Select your repository
Netlify automatically detects Hugo and configures build settings
Click “Deploy site”

Your site will be live in minutes with automatic HTTPS and a global CDN!

Deploying to Cloudflare Pages

Cloudflare Pages offers unlimited bandwidth, blazing-fast performance, and tight integration with Cloudflare’s edge network.

Step 1: Push your code to a Git repository (GitHub or GitLab)

Step 2: Create a new Pages project:

Visit dash.cloudflare.com
Go to “Workers & Pages” → “Pages”
Click “Create a project”
Connect your Git repository

Step 3: Configure build settings:

Build command: hugo --minify
Build output directory: public
Environment variables:
- HUGO_VERSION: 0.120.0

Step 4: Deploy

Cloudflare Pages will build and deploy your site to their global edge network. Every git push triggers a new deployment.

Deploying to AWS Amplify

AWS Amplify provides hosting with CI/CD and easy integration with other AWS services.

Step 1: Create an amplify.yml:

version: 1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

Step 2: In AWS Console:

Navigate to AWS Amplify
Connect your Git repository
Configure build settings (Amplify auto-detects amplify.yml)
Deploy

Deploying to GitHub Pages

For free hosting directly from your GitHub repository:

Step 1: Create .github/workflows/hugo.yml:

name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      - name: Build
        run: hugo --minify
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
  
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v3

Step 2: In repository settings, enable GitHub Pages and select “GitHub Actions” as the source.

Performance Optimization

Image Optimization

Hugo supports image processing out of the box:


      My photo

Minification

Enable minification in your config:

[minify]
  disableCSS = false
  disableHTML = false
  disableJS = false
  disableJSON = false
  disableSVG = false
  disableXML = false

Caching Headers

Configure caching in your CDN platform for optimal performance:

# Netlify example in netlify.toml
[[headers]]
  for = "/css/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/js/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Conclusion

Hugo combined with modern CDN platforms provides a powerful, performant, and cost-effective solution for building websites. Whether you choose Netlify’s developer-friendly features, Cloudflare’s edge network performance, or GitHub Pages’ simplicity, you’ll benefit from:

Instant global distribution
Automatic HTTPS
Zero-downtime deployments
Automatic scaling
Built-in analytics (platform-dependent)

The static site approach with Hugo means you’re building websites that are fast, secure, and maintainable. Start building your Hugo site today and deploy it to the edge!