Connect a Custom Domain

Buy the Domain

Before Cloudflare Pages can serve your website from a custom address, you need to own a domain name.

Example

Throughout this chapter, we will use:

Example domain

pagedeploy.dev

Where do you buy a domain?

A domain is normally purchased from adomain registrar.

In this guide, we will use Hostinger as the example registrar.

The registrar is responsible for registering your domain. Later, we will configure Cloudflare to manage the domain’s DNS and Cloudflare Pages to host the website.

Keep these three responsibilities separate

Hostinger — domain registration

Cloudflare — DNS management

Cloudflare Pages — website deployment and hosting

Step 1 — Open Hostinger

Step 2 — Search for your domain

Enter the domain name you want to use and search for its availability.

For this guide, imagine that you search for:

pagedeploy.dev

Step 3 — Choose an available domain

If the domain is available, add it to your shopping cart and continue with the registration process.

Step 4 — Complete registration

Complete the information requested by the registrar and finish the domain purchase.

Make sure that the registrant information and email address are correct.

Step 5 — Verify your domain

If the registrar asks you to verify your email address or domain registration, complete that verification.

Important

Buying the domain does not deploy your website.

At this point, you simply own the domain name.

The website will still be deployed through Cloudflare Pages.

What happens next?

After purchasing the domain, we will add the domain to Cloudflare.

This allows Cloudflare to become the DNS provider for the domain and eventually connect it to the Pages project.

Do not change nameservers yet

We will first add the domain to Cloudflare and review the DNS records.

Only after that will we change the nameservers at Hostinger.

Add the Domain to Cloudflare

After purchasing the domain, the next step is to add it to your Cloudflare account.

At this stage, we are not changing the nameservers yet. First, Cloudflare needs to know about the domain and show us the DNS configuration.

Step 1 — Open Cloudflare

Step 2 — Add your domain

From the Cloudflare dashboard, choose the option to add a domain or website.

Enter the domain you purchased from Hostinger.

pagedeploy.dev

Step 3 — Choose the domain

Cloudflare will create a zone for your domain. Azone is the Cloudflare configuration area where the domain’s DNS records are managed.

What is a DNS zone?

Think of the DNS zone as the control panel containing instructions that tell the internet where different services for your domain are located.

For example, DNS records can tell the internet where your website or email service is hosted.

Step 4 — Choose a Cloudflare plan

Cloudflare will ask you to choose a plan for the domain.

For this guide, choose the plan appropriate for your project. If you are following this guide for a basic personal or documentation website, the available free option may be sufficient.

Step 5 — Cloudflare scans existing DNS records

Cloudflare may scan the domain’s existing DNS records and display the records it finds.

This is an important step.

Do not immediately change the nameservers.

First, review the DNS records carefully in the next section.

Important if you already use email

If your domain is already being used for email, carefully check the existing MX, TXT, SPF, and DKIM records before changing nameservers.

Incorrect DNS records can interrupt services such as email.

What Cloudflare gives you

During the setup, Cloudflare will assign nameservers to your domain.

You will see two nameserver addresses assigned to your Cloudflare zone.

Example only

The actual nameservers assigned to your domain will be different. Always use the exact nameservers shown in your Cloudflare dashboard.

The important idea

Your domain is still registered with Hostinger.

We are preparing Cloudflare to become the DNS provider for that domain.

The actual switch will happen when we replace the Hostinger nameservers with the Cloudflare nameservers.

Remember

Changing nameservers does not transfer ownership of the domain from Hostinger to Cloudflare.

It changes which service is responsible for answering DNS queries for the domain.

Review DNS Records

Before changing the nameservers at Hostinger, take a moment to review the DNS records Cloudflare found for your domain.

This step is important because changing nameservers changes which DNS provider is authoritative for your domain.

What is a DNS record?

A DNS record is an instruction that tells the internet where a particular service for your domain should go.

For example, your website and email may use completely different DNS records.

Record	Common purpose
`A`	Points a domain to an IPv4 address.
`AAAA`	Points a domain to an IPv6 address.
`CNAME`	Points one hostname to another hostname.
`MX`	Defines where email for the domain should be delivered.
`TXT`	Stores text-based information used by services such as verification and email authentication.

