Setting up a custom domain with Netlify with Cloudflare SSL

In this post we are going to set up a custom domain in Netlify using Cloudflare. We will also install a self signed Cloudflare certificate on Netlify to ensure end-to-end encryption.

Intro

Cloudflare and Netlify are hugely powerful service providers which offer excellent services - even on the free tiers. You can have a site powered by both which enables you to benefit from all of the features.

Netlify has a CDN at its disposal, so why would you want to use Cloudflare as your DNS provider? I like to stick with Cloudflare so I can benefit from their other features, such as easy DNS administration, it is a central place for all my domains and they have both Page Rules, which are killer at doing some kick-ass redirects & caching, and Workers. Netlify does have Functions available, but Cloudflare Workers can also intercept HTTP requests and modify them before they get back to the user (for example. serving up WebP images).

Anyway, I digress. Whatever your reasons for using Cloudflare with Netlify, you will probably want to set up a custom domain for your site and will want to fully encrypt/secure your site.

Running on Cloudflare, you can leave your domain in "Flexible" mode - this would serve unencrypted traffic from Netlify to Cloudflare and then Encrypt from Cloudflare to the User. This is fine for most sites but not helpful for this tutorial! We are going to use the "Full" mode - which requires an SSL certificate (can be self signed) on the origin server (aka Netlify)

Objectives

We are going to:

1. Set up a custom domain in Netlify
2. Use Cloudflare to point the domain to Netlify
3. Create and install a Cloudflare self signed certificate on Netlify
4. Activate "Full" SSL mode and enjoy full encryption :handshake:

Steps

1. On Netlify, navigate to the Site Settings -> Domain Management -> Domains (settings/domain#domains) and click the Add Custom Domain button
2. Enter the URL to your custom domain and click Verify.
3. If you get asked if your domain "already has an owner. Is it you?", proceed with Yes, add domain
4. You'll be redirected back to the domains section, this time with your domain greyed out and an ⚠️ asking you to check your DNS configuration
5. Before you proceed, the easiest way to forward a domain from Cloudflare to Netlify is via a CNAME record. This will use the name of your current Netlify site, so make sure it is something you are happy with. You can change it at a later date, but it will save time if you do it now
6. Set up the DNS record(s) desired in Cloudflare - the default would be to have one for the main domain and a second for the www subdomain. I tend to put a CNAME for the main domain (e.g. mikestreety.co.uk) pointing to the Netlify domain (mikestreety.netlify.app) and then the www subdomain as a CNAME to mikestreety.co.uk
7. Once the DNS records are set up, navigate to SSL/TLS in Cloudflare and click Origin Server.
8. Under the Origin Certificates section, if you haven't already, click Create Certificate. Leave the default settings and click Next
9. In a new tab, open up the Netlify website and navigate to the Domain Management settings page and scroll down to Provide your own certificate
10. Copy the following from Cloudflare and paste into Netlify (starting with - - ---BEGIN XXX- - --- and ending with - - ---END XXX- - ---)
    • Origin Certificate => Certificate field on Netlify
    • Private key => Private key field on Netlify
11. For the Intermediate certs on Netlify, copy the Cloudflare Origin CA — RSA Root from the Cloudflare Origin CA certificates page
12. Lastly, click Install certificate
13. Once complete, you should see the details of the certificate displayed e.g: Domains *.viewthesource.dev, viewthesource.dev, CloudFlare Origin Certificate
14. There may be a call to action to force HTTPS redirects in Netlify - click this as this ensures your site will always be served over https.

Conclusion

You should now have a fully encrypted domain running your Netlify app/site.