Setup

On your Framer project, go to "Settings" -> "Domains". Add a free framer subdomain to your site (e.g. my-company.framer.website).

Next, make sure to set up your canonical URL. Still in "Settings" -> "Domains", set the canonical URL option to "Advanced", insert your custom domain (e.g. my-site.com) and publish your website.

Log in to the AWS Management Console and go to CloudFront. Click “Create Distribution”.

Add your Framer domain in the “Origin Domain” field, optionally tweak your settings.

Make sure to use your custom Framer subdomain and not the "Base domain" (<something>.framer.app).

For the default cache behaviour, make sure to set

• Viewer protocol policy: Redirect HTTP to HTTPS

• Allowed HTTP methods: GET, HEAD

  • Note: If you are password-protecting your Framer site, select "GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE" instead

• Cache policy: CachingOptimized

• Origin request policy: AllViewerExceptHostHeader

• Response headers policy: SecurityHeadersPolicy

  

Optionally tweak the settings. When you're done, press "Create distribution".

Once the distribution is deployed, click the link to access it. By visiting the distribution link, you can now view your Framer site hosted by CloudFront.

Setting up multiple origins

If you want to set up a CloudFront distribution like this:

Start by creating a distribution following the steps mentioned earlier.

Then, for the main distribution (my-site.com), go to the "Behaviors" tab and click on "Create Behavior".

Next, add a path pattern "/framer-project/*" and choose the Framer project origin. There are several matching options available, but essentially, this configuration will forward everything under "/framer-project/" to the Framer site.

Make sure you select the same settings as described in the previous section (Viewer protocol policy, Cache policy, Response headers policy, etc).

Save your changes and wait for them to be deployed. Now you’ll have two origins under a single CloudFront distribution. As a next step you will likely want to add your main domain to your CloudFront distribution:

• Adding an alternate domain name

• Routing traffic to an Amazon CloudFront distribution by using your domain name

Tip: if you want CloudFront to work with your naked / apex domain (mysite.com instead of www.mysite.com) it’s easier to use Route53.

Please see also our Advanced Hosting features Multi Site rewrites, Custom Headers.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.