Setting Up Netlify Site with Cloudflare Proxy

Netlify is an amazing service for hosting static websites. Even though a static site is relatively safe, I still want to harden it by adding a Cloudflare proxy on top of my Netlify site.

Setting it up is very simple, but if you’re new, you’re probably lost. Heck, even I got confused and forgot some steps when I tried to set up a new website on Netlify with a Cloudflare proxy—even though I had done it before.

Anyway, here’s how I make my Netlify websites proxied by Cloudflare.

Cloudflare Proxy Setup

Let’s first go to the Cloudflare dashboard and activate the orange cloud.

1. Select DNS, then go to the Records tab.
2. Make sure to turn on the orange cloud for your naked or apex domain.
3. Optionally, if you’re using a subdomain like www, activate the orange cloud for that too.

Don’t forget to click the Save button after making your changes.

Your website won’t be accessible until you install the Cloudflare certificates, so it’s better to do this during low-traffic hours. Though this setup is fast and can be done in less than 5 minutes.

Now let’s continue.

Go back to the sidebar and follow these steps:

1. Expand SSL/TLS from the sidebar.
2. Click the Origin Server tab.
3. Inside the Origin Certificates section, click the Create Certificate button.

A new screen will appear. Now follow these steps to generate your Cloudflare origin certificate:

1. You can use the default RSA (2048) as the private key type.
2. Enter both the naked or apex domain and subdomain(s) as Hostnames (e.g. example.com and www.example.com).
3. You can set Certificate Validity to the default 15 years, or if you’re paranoid, you can set it to fewer years.
4. Finally, once everything is set up, click the Create button.

Cloudflare will then generate the Origin Certificate and Private Key. We need to copy them to Netlify, so let’s go to the Netlify dashboard.

Netlify Custom Certificate Setup

Now we need to configure Netlify to use the Cloudflare custom certificate instead of the default Let’s Encrypt certificate.

1. Open your Netlify dashboard and click Domain management from the sidebar.
2. Click the Set custom certificate button under the SSL/TLS certificate section.

A popup will appear, and we need to copy the certificate and key from Cloudflare to Netlify.

1. Copy the Origin Certificate from Cloudflare and paste it into the Certificate field in Netlify.
2. Copy the Private Key from Cloudflare and paste it into the Private Key field in Netlify.
3. What about Intermediate certs? Click the managing Origin CA certificates link at the bottom of the Cloudflare page—it will open the Cloudflare documentation.

Cloudflare doesn’t directly show its Intermediate certs, but you can get them from the docs. Once you open the documentation linked on the Cloudflare certificate page, scroll until you find a section called Cloudflare Origin CA root certificate or something similar.

At the time I’m writing this tutorial, there are two options for the Cloudflare Origin CA root certificate:

• Cloudflare Origin ECC PEM
• Cloudflare Origin RSA PEM

You can use either one. Personally, I’ve had success using the Cloudflare Origin RSA PEM for Netlify. Just download the file, open it in a text editor, and copy the content into the Intermediate Certs field in Netlify.

Once you paste all three values into Netlify, click the Install certificate button.

Once installed, your Netlify site is successfully proxied by Cloudflare.

If you check the SSL/TLS Certificate section, you’ll notice that it’s now using a Cloudflare Origin Certificate instead of Let’s Encrypt. The expiration will also follow the Cloudflare certificate validity, which in my case is 15 years.

Conclusion

That’s what I can share for today.

With this setup, you can add an extra layer of protection to your Netlify websites by putting Cloudflare in front as a proxy.

As usual, if you have any questions or a better method, leave a comment below. Thanks for reading, and see you next time!