超初心者向けガイド

GitHub Cloudflare
爆速デプロイマップ

難しいコマンドは不要。「デプロイ(Web公開)」の仕組みを 図解でわかりやすく解説します。

Code
Build
World

そもそも何をするの?

あなたの手元にあるWebサイトのデータを、 GitHub(倉庫) を経由して Cloudflare(配送センター) に渡すことで、世界中の人が見られるようになります。

STEP 1

準備:アカウント作成

まずは必要なものを用意します。これがないと始まりません!

  • GitHubのアカウント(コードの保管場所)
  • Cloudflareのアカウント(Webサイトの公開場所)
  • 公開したいWebサイトのコード
STEP 2

GitHubにアップロード

自分のパソコンにあるコードを、GitHubの「リポジトリ」という箱に入れます。

  • リポジトリを新規作成(Public/PrivateどちらでもOK)
  • コードをPush(アップロード)する
  • Web上でコードが見えていればOK!
STEP 3

Cloudflare Pagesへ移動

Cloudflareの管理画面(ダッシュボード)にログインし、「Workers & Pages」を開きます。

  • 左メニューから「Workers & Pages」を選択
  • 「アプリケーションの作成」ボタンをクリック
  • 「Pages」タブを選択し、「Gitに接続」をクリック
STEP 4

GitHubと連携&選択

Cloudflareに「どのコードを使うの?」と教えてあげます。

  • CloudflareとGitHubのアカウントを連携認証
  • さきほどアップロードしたリポジトリを選択
  • 「セットアップの開始」をクリック
STEP 5

ビルド設定&デプロイ

ここが一番の難関ですが、主要なツールなら自動で設定されます。

  • フレームワーク プリセットを選択(React, Vue, Next.jsなど)
  • ※HTML/CSSだけなら「なし」でOK
  • 「保存してデプロイ」ボタンをポチッ!
STEP 6

完了!世界へ公開

数秒〜数分待つと、あなた専用のURLが発行されます。

  • 「成功しました!」と出れば完了
  • xxx.pages.dev というURLにアクセスしてみよう
  • これ以降はGitHubを更新するだけで、自動で反映されます!

おめでとうございます!🎉

これであなたのサイトは世界中に公開されました。
次回からは、パソコンでコードを修正してGitHubにPushするだけで、
Cloudflareが勝手に検知して自動で更新してくれます。