AI Cowork Lab
【実験ログ】Cloudflare Pagesで独自ドメインサイトを無料で公開するまで
実験ログ 約3分で読めます

【実験ログ】Cloudflare Pagesで独自ドメインサイトを無料で公開するまで

やりたかったこと

Astroで作った静的サイトを、独自ドメインで無料で公開する。

使ったもの

サービス用途料金
GitHubコード管理無料
Cloudflare Pagesホスティング無料
エックスサーバードメイン取得1円〜/年

合計: ほぼ0円

手順

Step 1: GitHubにpush

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/xxx/repo.git
git push -u origin main

Step 2: Cloudflare Pagesに接続

  1. Cloudflare Dashboard → Workers & Pages → Create
  2. 「Looking to deploy Pages? Get started」 を探す（Workersの画面に行きがち）
  3. Import Git repository → リポジトリ選択
  4. Framework preset: Astro, Build output: dist

Step 3: ドメイン設定

  1. Cloudflareにドメインを追加（ネームサーバー変更が必要）
  2. エックスサーバーでネームサーバーを変更
  3. Pages の Custom domains でドメインを追加

ハマったポイント

1. Workers と Pages を間違える

Cloudflareの「Create」を押すとWorkersの画面になる。Pagesは別。**「Looking to deploy Pages? Get started」**のリンクを探す。

2. ネームサーバーの反映待ち

エックスサーバーでネームサーバーを変更してからCloudflareが認識するまで数分〜数時間かかる。焦らず待つ。

3. Custom domainのDNSレコード

Pages側からCustom domainを設定するのが正解。手動でCNAMEを追加するとエラーになることがある。

4. GitHubリポジトリの権限

Cloudflareとの連携で「Only select repositories」を選んだ場合、新しいリポジトリを追加するたびにgithub.com/settings/installationsで許可を追加する必要がある。

⚠️

最もよくある失敗

WorkersとPagesを間違える。UIがわかりにくいので、必ず「Pages」と書いてある画面から操作すること。

2サイト目以降は5分

初回は手順を覚えるのに時間がかかるが、2サイト目以降は：

  1. GitHubにリポジトリ作成 → push（2分）
  2. Cloudflare Pages で接続 → Deploy（2分）
  3. Custom domain 設定（1分、ネームサーバーは変更済み）

実質5分でサイトが公開される。

他のカテゴリの記事