CloudflareでWebサイトに独自ドメインを設定する
Cloudflareでは、ドメイン取得・DNS管理・Pagesへの紐付けをすべて一元管理できる。このハンズオンでは、実例として vibecodingnotes.com を使いながら、ドメイン取得から公開URLへの設定までを進める。
Cloudflare Pagesでサイトが公開済みであることを前提とする。
1. ドメインを取得する
Section titled “1. ドメインを取得する”1-1. ドメインを検索する
Section titled “1-1. ドメインを検索する”Cloudflareダッシュボード → 左メニュー Domains → Registrations → Buy domain
Registrations
検索窓にドメイン名を入力する。
例：vibecodingnotes.com
Suggested domain names
検索結果に表示されれば取得可能。
1-2. 購入する
Section titled “1-2. 購入する”検索結果の取得したいドメインの右の Confirm → 支払い情報（住所・カード）を入力して購入完了。
Payment option
Registrant information
- 価格はほぼ原価。更新時も同様
- WHOISプライバシーは無料
- 自動更新（Auto Renewal）がデフォルトで有効
1-3. 登録状態を確認する
Section titled “1-3. 登録状態を確認する”購入完了後、CloudflareにDNSゾーンが自動作成される。ネームサーバーはCloudflare固定で、追加設定は不要。
2. プロジェクトに独自ドメインを設定する
Section titled “2. プロジェクトに独自ドメインを設定する”Pages・Workers いずれも手順は同じ。
2-1. Custom domainsを開く
Section titled “2-1. Custom domainsを開く”Compute → Workers & Pages → 対象プロジェクト（例：vibecoding） → Custom domains → Set up a custom domain
2-2. ドメインを入力して設定する
Section titled “2-2. ドメインを入力して設定する”取得したドメインを入力する。
例：vibecodingnotes.com
Continue を進めると、Cloudflare管理のドメインなのでDNSレコードが自動設定される。
Cloudflare will add the following DNS record(s) ...
数分で設定完了。手動でのDNS設定やSSL証明書の取得は不要。
Done!
3. 動作確認
Section titled “3. 動作確認”ブラウザで https://vibecodingnotes.com にアクセスし、以下を確認する。
- ページが表示されること
- アドレスバーのURLが
https://で始まっていること
www あり／なしを統一する
Section titled “www あり／なしを統一する”www.vibecodingnotes.com も使いたい場合は、同じく Custom domains から追加する。
どちらかをメインにしてリダイレクトしたい場合は、Cloudflare の Redirect Rules が使える。Cloudflareダッシュボードのホーム画面でドメイン名（vibecodingnotes.com）をクリック → 左メニュー Rules → Overview → Create rule。
テンプレートが用意されており、目的に合ったものを選ぶだけで設定できる。
| テンプレート名 | 用途 |
|---|---|
| Redirect from WWW to root | www.vibecodingnotes.com → vibecodingnotes.com にリダイレクト |
| Redirect from root to WWW | vibecodingnotes.com → www.vibecodingnotes.com にリダイレクト |
URLから .html が省略される（Pretty URLs）
Section titled “URLから .html が省略される（Pretty URLs）”Cloudflare Pages はデフォルトで Pretty URLs が有効になっており、.html なしのURLに自動リダイレクトする。たとえば /page.html にアクセスすると /page にリダイレクトされる。ダッシュボードにオン/オフの設定はなく、常に有効な動作。
HTMLファイル内のリンクは .html 付きのままにしておく。ローカルでHTMLファイルをブラウザで開いたときもリンクが動作するので。
再デプロイしても設定は維持される
Section titled “再デプロイしても設定は維持される”GitHub ActionsでPagesにデプロイするたびに自動で反映される。ドメインの設定は一度だけでよい。
- Cloudflare管理のドメインであれば、Custom domains設定時にDNSレコードが自動作成される
- SSL証明書も自動発行。数分で
Active / SSL enabledになる wwwありのURLを使いたい場合は別途 Custom domains に追加が必要- ドメイン購入時の自動更新（Auto Renewal）はデフォルトで有効。不要な場合はオフにする
2026-05-06 (last updated: 2026-05-20) 
タツヲ (yto)