【Cloudflare】GitHubのリポジトリとつないでサイトを公開する方法

＜パソコン＞
機種：MacBook Air（Apple M3）
OS：macOS 26.6.2
＜ソフトウェア＞
Google Chrome 153.0.8010.53
Cloudflare ダッシュボード（Web版）
GitHub.com（Web版）
＜サイト＞
Astro 5.18.2
ビルド環境：Node.js 24.18.0、npm 10.9.2（Cloudflareのビルドログで確認）

本記事では、GitHubのリポジトリをCloudflare Workersとつなぎ、Astroで作ったサイトを公開するまでを解説します。つないだあとは、GitHubへ変更を送るたびに、Cloudflareが自動でビルドして公開し直します。

Cloudflareのアカウントがまだない場合は、先にCloudflareの新規アカウントを作成する方法を済ませてください。

公開するリポジトリを用意する

本記事では、Astroで作ったサイトのリポジトリ（itwakuwaku-site）をつなぎます。npm run build で書き出したファイルは dist/ に入ります。

リポジトリの一番上の階層に、Cloudflareの設定ファイル wrangler.jsonc を置きました。書き出した dist/ を、そのまま配信する設定です。

{
  "name": "itwakuwaku-site",
  "compatibility_date": "2026-09-23",
  "assets": {
    "directory": "./dist"
  }
}

name はこのあとCloudflareで付けるプロジェクト名と同じにしてください。Cloudflareの公式ドキュメントによると、2つが違うとビルドが失敗します。

Workers & Pagesを開く　【手順解説】

1:　Cloudflareのダッシュボードで、左のメニューの［コンピュート］をクリックします。

2:　［Workers & Pages］をクリックします。

3:　［アカウントを確認］と表示された場合は、登録したメールアドレスに届いたCloudflareのメールを開き、確認を済ませます。

【ポイント】

メールアドレスの確認を済ませていないと、この画面が表示され、先へ進めません。メールが見つからない場合は、［メールを再送］をクリックすると送り直せます。

4:　［アプリケーションを作成する］をクリックします。

GitHubとつなぐ　【手順解説】

1:　［Connect GitHub］をクリックします。

2:　GitHubの［Install & Authorize Cloudflare Workers and Pages］の画面で、［Only select repositories］を選びます。

【ポイント】

初めは［All repositories］が選ばれています。このままだと、これから作るものも含めて、すべてのリポジトリがCloudflareから読み書きできる状態になります。公開に使うリポジトリだけを選んでください。

3:　表示されたリポジトリの選択欄で、公開するリポジトリを選びます。

4:　［Install & Authorize］をクリックします。

5:　GitHubのパスキーやパスワードを求められた場合は、認証します。

リポジトリを選んで設定する　【手順解説】

1:　Cloudflareの画面に戻ったら、［Continue with GitHub］をクリックします。

2:　［Select a repository］の一覧で、公開するリポジトリをクリックします。

3:　［次へ］をクリックします。

4:　［プロジェクト名］が、wrangler.jsonc の name と同じになっていることを確認します。

5:　［ビルド コマンド］に npm run build と入力します。

6:　［デプロイ コマンド］が npx wrangler deploy になっていることを確認します。

7:　［デプロイ］をクリックします。

公開できたことを確認する　【手順解説】

1:　ビルドの画面が表示され、［初期化中］から順に進んでいくことを確認します。

2:　ビルドの番号の左に、緑色のチェックが表示されたことを確認します。

【ポイント】

本記事の環境では、ビルドの開始から完了まで、1分15秒かかりました（ビルド画面の表示）。

3:　ログを下へスクロールし、［Deployed］の行の下に表示された、workers.dev で終わるURLを確認します。

4:　確認したURLをブラウザーで開き、サイトが表示されることを確認します。

【ポイント】

workers.dev の前の部分（サブドメイン）は、アカウントごとに自動で付きます。本記事の環境では、登録したメールアドレスの前半と同じ文字列が使われていました。URLからメールアドレスを知られたくない場合は、［Workers & Pages］の画面右側にある［サブドメイン］の鉛筆のアイコンから変更してください。変更の方法はCloudflareの公式ドキュメントにも書かれています。

次の記事

Cloudflareでドメインを取得する方法を解説します。