Hugo
Go言語で構築された最高速のSSG。1秒未満でサイトをビルドでき、65k超のGitHubスターを誇る。テクニカルドキュメントに最適。
トレンド・動向
圧倒的なビルド速度により大規模サイトやドキュメントサイトで採用拡大。シンプルさと高速性を重視する開発者に人気。
# 静的サイトジェネレータ
Hugo
## 概要
Hugoは「世界最速のWebサイト構築フレームワーク」として開発された、Go言語製の高性能静的サイトジェネレータです。1秒未満でサイトをビルドできる圧倒的な速度と、65k超のGitHubスターを誇る高い人気を持ちます。シンプルさと高速性を重視したアーキテクチャにより、大規模サイトやドキュメントサイトから個人ブログまで幅広い用途に対応。多言語サポート、豊富なテーマエコシステム、高度なアセット処理機能を内蔵し、技術ドキュメント、企業サイト、ポートフォリオサイトの構築に最適化されています。
## 詳細
Hugo 2025年版はGo言語の並行処理能力を活かした並列ビルド、インクリメンタルビルド、最適化されたMarkdown処理により、数千ページのサイトを数秒で生成可能な卓越したパフォーマンスを実現しています。パイプライン型アーキテクチャによるモジュラー設計で、コンテンツ処理、テンプレートシステム、リソース管理が明確に分離され、拡張性と保守性を両立。シングルバイナリ配布により環境構築が容易で、依存関係管理の複雑さを解消します。Goldmarkパーサーによる高速Markdown処理、内蔵アセットパイプライン（画像処理、JS/CSS最適化、Sass/TailwindCSS対応）、ライブリロード開発サーバーにより、モダンな開発体験を提供します。
### 主な特徴
- **圧倒的な高速性**: 大規模サイトも1秒未満でビルド、Go言語の性能を最大活用
- **シングルバイナリ**: 依存関係なしの簡単インストール、クロスプラットフォーム対応
- **豊富なテーマエコシステム**: 数百の高品質テーマと簡単なカスタマイズ
- **多言語サポート**: 内蔵国際化機能による多言語サイト構築
- **高度なコンテンツ管理**: Front Matter、タクソノミー、関連コンテンツの自動生成
- **内蔵アセット処理**: 画像最適化、CSS/JS処理、WebP変換対応
## メリット・デメリット
### メリット
- Go言語による圧倒的なビルド速度で大規模サイトも瞬時に生成
- シングルバイナリ配布により環境構築とデプロイが極めて簡単
- 豊富なテーマエコシステムと活発なコミュニティサポート
- 多言語サイト構築の内蔵サポートと柔軟な設定システム
- 高度なアセット処理パイプラインによるモダンフロントエンド対応
- ライブリロード開発サーバーによる快適な開発体験
- GitHub Pages、Netlify、Vercel等主要ホスティングサービスでの完全サポート
### デメリット
- Go Template記法の学習コストとJavaScript系テンプレートとの差異
- 動的機能が限定的でJavaScriptが必要な複雑な処理には不向き
- データベース連携等のサーバーサイド処理には外部API必須
- 大規模チーム開発でのGitベースワークフロー複雑化の可能性
- カスタム機能開発時のGo言語知識要求
- React/Vue.js等のモダンフレームワークと比較した開発ツールチェーンの限定性
## 参考ページ
- [Hugo 公式サイト](https://gohugo.io/)
- [Hugo GitHub リポジトリ](https://github.com/gohugoio/hugo)
- [Hugo テーマ一覧](https://themes.gohugo.io/)
## 書き方の例
### インストールとサイト作成
```bash
# Hugo Extended版のインストール（macOS - Homebrew）
brew install hugo
# Hugo Extended版のインストール（Linux - Snapd）
sudo snap install hugo --channel=extended
# Hugo Extended版のインストール（Windows - Chocolatey）
choco install hugo-extended
# バージョン確認
hugo version
# 新しいHugoサイトの作成
hugo new site my-blog
cd my-blog
# Git初期化
git init
# 人気テーマ（Ananke）の追加
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
# 開発サーバーの起動
hugo server
# 本番ビルド
hugo
```
### 基本設定とサイト構成
```toml
# hugo.toml - サイト設定
baseURL = 'https://example.org/'
languageCode = 'ja-jp'
title = 'マイブログ'
theme = 'ananke'
# 基本パラメータ
[params]
subtitle = 'Go製高速サイトジェネレータ'
description = 'Hugoで構築した技術ブログ'
author = '開発者'
github = 'username'
twitter = 'username'
# メニュー設定
[[menu.main]]
name = 'ホーム'
url = '/'
weight = 1
[[menu.main]]
name = 'ブログ'
url = '/posts/'
weight = 2
[[menu.main]]
name = 'About'
url = '/about/'
weight = 3
# タクソノミー（カテゴリとタグ）
[taxonomies]
category = 'categories'
tag = 'tags'
# マークアップ設定
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true # HTMLタグを許可
[markup.highlight]
style = 'github'
lineNos = true
lineNumbersInTable = false
tabWidth = 2
```
### コンテンツ作成と構造
```bash
# 新しいブログ記事の作成
hugo new posts/my-first-post.md
# 新しいページの作成
hugo new about.md
# 記事のドラフト状態確認
hugo server -D # ドラフトも表示
# セクション別コンテンツ作成
hugo new blog/hugo-guide.md
hugo new docs/installation.md
```
```markdown
---
title: "Hugo入門ガイド"
date: 2025-01-15T10:00:00+09:00
draft: false
categories: ["技術"]
tags: ["Hugo", "SSG", "ブログ"]
description: "Hugoの基本的な使い方を解説します"
featured_image: "/images/hugo-logo.png"
author: "開発者"
---
# Hugo入門ガイド
Hugoは**Go言語で開発された高速な静的サイトジェネレータ**です。
## 特徴
1. **圧倒的な速度**: 数千ページを数秒でビルド
2. **簡単セットアップ**: シングルバイナリですぐに始められる
3. **豊富なテーマ**: 数百のテーマから選択可能
## コード例
```go
// Hugo でのカスタム関数例
{{ range .Site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ end }}
```
## 結論
Hugoは特に**技術ドキュメント**や**企業サイト**に最適です。
```
### テーマとレイアウトカスタマイズ
```html
<!-- layouts/_default/baseof.html - ベーステンプレート -->
<!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 - 記事テンプレート -->
{{ 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 "2006年1月2日" }}
</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 }}
```
### 多言語サイト構築
```toml
# hugo.toml - 多言語設定
defaultContentLanguage = 'ja'
defaultContentLanguageInSubdir = true
[languages]
[languages.ja]
languageCode = 'ja-jp'
languageName = '日本語'
title = 'マイブログ'
weight = 1
contentDir = 'content/ja'
[languages.ja.params]
description = 'Go製高速サイトジェネレータで構築'
[languages.en]
languageCode = 'en-us'
languageName = 'English'
title = 'My Blog'
weight = 2
contentDir = 'content/en'
[languages.en.params]
description = 'Built with Hugo, the fastest SSG'
# 言語別パーマリンク
[languages.ja.permalinks]
posts = "/posts/:year/:month/:slug/"
[languages.en.permalinks]
posts = "/en/posts/:year/:month/:slug/"
```
```markdown
<!-- content/ja/posts/hugo-tutorial.md -->
---
title: "Hugo チュートリアル"
translationKey: "hugo-tutorial"
---
# Hugo の使い方
Hugoは高速な静的サイトジェネレータです。
```
```markdown
<!-- content/en/posts/hugo-tutorial.md -->
---
title: "Hugo Tutorial"
translationKey: "hugo-tutorial"
---
# How to use Hugo
Hugo is a fast static site generator.
```
### アセット処理とフロントエンド統合
```toml
# hugo.toml - アセット処理設定
[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() {
// ナビゲーションメニュー
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.nav-menu');
if (menuToggle && menu) {
menuToggle.addEventListener('click', function() {
menu.classList.toggle('active');
});
}
// スムーススクロール
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' });
}
});
});
});
```
### デプロイとホスティング連携
```yaml
# .github/workflows/deploy.yml - GitHub Pages自動デプロイ
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設定
[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"
# リダイレクト設定
[[redirects]]
from = "/old-blog/*"
to = "/posts/:splat"
status = 301
```