If this is a brand-new domain

If you have just purchased the domain and have not configured any website, email, or other services yet, there may be very few DNS records to review.

That makes the setup relatively simple.

If the domain is already being used

If the domain already has a website, email, or other services connected to it, review the existing records carefully before continuing.

Protect existing services

Do not delete DNS records simply because you do not recognize them.

A record you do not recognize may be required by your email provider, a verification service, or another application.

Pay particular attention to email records

If you use email with your domain, check the records related to your mail provider before changing nameservers.

Common records include:

MX — mail delivery
TXT — verification and authentication information
SPF — commonly stored as a TXT record
DKIM — commonly published through DNS records for email authentication
DMARC — commonly published as a TXT record

What should you do with the records?

Compare the records currently configured at your registrar with the records shown by Cloudflare.

Make sure the records required by your existing services are present before you change the nameservers.

A useful mental model

Think of the process as moving the DNS control panel from Hostinger to Cloudflare.

The records themselves still need to describe where your services are supposed to go.

When can you continue?

You can continue when you have confirmed that the important DNS records for your domain are present and correct in Cloudflare.

The next step is to change the nameservers at Hostinger so that Cloudflare becomes the authoritative DNS provider.

Do not guess the nameservers

Cloudflare assigns specific nameservers to your domain.

Use the exact two nameservers displayed in your Cloudflare dashboard. Do not use nameservers copied from another domain or another tutorial.

Change Hostinger Nameservers

Cloudflare has now prepared your domain and assigned two nameservers to it.

The next step is to tell Hostinger: “Use Cloudflare for DNS management.”

Before you begin

Make sure you have copied the two nameservers shown in your Cloudflare dashboard.

Use your assigned nameservers

The nameservers assigned to your domain are specific to your Cloudflare setup.

Do not copy nameservers from another website, another domain, or an old tutorial.

Step 1 — Open Hostinger

Step 2 — Open your domain

Open your domain management area and select the domain you purchased.

In Hostinger’s current interface, this is available through:

Domains
↓
Domain portfolio
↓
Manage
↓
DNS / Nameservers

Step 3 — Find the nameserver settings

Open the section where Hostinger allows you to manage the domain’s nameservers.

Step 4 — Select custom nameservers

Hostinger may currently show its own nameservers.

Change the nameserver configuration so that you can enter the nameservers provided by Cloudflare.

Step 5 — Replace the Hostinger nameservers

Replace the existing nameservers with the two nameservers assigned by Cloudflare.

Hostinger	Cloudflare
Existing nameserver 1	Your Cloudflare nameserver 1
Existing nameserver 2	Your Cloudflare nameserver 2

Do not copy these table values

The nameserver names above are descriptive placeholders.

Enter the exact values Cloudflare assigned to your domain.

Step 6 — Save the changes

Save the new nameserver configuration in Hostinger.

Hostinger will now tell the internet that Cloudflare is responsible for DNS management of your domain.

What actually changed?

This is an important distinction: you did not transfer the domain registration.

Your domain is still registered through Hostinger.

You changed the authoritative DNS provider from Hostinger to Cloudflare.

Think of it this way

Hostinger continues to be the place where you registered and manage ownership of the domain.

Cloudflare now becomes the service that answers DNS questions for the domain.

Cloudflare Pages will later serve your website through that domain.

What happens immediately after saving?

The change does not necessarily become visible everywhere immediately.

Cloudflare will check whether the nameservers have been updated successfully.

The next stage is to wait for Cloudflare to detect and activate the domain.

Don't panic if the domain does not work immediately

DNS changes can take time to propagate.

A temporary period where the domain does not behave as expected does not necessarily mean that the configuration is wrong.

Wait for Cloudflare Activation

After changing the nameservers at Hostinger, Cloudflare needs to detect the change.

Until Cloudflare confirms the nameserver change, the domain may show a Pending status.

Step 1 — Return to Cloudflare

Open your Cloudflare dashboard and select the domain you added earlier.

Step 2 — Check the domain status

Cloudflare will display the current status of the domain.

You are looking for Cloudflare to confirm that the domain is active.

