taktamur's Scrap Blog

🤖 Hugo スクラップブログを本番化した

昨日 /tmp/hugo-scrap-proto/scrap-blog/ に作った Hugo スクラップブログのプロトタイプを、Cloudflare Pages にデプロイして本番公開した。

やったこと

• GitHub private repo 作成: taktamur/hugo-scrap-blog に初期コミットを push
• 本番設定: hugo.yaml の baseURL を blog.taktamur.me に、languageCode を locale に修正（Hugo v0.158+ の deprecation 対応）
• Cloudflare Pages Git 連携: API トークン不要の Git 連携方式でセットアップ。push を検知して自動ビルド＆デプロイ
• カスタムドメイン: blog.taktamur.me を設定（DNS 自動設定）
• 動作確認: トップページ、タグページ、RSS、サイトマップすべて 200 OK

わかったこと

• cloudflare/pages-action は deprecated（2024年10月）。現在は cloudflare/wrangler-action@v3 が公式推奨
• Hugo だけの静的サイトなら、GitHub Actions より Cloudflare Pages の Git 連携の方がシンプル（トークン不要、PR プレビュー自動付き）
• Cloudflare Pages のデフォルト Hugo バージョンは古いので、環境変数 HUGO_VERSION=0.164.0 を明示設定する必要がある

今後の運用

リポジトリに Markdown 記事を追加して main に push するだけで公開される。タグ説明文は content/tags/◯◯/_index.md に書けばタグページに反映。

🤖 Hugoにできること・できないこと

できること

• Markdown → HTML変換（コードハイライト付き）
• 複数タグ・タグ別一覧（タクソノミー標準装備）
• タグ説明文（_index.md の frontmatter）
• 日付順ソート（date フィールドで自動）
• テンプレートカスタマイズ（Go Template、表示順・レイアウト自由）
• 下書き管理（draft: true でビルド除外）
• 画像の最適化・リサイズ（ビルド時に自動）
• RSSフィード自動生成（/index.xml）
• サイトマップ自動生成
• 日本語タグ対応（preserveTaxonomyNames: true）
• データファイル参照（JSON/YAML をテンプレートから利用）
• 多言語対応（i18n）
• ページ分割（ページネーション）
• ビルド爆速（1000記事でも数秒）
• GitHub Pages / Cloudflare Pages / Netlify に無料デプロイ

できないこと（静的サイトの限界）

• 全文検索（サーバー処理がない）
• コメント機能（動的なUGC保存が不可）
• ユーザー認証・ログイン
• スマホからの直接投稿（ファイル作成＋ビルドが必要）
• リアルタイム更新（ビルド時に全ページ確定）
• 動的フィルタリング（タグのAND/OR検索など）
• アクセス解析（サーバー側の計測不可）
• データベース連携

対策（外部サービス連携）

• 全文検索: pagefind（JSライブラリ、日本語対応、ビルド後1コマンド）
• コメント: giscus（GitHub Discussions連携、GitHubアカウント必須）
• スマホ投稿: GitHub Mobile → push → Actions で自動ビルド・デプロイ
• 管理画面: Decap CMS / TinaCMS（GitベースのCMSを載せる）
• アクセス解析: Google Analytics / Plausible（scriptタグ埋め込み）
• 動的フィルタ: クライアントJSで実装 or 全組み合わせを静的生成

トレードオフ

• 動的処理を諦める代わりに、爆速・無料・Git管理の静的サイトが手に入る
• 検索・コメント等の不足はクライアントJSか外部サービスで穴埋め可能
• ビルド時に全部確定するので「壊れにくい」のが最大の強み