# Static Site Generator Hugo ## Overview Hugo is a high-performance static site generator built with Go, known as "the world's fastest framework for building websites." With the ability to build sites in under 1 second and boasting over 65k GitHub stars, it demonstrates exceptional speed and popularity. Its architecture prioritizes simplicity and speed, making it suitable for diverse use cases from large-scale sites and documentation to personal blogs. Hugo features built-in multilingual support, a rich theme ecosystem, and advanced asset processing capabilities, making it optimized for technical documentation, corporate websites, and portfolio sites. ## Details Hugo 2025 leverages Go's concurrency capabilities through parallel builds, incremental builds, and optimized Markdown processing to generate sites with thousands of pages in seconds. Its pipeline-based architecture provides modular design with clear separation between content processing, template systems, and resource management, achieving both extensibility and maintainability. Single binary distribution simplifies environment setup and eliminates dependency management complexity. The Goldmark parser enables high-speed Markdown processing, while built-in asset pipelines (image processing, JS/CSS optimization, Sass/TailwindCSS support) and live reload development server provide a modern development experience. ### Key Features - **Exceptional Speed**: Builds large sites in under 1 second, maximizing Go's performance - **Single Binary**: Easy installation without dependencies, cross-platform support - **Rich Theme Ecosystem**: Hundreds of high-quality themes with easy customization - **Multilingual Support**: Built-in internationalization for multilingual site construction - **Advanced Content Management**: Front Matter, taxonomies, automatic related content generation - **Built-in Asset Processing**: Image optimization, CSS/JS processing, WebP conversion support ## Pros and Cons ### Pros - Overwhelming build speed with Go language for instant generation of large sites - Extremely simple environment setup and deployment with single binary distribution - Rich theme ecosystem and active community support - Built-in multilingual site construction support with flexible configuration system - Modern frontend support through advanced asset processing pipelines - Comfortable development experience with live reload development server - Complete support on major hosting services like GitHub Pages, Netlify, Vercel ### Cons - Learning curve for Go Template syntax and differences from JavaScript-based templates - Limited dynamic functionality, unsuitable for complex JavaScript-required processing - External APIs required for server-side processing like database integration - Potential workflow complexity with Git-based workflow in large team development - Go language knowledge required for custom feature development - Limited development toolchain compared to modern frameworks like React/Vue.js ## Reference Links - [Hugo Official Site](https://gohugo.io/) - [Hugo GitHub Repository](https://github.com/gohugoio/hugo) - [Hugo Themes Gallery](https://themes.gohugo.io/) ## Code Examples ### Installation and Site Creation ```bash # Install Hugo Extended (macOS - Homebrew) brew install hugo # Install Hugo Extended (Linux - Snapd) sudo snap install hugo --channel=extended # Install Hugo Extended (Windows - Chocolatey) choco install hugo-extended # Check version hugo version # Create new Hugo site hugo new site my-blog cd my-blog # Initialize Git git init # Add popular theme (Ananke) git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo "theme = 'ananke'" >> hugo.toml # Start development server hugo server # Production build hugo ``` ### Basic Configuration and Site Structure ```toml # hugo.toml - Site configuration baseURL = 'https://example.org/' languageCode = 'en-us' title = 'My Blog' theme = 'ananke' # Basic parameters [params] subtitle = 'Fast SSG built with Go' description = 'Tech blog built with Hugo' author = 'Developer' github = 'username' twitter = 'username' # Menu configuration [[menu.main]] name = 'Home' url = '/' weight = 1 [[menu.main]] name = 'Blog' url = '/posts/' weight = 2 [[menu.main]] name = 'About' url = '/about/' weight = 3 # Taxonomies (categories and tags) [taxonomies] category = 'categories' tag = 'tags' # Markup settings [markup] [markup.goldmark] [markup.goldmark.renderer] unsafe = true # Allow HTML tags [markup.highlight] style = 'github' lineNos = true lineNumbersInTable = false tabWidth = 2 ``` ### Content Creation and Structure ```bash # Create new blog post hugo new posts/my-first-post.md # Create new page hugo new about.md # Check draft posts hugo server -D # Also display drafts # Create section-specific content hugo new blog/hugo-guide.md hugo new docs/installation.md ``` ```markdown --- title: "Hugo Getting Started Guide" date: 2025-01-15T10:00:00+09:00 draft: false categories: ["Technology"] tags: ["Hugo", "SSG", "Blog"] description: "Learn the basics of Hugo static site generator" featured_image: "/images/hugo-logo.png" author: "Developer" --- # Hugo Getting Started Guide Hugo is a **fast static site generator built with Go**. ## Features 1. **Exceptional Speed**: Builds thousands of pages in seconds 2. **Easy Setup**: Get started immediately with single binary 3. **Rich Themes**: Choose from hundreds of available themes ## Code Example ```go // Hugo custom function example {{ range .Site.RegularPages }} <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2> {{ end }} ``` ## Conclusion Hugo is particularly suitable for **technical documentation** and **corporate websites**. ``` ### Theme and Layout Customization ```html <!-- layouts/_default/baseof.html - Base template --> <!DOCTYPE html> <html lang="{{ .Language.Lang }}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head/meta" . }} {{ partial "head/styles" . }} </head> <body> {{ partial "header" . }} <main> {{ block "main" . }}{{ end }} </main> {{ partial "footer" . }} {{ partial "scripts" . }} </body> </html> ``` ```html <!-- layouts/_default/single.html - Article template --> {{ define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end }} {{ define "main" }} <article class="post"> <header class="post-header"> <h1>{{ .Title }}</h1> <div class="post-meta"> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2, 2006" }} </time> {{ with .Params.author }} <span>by {{ . }}</span> {{ end }} </div> {{ with .Params.categories }} <div class="categories"> {{ range . }} <a href="{{ "/categories/" | relURL }}{{ . | urlize }}"> {{ . }} </a> {{ end }} </div> {{ end }} </header> <div class="post-content"> {{ .Content }} </div> {{ with .Params.tags }} <div class="tags"> {{ range . }} <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="tag"> #{{ . }} </a> {{ end }} </div> {{ end }} </article> {{ partial "related-posts" . }} {{ end }} ``` ### Multilingual Site Construction ```toml # hugo.toml - Multilingual configuration defaultContentLanguage = 'en' defaultContentLanguageInSubdir = true [languages] [languages.en] languageCode = 'en-us' languageName = 'English' title = 'My Blog' weight = 1 contentDir = 'content/en' [languages.en.params] description = 'Built with Hugo, the fastest SSG' [languages.ja] languageCode = 'ja-jp' languageName = '日本語' title = 'マイブログ' weight = 2 contentDir = 'content/ja' [languages.ja.params] description = 'Go製高速サイトジェネレータで構築' # Language-specific permalinks [languages.en.permalinks] posts = "/posts/:year/:month/:slug/" [languages.ja.permalinks] posts = "/ja/posts/:year/:month/:slug/" ``` ```markdown <!-- content/en/posts/hugo-tutorial.md --> --- title: "Hugo Tutorial" translationKey: "hugo-tutorial" --- # How to use Hugo Hugo is a fast static site generator. ``` ```markdown <!-- content/ja/posts/hugo-tutorial.md --> --- title: "Hugo チュートリアル" translationKey: "hugo-tutorial" --- # Hugo の使い方 Hugoは高速な静的サイトジェネレータです。 ``` ### Asset Processing and Frontend Integration ```toml # hugo.toml - Asset processing configuration [build] writeStats = true [minify] minifyOutput = true [imaging] quality = 85 resampleFilter = "Lanczos" [params] version = "1.0.0" ``` ```html <!-- layouts/partials/head/styles.html --> {{ $sass := resources.Get "scss/main.scss" }} {{ $style := $sass | resources.ToCSS | resources.Minify | resources.Fingerprint }} <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}"> {{ if .Site.Params.enableTailwind }} {{ $tailwind := resources.Get "css/tailwind.css" | css.TailwindCSS | minify | fingerprint }} <link rel="stylesheet" href="{{ $tailwind.RelPermalink }}" integrity="{{ $tailwind.Data.Integrity }}"> {{ end }} ``` ```javascript // assets/js/main.js document.addEventListener('DOMContentLoaded', function() { // Navigation menu const menuToggle = document.querySelector('.menu-toggle'); const menu = document.querySelector('.nav-menu'); if (menuToggle && menu) { menuToggle.addEventListener('click', function() { menu.classList.toggle('active'); }); } // Smooth scrolling const links = document.querySelectorAll('a[href^="#"]'); links.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); }); ``` ### Deployment and Hosting Integration ```yaml # .github/workflows/deploy.yml - GitHub Pages automated deployment name: Deploy Hugo site to Pages on: push: branches: ["main"] workflow_dispatch: permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false defaults: run: shell: bash jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: submodules: recursive - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: '0.121.0' extended: true - name: Setup Pages id: pages uses: actions/configure-pages@v4 - name: Build with Hugo env: HUGO_ENVIRONMENT: production HUGO_ENV: production run: | hugo \ --gc \ --minify \ --baseURL "${{ steps.pages.outputs.base_url }}/" - 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 ``` ```toml # netlify.toml - Netlify configuration [build] publish = "public" command = "hugo --gc --minify" [context.production.environment] HUGO_VERSION = "0.121.0" HUGO_ENV = "production" HUGO_ENABLEGITINFO = "true" [context.split1] command = "hugo --gc --minify --enableGitInfo" [context.split1.environment] HUGO_VERSION = "0.121.0" HUGO_ENV = "production" [context.deploy-preview] command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL" [context.deploy-preview.environment] HUGO_VERSION = "0.121.0" [context.branch-deploy] command = "hugo --gc --minify -b $DEPLOY_PRIME_URL" [context.branch-deploy.environment] HUGO_VERSION = "0.121.0" # Redirect configuration [[redirects]] from = "/old-blog/*" to = "/posts/:splat" status = 301 ```