HugoでつくるSSGサイトとCDN味比べ

1. 掴み：阿部寛のサイトはなぜ速いのか

時間: 1分

デモ

👉 阿部寛のホームページにアクセス

（実際にブラウザで開いて見せる）

結果

爆速。

なぜ速い？

  • 画像が軽い
  • JavaScriptがない
  • 静的HTMLだから

疑問

「静的HTMLが速いのはわかった。でも手書きは辛い…」

→ そこで SSG（静的サイトジェネレーター）

次へ: SSGとは

read more
HugoでつくるSSGサイトとCDN味比べ

2. SSGとは

時間: 2分

Static Site Generator

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Markdown   │ ──▶ │    SSG      │ ──▶ │    HTML     │
│  テンプレート │     │  (ビルド)    │     │  CSS/JS     │
└─────────────┘     └─────────────┘     └─────────────┘
      ↑                                        ↓
   開発時                                  デプロイ

素のHTML手書きとの違い

項目手書きHTMLSSG
記述HTML直書きMarkdown
テンプレートコピペ再利用可能
ビルド最適化手動自動（圧縮、画像最適化）
100ページ作成地獄余裕

動的サイトとの比較

項目動的サイト（WordPress等）SSG
リクエスト時DB問い合わせ → HTML生成生成済みHTMLを返すだけ
サーバー負荷高いほぼゼロ
セキュリティ攻撃対象多い攻撃面が少ない
スケーリング難しいCDNに置くだけ

次へ: SSGフレームワーク紹介

read more
HugoでつくるSSGサイトとCDN味比べ

3. SSGフレームワーク紹介

時間: 1分

主要SSG

フレームワーク言語特徴
HugoGo爆速ビルド、シンプル
Next.jsJavaScriptReact、ハイブリッド対応
AstroJavaScript島アーキテクチャ、軽量
GatsbyJavaScriptGraphQL、プラグイン豊富

今日は Hugo でやります

選んだ理由

  • ビルドが圧倒的に速い（数千ページでも数秒）
  • シングルバイナリで依存関係なし
  • 学習コストが低い

ビルド速度の参考値

ページ数HugoNext.jsGatsby
100~1秒~10秒~30秒
1,000~3秒~60秒~数分
10,000~10秒数分数十分

※ 環境・設定により変動

read more