How to host Webflow behind Cloudflare Proxy

To host a Webflow site behind Cloudflare Proxy and configure Cloudflare to prevent SSL handshake errors during SSL certificate renewal, follow these steps:

1. Set up Cloudflare:

   • Sign up for a Cloudflare account and add your domain.

   • Update your domain’s nameservers to Cloudflare’s nameservers provided during the setup process.

   • Ensure that Cloudflare Proxy (orange cloud) is enabled for your domain’s DNS records.

2. Configure Webflow Integration:

   • In your Webflow dashboard, navigate to the Project Settings of your site.

   • Under Hosting, select "Connect a custom domain" and enter your domain name.

   • Follow the instructions provided by Webflow to configure the DNS settings. This usually involves adding DNS records provided by Webflow to your Cloudflare DNS settings.

3. SSL Configuration in Cloudflare:

   • Go to the SSL/TLS settings in your Cloudflare dashboard.

   • Choose the appropriate SSL mode. For most websites, "Full (strict)" is recommended. This ensures end-to-end encryption between the visitor and your origin server (Webflow).

   • Ensure that your SSL certificate mode is set to "Full (strict)" to enforce encryption all the way to your origin server.

4. Page Rules to Exclude SSL Handshake from Webflow:

   • Create a page rule in Cloudflare to exclude the SSL handshake process from being cached by Cloudflare. This helps prevent SSL handshake errors during Webflow SSL certificate renewal.

   • Navigate to the Page Rules section in your Cloudflare dashboard.

   • Create a new page rule for your Webflow domain.

   • Set the pattern to *yourwebflowdomain.com/.well-known/acme-challenge/*.

   • Configure the settings to "SSL: Off" to bypass Cloudflare’s SSL handling for this specific URL pattern.

   • Save the page rule.

5. Monitor SSL Certificate Renewal:

   • Regularly monitor the SSL certificate expiration date in Webflow.

   • Ensure that SSL certificate renewal is initiated well before the expiration date to avoid any disruption in service.

   • Monitor Cloudflare logs and SSL/TLS settings for any errors related to SSL handshake during renewal attempts.

By following these steps and configuring Cloudflare to exclude SSL handshake requests from Webflow during certificate renewal, you can host your Webflow site behind Cloudflare Proxy while minimizing SSL handshake errors.