Pending vs Active

Pending means Cloudflare has not yet confirmed that the domain’s nameservers are pointing to Cloudflare.

Active means Cloudflare has successfully detected the Cloudflare nameservers.

How long does activation take?

Nameserver changes can take some time to propagate across the internet.

In many cases the change is detected relatively quickly, but it can take longer depending on DNS propagation.

Nameserver changes can take up to 24 hours to propagate fully, although Cloudflare may detect the change sooner.

Do not repeatedly change the nameservers

If you have entered the correct Cloudflare nameservers, give the change time to propagate.

Repeatedly changing the configuration can make troubleshooting more difficult.

If Cloudflare is still showing Pending

First, return to Hostinger and confirm that the two nameservers exactly match the nameservers Cloudflare assigned to your domain.

Also check whether the domain has an existing DNSSEC configuration. A stale DS record at the registrar can prevent a nameserver change from working correctly.

DNSSEC can block activation

If the domain previously used DNSSEC at the registrar, do not leave an incompatible DS record in place while switching the domain to Cloudflare.

If you are unsure how DNSSEC is configured, check Cloudflare’s current DNSSEC instructions before changing the record.

Check for common mistakes such as:

A nameserver was entered incorrectly.
One of the Cloudflare nameservers was not added.
The old Hostinger nameservers are still present.
The change has not propagated yet.

How do you know the DNS provider changed?

Once the nameserver change has propagated, Cloudflare becomes the authoritative DNS provider for your domain.

From this point forward, DNS records for the domain should be managed in Cloudflare rather than by changing the Hostinger DNS zone.

Important distinction

You still use Hostinger to manage the domain registration.

You now use Cloudflare to manage DNS.

You will use Cloudflare Pages to manage the website deployment.

Activation complete

Once Cloudflare shows the domain as active, the DNS side of the setup is ready.

We can now configure the Cloudflare Pages project so that its main branch represents the production version of the website.

Configure Pages Production

Your domain is now active in Cloudflare. The next step is to make sure Cloudflare Pages knows which Git branch represents your production website.

Production branch

In our workflow, the production branch is:

main

This means that when changes are merged into main, Cloudflare Pages can build and deploy those changes to the production website.

Important terminology

A production branch is the Git branch that Cloudflare Pages uses for production deployments.

In this guide, that branch is main.

Step 1 — Open your Pages project

Select the Pages project you created earlier in this guide.

Step 2 — Open project settings

Open the project’s settings and find the section for build and deployment configuration.

Cloudflare’s dashboard labels can change over time. Look for the production deployment or branch-control settings if the wording differs slightly from the steps shown here.

Step 3 — Find production deployment settings

Open the production deployment configuration.

Cloudflare Pages allows you to choose which Git branch is used for production deployments.

Step 4 — Select main

Set the production branch to:

main

Do not confuse production with preview

A feature branch such as feature/homepage is normally used for development and preview deployments.

The main branch is used for the production deployment in this guide.

The complete branch relationship

feature/homepage
  │
  │ Push
  ▼
Cloudflare Preview
  │
  │ Pull Request
  ▼
main
  │
  │ Merge
  ▼
Cloudflare Production

A common misunderstanding

You may hear the phrase “assign the domain to the production branch”.

For the normal Cloudflare Pages setup, that is not the way to think about the configuration.

First, configure main as the production branch.

Then attach your custom domain to the Pages project.

Think in two separate steps

Step 1: main → production deployment

Step 2: custom domain → Pages project

Why this matters

Once this configuration is complete, the workflow becomes predictable:

Local project
↓
Feature branch
↓
GitHub Pull Request
↓
Merge into main
↓
Cloudflare Pages production deployment
↓
Your custom domain

In the next section, we will connect the actual custom domain to the Pages project.

Add Custom Domain to Pages

Your domain is now active in Cloudflare, and main is configured as the production branch.

We can now connect the custom domain to the Cloudflare Pages project.

Step 1 — Open your Pages project

From the Cloudflare dashboard, open Workers & Pages.

Select the Pages project that contains your website.

Step 2 — Open Custom domains

Inside the Pages project, open the Custom domains section.

