2. SSGとは
時間: 2分
Static Site Generator
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Markdown │ ──▶ │ SSG │ ──▶ │ HTML │
│ テンプレート │ │ (ビルド) │ │ CSS/JS │
└─────────────┘ └─────────────┘ └─────────────┘
↑ ↓
開発時 デプロイ
素のHTML手書きとの違い
| 項目 | 手書きHTML | SSG |
|---|---|---|
| 記述 | HTML直書き | Markdown |
| テンプレート | コピペ | 再利用可能 |
| ビルド最適化 | 手動 | 自動（圧縮、画像最適化） |
| 100ページ作成 | 地獄 | 余裕 |
動的サイトとの比較
| 項目 | 動的サイト（WordPress等） | SSG |
|---|---|---|
| リクエスト時 | DB問い合わせ → HTML生成 | 生成済みHTMLを返すだけ |
| サーバー負荷 | 高い | ほぼゼロ |
| セキュリティ | 攻撃対象多い | 攻撃面が少ない |
| スケーリング | 難しい | CDNに置くだけ |
次へ: SSGフレームワーク紹介