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

動作環境（2026年9月23日に確認）

＜パソコン＞機種：MacBook Air（13インチ、M3、2024） 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にあるサイトの変更を、毎回手作業で公開し直すのは手間です。この記事では、GitHubのリポジトリをCloudflare Workersとつなぎ、Astroで作ったサイトを公開します。接続後は、GitHubへ変更を送るたびにCloudflareがビルドと公開を受け持つ仕組みです。

先に、GitHubのリポジトリを作成し、Cloudflareの2段階認証を設定してください。

Cloudflare Workersとは

Cloudflare Workersは、Cloudflareの上でプログラムを動かしたり、作ったサイトを公開したりできるサービスです。ビルドは、サイトの元になるファイルから、公開用のファイルを書き出す作業を指します。公開したサイトに最初に付くのは、workers.dev で終わるアドレスです。

【メモ】

GitHubへ変更を送る操作（プッシュ）と、リポジトリの仕組みは、プッシュとプルとはとリポジトリとはで解説しています。

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

本記事でつなぐのは、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」をクリックします。

「Workers & Pages」をクリックする

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

「アカウントを確認」の画面

【ポイント】

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

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

「アプリケーションを作成する」をクリックする

GitHubとつなぐ

1:　「Connect GitHub」をクリックします。

「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」をクリックします。

「Continue with GitHub」をクリックする

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

リポジトリの一覧から「itwakuwaku-site」を選ぶ

3:　「次へ」をクリックします。

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

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

「ビルドコマンド」の入力欄

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

7:　「デプロイ」をクリックします。

「デプロイ」をクリックする

公開できたことを確認する

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

ビルドが始まった画面

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

ビルドが成功した画面

【ポイント】

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

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

ログに表示された公開URL

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

【ポイント】

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

Cloudflareでドメインを取得する方法へ進みます。