Step 3 — Set up a domain

Choose the option to set up or add a custom domain.

Enter the domain you purchased earlier.

pagedeploy.dev

Step 4 — Continue with the domain setup

Cloudflare will check the domain and its DNS configuration.

Because the domain is already an active Cloudflare zone and its nameservers point to Cloudflare, the domain can be connected to the Pages project.

For an apex domain

An apex domain such as pagedeploy.dev must be a Cloudflare zone on the same Cloudflare account as the Pages project.

A subdomain such as www.pagedeploy.dev can follow a different DNS setup.

Apex domain vs subdomain

In this example, pagedeploy.dev is the apex domain.

A hostname such as www.pagedeploy.dev is a subdomain.

The setup can differ depending on whether you are connecting an apex domain or a subdomain.

Step 5 — Confirm the domain

Follow the Pages setup screen and confirm that you want to connect the domain to this project.

What Cloudflare is doing

Cloudflare is connecting:

main branch
 ↓
Production deployment
 ↓
Cloudflare Pages project
 ↓
Cloudflare DNS
 ↓
pagedeploy.dev

Notice what is NOT happening

We are not creating another Git branch.

We are not moving the domain registration away from Hostinger.

We are not creating a separate production deployment.

We are simply connecting the domain to the existing Cloudflare Pages project.

Production URL

Once the custom domain is configured, the production website can be accessed using the custom domain instead of only the default Cloudflare Pages URL.

https://pagedeploy.dev

Don't assume HTTPS is ready instantly

After connecting the domain, Cloudflare may need some time to complete the domain and certificate configuration.

The final step is to verify that the domain resolves correctly and that HTTPS is working.

We will perform those checks in the next section.

Verify Domain and HTTPS

The domain is now connected to the Cloudflare Pages project. The final step is to verify that everything works from a visitor’s point of view.

Check 1 — Open the production domain

Open your domain in a browser:

https://pagedeploy.dev

Replace pagedeploy.dev with your actual domain.

Check 2 — Confirm the website loads

The website should display the same production version that is available from your Cloudflare Pages deployment.

If the website loads correctly, the domain is reaching your Pages project.

Check 3 — Confirm HTTPS

Look at the browser address bar.

The address should begin with:

https://

rather than:

http://

Why HTTPS matters

HTTPS encrypts communication between the visitor’s browser and your website.

Cloudflare manages the TLS/SSL certificate for the Pages custom domain as part of the connection.

Check 4 — Check the Pages custom domain

Return to your Cloudflare Pages project and open Custom domains.

Confirm that your domain appears there and that Cloudflare does not report a configuration problem.

Check 5 — Test from a fresh browser session

Open the website using a private or incognito browser window.

This can help avoid confusing an old cached version of the website with the current production deployment.

If the domain does not work yet

Do not immediately change several settings at once. Check the configuration in this order:

Confirm the domain is active in Cloudflare.
Confirm the nameservers at Hostinger match the nameservers assigned by Cloudflare.
Confirm the domain appears under the Pages project’s Custom domains.
Check whether Cloudflare reports a DNS or certificate problem.
Allow time for DNS changes to propagate if the configuration was changed recently.

DNS changes can take time

If you have just changed nameservers, the domain may not work immediately from every network or device.

Give DNS changes time to propagate before assuming that the setup has failed.

Final verification checklist

Check	Expected result
Domain registration	Domain is registered at Hostinger.
Nameservers	Domain uses the Cloudflare nameservers.
Cloudflare zone	Domain is active in Cloudflare.
Production branch	`main` is configured for production.
Pages custom domain	Domain is connected to the Pages project.
Website	Production website loads from the domain.
HTTPS	Website opens using `https://`.

Chapter 12 complete

You have now connected the complete chain:

Domain
↓
Hostinger registration
↓
Cloudflare DNS
↓
Cloudflare Pages
↓
main branch
↓
Production website
↓
Custom domain + HTTPS

The next chapter will put the entire Git → GitHub → Cloudflare workflow together in one real-world example.

Keep the responsibilities clear

Hostinger remains your domain registrar. Cloudflare manages authoritative DNS, and Cloudflare Pages serves the deployed website.