Chris Draycott-Wheatley

Netlify powered subdomains with Cloudflare DNS

Using Cloudflare DNS alongside Netlify makes serving distinct projects to different subdomains straightforward.

But, it does require some setup in each service, here's what's necessary.


NOTE

For this example I'll be using the subdomain example.chrisdwheatley.com.

The Netlify auto-generated project name is wired-mirzakhani-532101.netlify.app.


First, in Netlify we need to set our desired subdomain as a custom domain.

In the Site settings for your chosen project choose 'Domain management'. From there click on the 'Add custom domain' button.

This will bring up the form below, enter your desired domain and click 'Verify'. Netlify will ask you to confirm you're the owner of the domain, tap 'Yes, add domain'.

Screenshot of adding a custom domain to a project in Netlify

Once added you'll see your domain in the list of custom domains.

Screenshot of the Netlify Domain Management settings page with a new custom domain added

You may notice an SSL certificate warning, this will disappear once Netlify provisions a new certificate.

Screenshot of the Netlify SSL certificate warning

Next it's over to Cloudflare to set up our DNS. In Cloudflare's DNS dashboard click '+ Add record'.

Set the following values:

Screenshot of Cloudflare dashboard with example subdomain entered

Once saved it'll look something like this.

Screenshot of Cloudflare dashboard with new record saved

With all this set up you'll now be able to navigate to your new subdomain and see your Netlify project.

Bear in mind propagation may not be instant but I've found it to be in the order of minutes rather than hours.