Cloudflare Pagesで公開する

確認日: 2026-10-14

Cloudflare Pagesには2つの始め方があります。途中で混ぜず、最初にどちらかを選びます。

• A. Git連携: GitHubまたはGitLabの更新を自動公開する
• B. Direct Upload: 完成フォルダまたはZIPを直接公開する

Direct Uploadで作った既存プロジェクトには、後からGit連携を追加できません。継続更新する予定ならAを選びます。

画面例はCloudflare公式ドキュメントの実画面です。現在の画面では名称や配置が少し異なる場合があります。

共通の事前確認

• Cloudflareへログインできる
• 公開する内容に秘密情報や個人情報がない
• 公開元の最上位にindex.htmlがある
• 画像ファイルとHTML内のパスが一致している

A. GitHubと連携して公開する

A-1. GitHub側を準備する

1. GitHubリポジトリを作る。
2. index.htmlと画像を追加する。
3. ファイル一覧でindex.htmlが開けることを確認する。

リポジトリ作成とアップロードはGitHub Pages手順書の1、2と同じです。GitHub Pages自体を有効にする必要はありません。

A-2. CloudflareからGitHubを接続する

1. Cloudflare Dashboardを開く。
2. Workers & Pagesを開く。
3. Create applicationを押す。
4. Pagesを選ぶ。
5. Connect to GitまたはImport an existing Git repositoryを選ぶ。
6. GitHubを選び、Install & Authorizeを押す。
7. GitHub側でCloudflareに見せるリポジトリを選ぶ。初心者はOnly select repositoriesで今回のリポジトリだけを許可する。
8. Cloudflareへ戻り、今回のリポジトリを選ぶ。
9. Begin setupを押す。

A-3. 公開設定を入力する

単純なHTMLサイトでは次を基準にします。

画面例1: Project nameを確認し、Production branchへmainを指定します。

画面例2: 単純なHTMLではフレームワークを指定せず、公開元のフォルダを入力します。

1. 内容を確認してSave and Deployを押す。
2. 処理が終わり、Successが表示されるまで待つ。
3. 発行されたhttps://プロジェクト名.pages.devを開く。

画面例3: デプロイ詳細で処理が完了していることを確認します。

画面項目は更新されることがあります。出力先を求められたら、index.htmlが存在するフォルダを指定します。

A-4. 更新する

1. GitHubでindex.htmlを修正または入れ替える。
2. mainへ変更を保存する。
3. CloudflareのDeploymentsで新しい処理が始まったことを確認する。
4. Success後、同じpages.dev URLを再読み込みする。

画面例4: プロジェクト画面から公開サイトとデプロイ履歴を確認できます。

B. Direct Uploadで公開する

B-1. フォルダを確認する

アップロードするフォルダを開いたとき、最初の階層にindex.htmlが見える状態にします。

my-first-site/
  index.html
  assets/
    photo.jpg

フォルダ全体またはZIPを用意します。ZIPの中に不要な親フォルダが重なり、index.htmlが深い場所へ入らないようにします。

B-2. 最初の公開

1. Cloudflare DashboardでWorkers & Pagesを開く。
2. Create applicationを押す。
3. Get startedからDrag and drop your filesを選ぶ。
4. Project nameへ例としてmy-first-siteと入力する。
5. 完成フォルダまたはZIPをアップロード欄へ入れる。
6. ファイル一覧にindex.htmlがあることを確認する。
7. Deploy siteを押す。
8. 続けて確認が出たらSave and Deployを押す。
9. 発行されたpages.dev URLを開く。

B-3. 更新する

1. 更新前のフォルダを複製して残す。
2. 新しいフォルダ内のファイルを修正する。
3. Cloudflareで対象プロジェクトを開く。
4. Create a new deploymentを押す。
5. 更新したフォルダまたはZIPを追加する。
6. Save and Deploy後、同じ公開URLを確認する。

公開後の検収

1. pages.dev URLをコピーする。
2. シークレット画面または別端末で開く。
3. 文字、画像、リンク、ボタンを確認する。
4. 公開・更新記録へ使用した方式とURLを書く。

公開を止める

対象プロジェクトのSettingsからプロジェクト削除を選べます。独自ドメインを使っている場合は、先にドメイン設定を外す必要があります。削除は元へ戻しにくいため、講座中は講師と確認してから行います。

止まったとき

公式情報

• Git integration
• GitHub integration
• Direct Upload
• Static HTML