Cloudflare Pagesと静的サイトジェネレータ

Cloudflare Pagesと静的サイトジェネレータの組み合わせのすごさを誰かに話したい。

はじめに

きっかけは、使ってないドメインを活用したいと思ったことだった。 それが、Cloudflareと静的サイトジェネレータの組み合わせに感動を覚え、この感動を誰かに伝えたくなってこのサイトを作ることにした。

moelive.comとは

私がこのドメインをちゃんと使っていたころ、blogやwiki、どどんとふというTRPGツールを小さなコミュニティで運営していた。 WordPressのようなCMSを導入したり、PHPで動作するCGIサイトだったわけだが、コンテンツを書いたり、遊んだりする分にはそれぞれとても良いシステムだった。 しかし、脆弱性に対応したりPHPなどのプラットフォームを更新したり、まーメンドクサイことこの上ない。 趣味で運営していたものだから、仕事と違ってあまり労力もかけたくない。 そんなわけで、当時のサイトは閉鎖し、ドメインはほったらかしになっていた。

当時のコミュニティから離れたのも大きな要因だけど。

契機

それからどのくらい経ったころだろうか。きっかけは、久しぶりにドメイン名の維持管理費の請求額を確認した時だった。 当時は年間1000円切っていたはずだが、2000円を超えていた。

調べたところ、Cloudflareはドメインの管理をほぼ原価でやってくれるそうで、このレジストラに管理移管しようと考えた。 私の認識では、CloudflareはCDNのサービスをやってる会社だと思っていたのだが、思ったより手広い。 Geminiと一緒にこのドメインを活用することを考えた。

Cloudflare Pages

CloudflareがやっているWebサイトを運営するサービスだ。 しかも、持ってるドメインがあればそれに紐づけるよう設定もできる。

昔は動的サイトであれ、静的サイトであれ、Web用レンタルサーバを生業としている会社にサーバを借りて設置していたもので、 無料であれば、自動で広告がWebサイトに埋め込まれるものだった。

Cloudflare Pagesは更新回数などに制限はあれど基本的に無料でWebサイトが持てる。（ドメイン管理費用は別） このサイトを見ればわかるように広告もつかない。 なんて良心的なんだろう。

しかも、GitHubに対応するリポジトリを作れば、そこからコードを読み取って公開してくれる。 いちいちFTPなどという前時代的なプロトコルを使ってWebサーバにアップロードしなくていいのだ。

Gitを使える必要はあるが、仕事でGitを普段使いしている私にとっては何てことのない。 むしろWebサイトのデータのバックアップを取る必要もなくなって非常に助かる。

静的サイトジェネレータ

このサイトではVitePressを採用しているが、おおまかな仕組みは他のフレームワークも一緒だろう。 マークダウンファイルを書いてビルドすると、HTMLやCSS、JavaScriptといった静的サイトに必要なファイルをビルドする仕組みだ。 あとはそのビルドされたファイルをWebサーバに配置して、公開すると静的サイトが構築できる。

CMSはブラウザのHTTPリクエストを受けてから、Webサーバ上でHTMLやCSS、JavaScriptを生成し、ユーザに応答するという仕組みだが、 ようは、公開前に事前に必要なファイルを作っておくか、Webサーバ上で常々作るかの違いがある。

システムのメンテがいらない。

CMSはその特性から、Webサーバ上で常々プログラムが動作するため、それなりの計算資源が必要なのと、 プログラムの不具合や脆弱性には常々対応していかなければならない。 しかし、静的サイトジェネレータはあらかじめ公開するファイルを作っちゃう仕組みのため、プログラムの不具合や脆弱性とは無縁の世界が広がっている。

CMSとの使い勝手の差

こうして記事を書くのもマークダウン形式で書けばよい。 VS CodeにはMarkdown editorやpreviewを表示する仕組みが内蔵されているし、使い勝手はその辺のメモアプリや既存のCMSとさほど変わらない。 画像を載せるのが少しメンドクサイか？ぐらい。

アクセスが速い

Webサーバ上で表示するコンテンツを生成する処理が発生しないため、応答速度がとても速い。 らしい。比べたことはないが・・・。

Cloudflare Pagesと静的サイトジェネレータのコラボレーション

VitePress

💕

GitHub

💕

Cloudflare Pages

GitHubが間に入ることで、VitePressとCloudflare Pagesがつながる

Cloudflare Pagesはいくつかの静的サイトジェネレータのリポジトリをサポートしている。 VitePressもそうなのだが、Cloudflareは設定したGitHub上のリポジトリを常々監視していて、更新があれば自動で取り込んで、ビルドして公開してくれる。

つまり、コマンドを実行すればすぐに。 GitHubに更新した記事をpushしたらもう世界中でこのWebサイトが見られるようになってるのだ。

まとめ

Cloudflare Pagesと静的サイトジェネレータを組み合わせると、Markdownで書いた記事をGitHubにpushするだけで、ビルドから公開まで自動化できる。サーバー上でCMSを動かし続ける必要がないため、更新や脆弱性対応の手間も抑えられる。

かつては管理の負担から手放したドメインを、今は趣味のブログとして無理なく使えるようになった。大きな手間をかけずにサイトを運営したい人にとって、この仕組みは有力な選択肢だ。