Hosting with Cloudflare

Cloudflare is a widely used hosting platform that can add an additional layer between your site and the client, known as reverse proxying. This layer can provide enhanced security, performance, availability, and analytics. However, Framer already includes many of these features by default, so an extra layer is usually only necessary for very specific requirements.

Note: Reverse proxy is only available as an Add-on or our Enterprise plans.

Setup

Set up your custom domain in Framer

Cloudflare is compatible with Framer. However, before setting it up you need to disable proxying in Cloudflare (set it to DNS only) and set up your custom domain in Framer.

Configure your domain in Cloudflare

Please proceed to your Cloudflare account and configure your domain.

Make sure to configure the following settings during setup:

  • TLS/SSL: Full (Strict)

  • Always Use HTTPS: Enabled

  • Automatic HTTPS Rewrites: Enabled

Add a page rule

Now, let’s proceed with an important step: disabling HTTPS/SSL for a specific endpoint on the Framer site. This endpoint is used to generate the SSL certificate using Let’s Encrypt.

To do this, go to Rules → Page Rules and create a rule for <domain>/.well-known/acme-challenge/* (where the domain is koenbok.com in this case) with the following settings:

  • SSL: Off

  • Automatic HTTPS Rewrites: Off

Enable Proxied DNS

Once everything is properly set up, you can enable DNS proxying and it should resemble the following configuration:

Your site should now be proxied through Cloudflare. It may take some time for the settings to propagate. To verify this, you can check the headers of the served document in the Inspector.

When switching to DNS proxying, Framer will show in the UI that your custom domain connection cannot be verified, because it’s no longer pointing directly at the Framer IPs and hostname. We plan to improve this, but for now this can be ignored.