Hugoと Cloudflare Pages を組み合わせたブログ運用について

Mon, 05 Jan 2026 00:00:00 +0000

このブログの元となっている「Hugoと Cloudflare Pages」についてまとめます。

Hugo（ヒューゴ）と Cloudflare Pages を組み合わせたブログ運用は、「早い・安い・高セキュリティ」 みたいな感じです。

パソコン上で、Markdown（マークダウン）という記法を使って記事を書きます。 Hugoのコマンドを使えば、自分のPC内で瞬時にブログのプレビューを確認できます。

記事を書き終えたら、そのファイルを「Git（ギット）」というバージョン管理ツールを使って、GitHubというインターネット上の「倉庫（リポジトリ）」へアップロード（Push）します。

人間の作業はここまでです。

GitHubに新しいファイルが届いたことを、Cloudflare Pagesが自動的に検知します。すると、Cloudflareのサーバー内でHugoが起動し、Markdownファイルを読み込んで、Webブラウザが表示できる「HTMLファイル」へと変換（ビルド）します。

変換されたHTMLファイルは、Cloudflareにより、公開されます。

特徴	WordPress（動的サイト）	Hugo + CF Pages（静的サイト）
仕組み	注文を受けてから都度作成して表示する	あらかじめ作って並べておく
速度	データベースから素材を探して表示するため、少し時間がかかる。	既にある完成品（HTML）を渡すだけなので、早い。
セキュリティ	データベースに侵入されるリスクがある。	HTMLファイルだけなので、ハッキングの余地がほぼない。
コスト	サーバー代や管理費がかかることが多い。	個人のブログ程度なら、ほぼ無料で運用可能。

圧倒的な表示速度: Hugoが生成する静的HTMLは非常に軽く、一瞬で表示されます。
運用コストがほぼ0円: Cloudflare Pagesは無料プランの枠が非常に大きく、独自ドメイン代（年間千円〜数千円）以外は無料で運用できるケースがほとんどです。
サーバー管理が不要: ソフトウェアのアップデートやセキュリティパッチ当てなどの面倒な作業がありません。
バージョン管理: 記事の履歴がGitに残るため、「間違って消した記事を元に戻す」といったことが簡単にできます。

わたしは現在、Obsidianというmd(マークダウン)形式のエディターを利用して、ブログを書いています。Obsidianはプラグインが豊富で、Gitも導入できることから、この構成での相性が良いと考えました。

手順書 on Keyuki Blog