最近、Cloudflare Pages を使って驚くほど簡単に静的サイトを公開できたので、備忘録がてら手順をまとめます。

なぜCloudflare Pagesを使いたかったのか

最近は、生成AIでHTMLのWebページや資料を簡単に作成できるようになってきました。

→ せっかくなら、それらを無料でサクッと共有・公開できるようにしたい！

今回は「HAGAKURE PROGRAMMING塾」で開催するカフェイベントの特設サイトを、Cloudflare Pagesで公開してみることにしました。

↓公開したサイトはこちら（いずれ公開終了します）

「HAGAKUREカフェ」イベントサイト

デプロイの手順

1. Githubにデプロイしたいページを用意する

まずはローカルで作ったHTMLページ一式を、GitHubのリポジトリにアップロードしておきます。

2. Cloudflare Pagesにアクセス

https://pages.cloudflare.com/ にアクセスし、無料アカウントを作成します。

3. Pagesを作成

左側メニューから コンピューティング を選び、「作成」ボタンを押します。
表示された画面で「Workers」ではなく「Pages」のタブを選択します。

cloudflare_pages
Pagesタブを選択

4. GitHubと連携する

「既存の Git リポジトリをインポートする」を選択します。
GitHubアカウントと連携し、先ほどアップした対象のリポジトリを選択します。

import
リポジトリをインポートする
git2
対象のリポジトリを選択

5. 設定内容を確認

  • プロジェクト名とデプロイ対象ブランチを選びます
  • 静的サイト（HTML, CSS, JS）の場合、ビルドコマンドと出力ディレクトリは空欄でOK
    index.html がルートにあるならそのままでOK
    サブフォルダにある場合は、そのフォルダ名を出力ディレクトリとして指定します
deploy
index.htmlを自動的に探してくれる!

6. デプロイ完了！

「保存してデプロイする」をクリックすれば完了！

その後、GitHub側でファイルを更新すれば自動で再デプロイされます。便利！

感想

圧倒的に簡単で早い！！ 「とにかく早くWebで公開したい！」という時には、Cloudflare Pagesは最高の選択肢だと感じました。 Githubとリアルタイムで連携してくれるので、変更修正も容易です。

2025年7月現在の情報ですが、

  • 月500回までのデプロイが無料
  • 複数ページも管理できる
  • 設定不要でGitHubと連携してくれる

利用しない手はないなと思います。

ぜひ使ってみてください。