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

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

時間: 1分

デモ

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

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

結果

爆速。

なぜ速い？

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

疑問

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

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

次へ: SSGとは

read more
チュートリアル

Hugoを始めよう

Hugoとは

Hugoは、Go言語で作られた高速な静的サイトジェネレーターです。

インストール方法

macOS (Homebrew)

brew install hugo

Windows (Chocolatey)

choco install hugo-extended

最初のサイトを作成

hugo new site mysite
cd mysite

次のチュートリアルでは、テーマの設定方法を学びます。

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