サマリ
WebページをCloudflare Pagesで公開してみました。
（GitHubと連携し、Pushに合わせて自動反映の動作確認まで）
背景
先日、NetlifyでWebページ公開をしてみたのですが、
ウキウキで触っていたら1週間ちょっとで上限に行ってしまい、閲覧できない状態に…（涙
他に上限がない（または上限枠が広い）サービスがないかと探していたら、
Cloudflare Pagesなるものがあるということで、
やってみることにしました。
ゴール
- Cloudflare PagesでWebページ（静的サイト）を公開する
- GitHubのPushで修正点が自動で公開ページに反映させることを確認する
対象読者
- Cloudflare Pagesが気になっている方
- 無料でWebページ（静的サイト）を公開したい方
前提
必須：インターネット環境
推奨：GitHubアカウント・GitHubリポジトリ・公開用Webページ
環境
- OS：Window11 Home 24H2
そもそも（Cloudflare Pagesとは）
Cloudflare Pages は、GitHub にプッシュするだけで静的サイトをグローバルCDN上に自動デプロイできるホスティングサービスです。
要はGitHubプッシュするだけで自動で静的サイトを公開できるサービスということですね（ざっくり
用途に応じてプランが用意されていますが、自分の場合は今のところ月あたり500を超えてビルドすることはないので
無料プランでいけそうだなと思って課金していません。
（財布に優しい～
（公式ページより抜粋）
実行手順
それではやっていきます
（前提）GitHubでリポジトリ作成
今回は割愛します。必要に応じて以下の記事を参照ください。
（よき記事をありがとうございます…！）
アカウント作成
公式ページにアクセス
利用開始をクリック
「Continue with GitHub」をクリック
「Authorize cloudflare」をクリック
そんなこんなで開始画面に来ました。
今回静的なWebページを公開するだけなので、下のGet startedをクリック
（画面中央のContinue with GitHubを進めると、画面左のCreate a Worker（サーバレス実行環境の機能）前提での設定が進んでいくので注意が必要です。進めた場合の詳細は 後半の余談で記載しました）
すると以下の画面に遷移します。
Import an existing Git repositoryのGet startedをクリック
対象のリポジトリを選択します。
（自分の場合、先に別リポジトリを連携済みなのでこのような表示になっていますが、初めての場合少し表示が異なる可能性があります）
対象となるリポジトリを選択の上Begin setupをクリック
次の画面では特に触らずSave and Deployをクリック
少し待つと・・地球リージョンにデプロイされました🌎
Continue to Projectをクリックすると以下の画面に移ります。
Productionの中にあるDomains:のdevで終わるURLをクリックすると・・
開けました～！（今回試したサイトのデザインは生成AIにサクッと作ってもらったので見栄えについて触れないでください（おい））
Gitで適当にPushします。
無事変更が自動で反映されました。（Cloudflare pagesテストサイトの下の「デプロイ成功！」が「GitHubのPushで自動反映されます」に変わっています）
URLもNetlifyと違って直感的（というかリポジトリ名に紐づく）なのでわかりやすくていいですね。
余談（create a workerのまま進めるとどうなるか）
create a workerのまま、Continue with GitHubをクリックして進めると以下の画面になります。
Git repository URLのところに該当のURLを貼り付けてNext →をクリックすると…
このように、エラーが出て止まってしまいます。
wrangler コマンド（Cloudflareのサーバーレス環境を操作するためのコマンド）を実行するとき、プロジェクト直下に設定ファイルがある前提で動くようなのですが、それらの設定ファイルがないよというエラーが出ます。
結果
無事静的なWebページ公開ができ、GitHubのpushに合わせて自動で反映されていることも確認できました。
まとめ
便利な時代ですね・・
当面はこちらを利用してみて、また何か気づくことがあれば記事にしたいと思います。