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'.
Once added you'll see your domain in the list of custom domains.
You may notice an SSL certificate warning, this will disappear once Netlify provisions a new certificate.
Next it's over to Cloudflare to set up our DNS. In Cloudflare's DNS dashboard click '+ Add record'.
Set the following values:
- Type to CNAME
- Name to the subdomain you want to use
- Target to your Netlify default subdomain
- TTL to auto unless you want to control it
- Proxy status to DNS only
Once saved it'll look something like this.
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.