CloudflareでWebサイトに独自ドメインを設定する

Cloudflareでは、ドメイン取得・DNS管理・Pagesへの紐付けをすべて一元管理できる。このハンズオンでは、実例として vibecodingnotes.com を使いながら、ドメイン取得から公開URLへの設定までを進める。

事前にCloudflare Pagesハンズオンを完了しており、Cloudflare Pagesでサイトが公開済みであることを前提とする。

1. ドメインを取得する

1-1. ドメインを検索する

Cloudflareダッシュボード → 左メニュー Domain Registration → Register Domains

検索窓にドメイン名を入力する。

例：vibecodingnotes.com

検索結果に Available と表示されれば取得可能。

1-2. 購入する

Add to Cart → 支払い情報（住所・カード）を入力して購入完了。

価格はほぼ原価。更新時も同様
WHOISプライバシーは無料
自動更新（Auto Renewal）がデフォルトで有効

1-3. 登録状態を確認する

購入完了後、CloudflareにDNSゾーンが自動作成される。ネームサーバーはCloudflare固定で、追加設定は不要。

2. プロジェクトに独自ドメインを設定する

Pages・Workers いずれも手順は同じ。

2-1. Custom domainsを開く

Compute → Workers & Pages → 対象プロジェクト（例：vibecoding） → Custom domains → Set up a custom domain

2-2. ドメインを入力して設定する

取得したドメインを入力する。

例：vibecodingnotes.com

Continue を進めると、Cloudflare管理のドメインであればDNSレコードが自動設定される。

数分待つと以下のように表示される：

vibecodingnotes.com
Active
SSL enabled

手動でのDNS設定やSSL証明書の取得は不要。

3. 動作確認

ブラウザで https://vibecodingnotes.com にアクセスする。

ページが表示されること
アドレスバーに 🔒（HTTPS）が表示されること

4. 補足知識

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）

Cloudflare Pages はデフォルトで Pretty URLs が有効になっており、.html なしのURLに自動リダイレクトする。たとえば /page.html にアクセスすると /page にリダイレクトされる。ダッシュボードにオン/オフの設定はなく、常に有効な動作。

HTMLファイル内のリンクは .html のままにしておくと、ローカルでファイルを直接開いたときもリンクが動作するので、そのままにしておくのが無難。

デプロイのたびにドメインの設定は不要

GitHub ActionsでPagesにデプロイするたびに自動で反映される。ドメインの設定は一度だけでよい。

5. 備忘録

Cloudflare管理のドメインであれば、Custom domains設定時にDNSレコードが自動作成される
SSL証明書も自動発行。数分で Active / SSL enabled になる
www ありのURLを使いたい場合は別途 Custom domains に追加が必要
ドメイン購入時の自動更新（Auto Renewal）はデフォルトで有効。不要な場合はオフにする

2026-05-06　タツヲ (yto)