Hugoと Cloudflare Pages を組み合わせたブログ運用について
このブログの元となっている「Hugoと Cloudflare Pages」についてまとめます。
Hugo（ヒューゴ）と Cloudflare Pages を組み合わせたブログ運用は、「早い・安い・高セキュリティ」 みたいな感じです。
1. 全体の仕組み
Step 1: 記事の執筆（ローカル環境）
パソコン上で、Markdown（マークダウン）という記法を使って記事を書きます。 Hugoのコマンドを使えば、自分のPC内で瞬時にブログのプレビューを確認できます。
Step 2: 保存と送信（Git Push）
記事を書き終えたら、そのファイルを「Git（ギット）」というバージョン管理ツールを使って、GitHubというインターネット上の「倉庫（リポジトリ）」へアップロード（Push）します。
人間の作業はここまでです。
Step 3: 自動検知とビルド（Cloudflare Pages）
GitHubに新しいファイルが届いたことを、Cloudflare Pagesが自動的に検知します。すると、Cloudflareのサーバー内でHugoが起動し、Markdownファイルを読み込んで、Webブラウザが表示できる「HTMLファイル」へと変換（ビルド）します。
Step 4: ブログの公開（デプロイ）
変換されたHTMLファイルは、Cloudflareにより、公開されます。
2. WordPressとの違い
| 特徴 | WordPress（動的サイト） | Hugo + CF Pages（静的サイト） |
|---|---|---|
| 仕組み | 注文を受けてから都度作成して表示する | あらかじめ作って並べておく |
| 速度 | データベースから素材を探して表示するため、少し時間がかかる。 | 既にある完成品（HTML）を渡すだけなので、早い。 |
| セキュリティ | データベースに侵入されるリスクがある。 | HTMLファイルだけなので、ハッキングの余地がほぼない。 |
| コスト | サーバー代や管理費がかかることが多い。 | 個人のブログ程度なら、ほぼ無料で運用可能。 |
3. メリット
-
圧倒的な表示速度: Hugoが生成する静的HTMLは非常に軽く、一瞬で表示されます。
-
運用コストがほぼ0円: Cloudflare Pagesは無料プランの枠が非常に大きく、独自ドメイン代（年間千円〜数千円）以外は無料で運用できるケースがほとんどです。
-
サーバー管理が不要: ソフトウェアのアップデートやセキュリティパッチ当てなどの面倒な作業がありません。
-
バージョン管理: 記事の履歴がGitに残るため、「間違って消した記事を元に戻す」といったことが簡単にできます。
わたしは現在、Obsidianというmd(マークダウン)形式のエディターを利用して、ブログを書いています。Obsidianはプラグインが豊富で、Gitも導入できることから、この構成での相性が良いと考えました。
現在のメインPCについて
現在、わたしがメインで使っているPCについての紹介をしてみます。
Let’s note CF-SX3(Panasonic) OS:Ubuntu CPU:Corei7 メモリ:16GB
2013年のパソコンなんですねー
ちょっと前までは、HPのOMEN16というゲーミングノートPCを使っていたのですが、急に起動しなくなってしましました。
新しいPCを買うまでのつなぎとして、家の奥底に眠っていたものをつかってみた感じですね。
OSは当初Windows8、サポート終了しているので、無料で利用できるOSを使って見ようと、UbuntuというOSをインストールしてみました。
またメモリを4G→16G、HDD→SSDへ換装、バッテリーの交換をしております。 Youtubeの動画を参考にしながらやったらうまくできました。
こういうことして、愛着が湧いてきちゃったんですよね。