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

4. Hugoで実際に作る

時間: 2分

最小構成（コマンド4つ）

# 1. サイト作成
hugo new site mysite
cd mysite

# 2. テーマ追加
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml

# 3. 記事作成
hugo new posts/hello.md

# 4. ビルド
hugo --gc --minify

生成物

public/
├── index.html
├── posts/
│   └── hello/
│       └── index.html
├── css/
└── js/

ポイント

  • Markdown で書くだけ
  • テーマで見た目は自由に変えられる
  • public/ フォルダをどこかに置けば公開完了

これをどこに置く？

→ 次のセクションで比較！

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

5. デプロイ先比較【メインパート】

時間: 3分 ⭐ メインパート

測定条件

  • 測定元: 東京（オフィス）
  • ツール: curl（TTFB）、Chrome DevTools（LCP）
  • 回数: 5回平均
  • コンテンツ: 同一のHugoサイト（約10ページ）

比較表

項目GitHub PagesCloudflare PagesS3 + CloudFrontS3のみ
CDNFastlyCloudflareCloudFrontなし
料金無料無料従量課金従量課金
HTTPS✅✅✅❌
セットアップ簡単簡単やや面倒簡単
カスタムドメイン✅✅✅✅

※ GitHub PagesはバックエンドにFastly CDNを使用

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

6. まとめ・結論

時間: 1分

用途別おすすめ

ユースケースおすすめ
個人ブログCloudflare Pages / GitHub Pages
ドキュメントサイトCloudflare Pages
既存AWS環境ありS3 + CloudFront
細かい制御が必要S3 + CloudFront
とにかく簡単にGitHub Pages

結論

「静的でいいならSSG + CDN、安くて速い」

3つのポイント

  1. 動的機能が不要なら、SSGで十分
  2. CDNは無料で使える時代（Cloudflare、GitHub）
  3. 「WordPressじゃなきゃダメ」は思い込みかも

参考リンク

Q&A

ご質問があればどうぞ！

read more