Invos

03_custom_domain_configuration

3 min read

Custom Domain Configuration

This document describes how to connect a custom domain to a Cloudflare Pages project.

Prerequisites

  • You have a deployed Cloudflare Pages project.
  • The domain you want to use is registered and active in the same Cloudflare account. If the domain is registered with a third party, you have already added it as a site to Cloudflare.

Connecting a Custom Domain

  1. Navigate to your Pages Project:

    • In the Cloudflare dashboard, go to Workers & Pages.
    • Select the project you want to configure.

  2. Go to the “Custom domains” Tab:

    • Click on the Custom domains tab within your Pages project settings.

  3. Set up a Custom Domain:

    • Click the Set up a domain button.
    • Enter the domain you wish to use (e.g., www.example.com or example.com).

Two Scenarios

There are two common scenarios when adding a custom domain.

Scenario A: The Domain is on the Same Cloudflare Account

This is the recommended and easiest approach.

  • If the domain (e.g., example.com) is already active as a Site in your Cloudflare account, Cloudflare Pages will automatically create the necessary DNS records for you.
  • For a root domain (example.com): Cloudflare will typically create a CNAME record pointing to your Pages project URL (e.g., my-project.pages.dev).
  • For a subdomain (www.example.com): A CNAME record for www will be created, pointing to your Pages project URL.
  • The status of the domain will show as “Active” once the DNS has propagated.

Scenario B: The Domain is on a Different Cloudflare Account or External DNS

  • In this case, Cloudflare cannot automatically add the DNS records. You will need to add them manually at your DNS provider.
  • After you enter the domain name in the Pages settings, Cloudflare will provide you with the required DNS record information.
  • You will need to create a CNAME record for your desired domain/subdomain, pointing to your unique Pages project URL (e.g., [your-project].pages.dev).

Example DNS Record:

TypeNameContent
CNAMEwww (for www.ex.com)my-project.pages.dev
CNAME@ (for example.com)my-project.pages.dev
  • After adding the record at your DNS provider, return to the Cloudflare Pages dashboard and click “Check DNS” to verify.

Redirecting www to Root (or vice versa)

It’s a common practice to redirect traffic from one subdomain to another (e.g., www.example.com to example.com).

  1. Add Both Domains: First, ensure both the www and root domains are added as custom domains to your Pages project.
  2. Use Redirect Rules:
    • Navigate to your Site’s settings in Cloudflare (not the Pages settings).
    • Go to Rules > Redirect Rules.
    • Create a new rule to handle the redirect.

Example: Redirect www to the root domain:

  • Rule name: Redirect www to root
  • When incoming requests match…
    • Field: Hostname
    • Operator: equals
    • Value: www.example.com
  • Then…

    • Type: Dynamic

    • Expression: http.host (this will preserve the path and query string)

    • URL redirect:

      • Status code: 301 (Permanent Redirect)
      • URL: concat("https://example.com", http.request.uri.path) (This is an example, check Cloudflare’s documentation for the latest recommended expression.)

      A simpler static redirect may also work if you don’t need to preserve the path.

By following these steps, you can successfully route traffic from your custom domain to your Cloudflare Pages application, with proper redirects in place.

Graph View

Backlinks