そもそも何をするの?
あなたの手元にある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が勝手に検知して自動で更新してくれます。