DEPLOYMENT MANUAL

Cloudflare Pages
公開マニュアル

所要時間:約5〜10分
対象:はじめてCloudflare Pagesを使う方
このマニュアルのポイント Cloudflareへのログインは「Google」で行います。
GitHubではログインしないようにしましょう(エラーになることがあります)。
ログインさえできれば、あとは画面の指示に沿って進めるだけです。
STEP 全体の流れ
STEP 1 Cloudflare にアクセス STEP 2 Googleで ログイン STEP 3 +追加 → ページ STEP 4 GitHub連携 ・リポジトリ選択 STEP 5 ビルド設定 ・デプロイ 完了 公開URL が発行される ブラウザで 開くだけ Googleを 選んでね! ダッシュボード から操作 リポジトリ = 作業フォルダ 空欄でOK な項目あり *.pages.dev で公開!
1
Cloudflare のサイトを開く ブラウザのアドレスバーにURLを入力

ブラウザ(ChromeやSafari)を開いて、アドレスバーに以下のURLを入力し、Enterキーを押します。

dash.cloudflare.com
dash.cloudflare.com Cloudflare ログイン画面が開きます
2
「グーグル」ボタンでログイン GitHubではなくGoogleを選ぶのがポイント

ログイン画面が表示されたら、「グーグル」ボタンを押します。
「GitHub」ボタンはエラーになる場合があるので選ばないようにしましょう。

Cloudflareにログインする G グーグル りんご GitHub または メールアドレス パスワード ここを クリック! × GitHubは 選ばない
注意:GitHubでログインしないで! GitHubボタンを押すと「アカウント情報が一致しません」というエラーになる場合があります。必ず「グーグル」を選んでください。
3
ダッシュボードで「+ 追加」を押す ログイン後のトップ画面から操作

ログインするとダッシュボード(管理画面)が開きます。右上付近にある青い「+ 追加」ボタンを押してください。

CF Hiropiro549@gmail.com... AIに質問する + 追加 アカウントホーム 最近 ドメイン 建てる 従業員とページ Hiropiro549@gmail.comのアカウント ここを クリック!
4
メニューから「ページ」を選ぶ ドロップダウンメニューが出てきます

「+ 追加」を押すとメニューが出てきます。一覧の中から「ページ」を選んでクリックしてください。
「ウェブサイトやフルスタックアプリを即座にデプロイ(公開する)」と書かれています。

CF + 追加 ドメインを接続する ウェブトラフィックの速度とセキュリティを最適化 ドメインの移管 更新料を節約 労働者 サーバーレス関数、サイト、アプリを構築する ページ ウェブサイトやフルスタックアプリを即座にデプロイ R2ストレージバケット ファイルやオブジェクトを保存できます 「ページ」を クリック!
5
「既存のGitリポジトリをインポートする」を選ぶ 2択が出てきます。上の方を選んでください

「さあ始めましょう」という画面が出てきます。
2つの選択肢のうち、上の「既存のGitリポジトリをインポートする」の「さあ始めましょう」ボタンを押します。

さあ始めましょう Pagesを始めましょう。どのように始めますか? ⎯ 既存のGitリポジトリをインポートする まず、既存のGitリポジトリをインポートすることから始めます さあ始めましょう ▲ ファイルをドラッグアンドドロップしてください HTML、CSS、JSファイルなどをアップロード さあ始めましょう 上の「さあ始めましょう」ボタンをクリック!
6
GitHubアカウントとリポジトリを選ぶ リポジトリ = 作業ファイルが入っているフォルダのこと

GitHubアカウント「自分のアカウント名」が選ばれていることを確認し、
一覧から「my-first-page」を選んでクリックします(青枠がつきます)。
選んだら右下の「セットアップを開始します」ボタンを押します。

GitHubアカウント 自分のアカウント名 ⌄ リポジトリを選択してください リポジトリを検索... my-first-page テストクラウドフレアデプロイ ハンドメイド会員サイト アツコ・LP・ジャーニー よしこ-イベント-デモ 夢のカレンダー セットアップを開始します ① my-first-pageをクリック ② ボタンを押す
7
ビルド設定を確認して「保存してデプロイする」 設定はほぼそのままでOK。確認だけして進む

ビルド設定の画面が出てきます。以下の表の通りになっているか確認して、「保存してデプロイする」ボタンを押します。

設定の確認ポイント
フレームワークプリセット
「なし」のままでOK
ビルドコマンド
空欄のままでOK(何も入力しない)
ビルド出力ディレクトリ
「/」が入っていればOK
ビルドとデプロイメントを設定する プロジェクト名 ai-workshop あなたのプロジェクトは watashi-no-page.pages.dev にデプロイされます フレームワークプリセット なし ⌄ ビルドコマンド (空欄のまま) ビルド出力ディレクトリ / / 保存してデプロイする ✓ ✓ ✓ ✓ 確認したら押す!
プロジェクト名について プロジェクト名を変えると公開URLも変わります。「watashi-no-page」など好きな名前にしてもOKです。名前を変えた場合は「.pages.dev」の前の部分が変わります。
8
「成功!」画面が出たら公開完了 表示されたURLにアクセスして確認しましょう

「成功!プロジェクトはリージョン:地球にデプロイされました。」という画面が出れば完成です。
表示されているリンクをクリックしてサイトを確認しましょう。

成功! プロジェクトはリージョン:地球にデプロイされました。 公開URL watashi-no-page.pages.dev このURLをクリックして確認!
公開完了!これで誰でもアクセスできます 「watashi-no-page.pages.dev/index.html」のようにファイル名をURLの後ろにつけると、特定のページを開けます。

デプロイ完了!

これからはGitHubにコードをプッシュするだけで
自動的にこのURLに反映されます。

https://watashi-no-page.pages.dev/index.html
よくある質問
GitHubでログインしたらエラーになった
ログイン画面に戻って「グーグル」ボタンを選んでください。CloudflareはGoogleで登録されているため、GitHubログインだとアカウントが一致しないエラーが出ます。
URLに「4j2」など謎の文字がついてしまう
プロジェクト名が他の人に使われているとランダムな文字が追加されます。プロジェクト名を「watashi-no-page-2026」など別の名前に変えると、きれいなURLになります。
料金はかかりますか?
無料です。広告も表示されません。月500回のビルドまで無料なので、チームで更新しても余裕で使えます。
更新したファイルを反映するには?
Claude Codeでファイルを編集 → GitHubにプッシュ(push)するだけで、自動的にCloudflareに反映されます。毎回Cloudflareを開く必要はありません。
教材「GitHubとCloudflareで公開する」に戻る

このページは、ブラウザの画面だけで公開する手順です。
Codexに頼んで公開する道は、教材ページのほうに書いてあります。