チュートリアルread more
テーマを追加する
テーマの選び方
Hugoには多くの無料テーマがあります。
公式テーマサイト: https://themes.gohugo.io/
テーマのインストール
Git submoduleを使う方法が一般的です:
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
設定ファイルを編集
hugo.toml にテーマを指定します:
theme = 'ananke'
これでテーマが適用されます!
HugoでつくるSSGサイトとCDN味比べ
read more
3. SSGフレームワーク紹介
時間: 1分
主要SSG
| フレームワーク | 言語 | 特徴 |
|---|---|---|
| Hugo | Go | 爆速ビルド、シンプル |
| Next.js | JavaScript | React、ハイブリッド対応 |
| Astro | JavaScript | 島アーキテクチャ、軽量 |
| Gatsby | JavaScript | GraphQL、プラグイン豊富 |
今日は Hugo でやります
選んだ理由
- ビルドが圧倒的に速い(数千ページでも数秒)
- シングルバイナリで依存関係なし
- 学習コストが低い
ビルド速度の参考値
| ページ数 | Hugo | Next.js | Gatsby |
|---|---|---|---|
| 100 | ~1秒 | ~10秒 | ~30秒 |
| 1,000 | ~3秒 | ~60秒 | ~数分 |
| 10,000 | ~10秒 | 数分 | 数十分 |
※ 環境・設定により変動
チュートリアルread more
記事を作成する
新しい記事を作成
Hugoコマンドを使って記事を作成します:
hugo new content posts/my-post.md
フロントマター
記事の先頭にはメタデータを記述します:
+++
date = '2025-12-17T10:00:00+09:00'
draft = true
title = '記事タイトル'
tags = ['タグ1', 'タグ2']
+++
Markdownで本文を書く
フロントマターの下に、Markdown形式で本文を書きます。
- 太字 は
**太字** - 斜体 は
*斜体* - リンク は
[リンク](URL)
以上で基本的な記事作成は完了です!