How to host a Framer site on Cloudflare Pages

To host a Framer site on Cloudflare Pages, convert the published site to a static project, build it into a folder of HTML files, and deploy that folder to Pages from Git or with Wrangler. Pages serves static files, so the right Deframer target is Vite: every page is prerendered into dist/, the site's redirects come as a _redirects file Pages reads, and nothing runs on a server. If you need a Next.js app on Cloudflare instead, that runs on Cloudflare Workers through the OpenNext adapter, covered briefly at the end.

Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer or Cloudflare.

Why the Vite target fits Pages

Cloudflare Pages is a static host with optional functions. A converted Vite project matches it closely:

Pages serves about.html at /about and redirects /about.html to /about, which is exactly the URL form the converted site uses. It serves the nearest 404.html with a 404 status for URLs that don't exist.

The other targets (Next.js, TanStack Start, Astro, React Router) need a Node.js server at request time, which Pages doesn't provide. See which framework to export Framer to if you're still deciding.

Step 1: Convert to Vite and download

1. On deframer.co, paste the published site's address and pick Vite in the framework menu. Converting is free.
2. Decide on assets. Assets on Framer's CDN (default) keeps images, fonts and videos on framerusercontent.com. Assets in the project downloads them into public/ so Cloudflare serves everything. For a full exit from Framer, choose the second.
3. Verify the site is yours (a meta tag in Framer's Site Settings, then Custom Code; publish; Check again) and download the .zip. A verified download is 1 credit, or free with the lifetime deal; see pricing.

Deframer downloads are for your own sites or sites whose owner has given you permission.

Step 2: Build and preview locally

You need Node.js 22.18 or later, because the prerender script runs as TypeScript directly.

npm install
npm run build
npm run preview

npm run preview serves dist/ the way a static host does, including the 404 page. Check every route in the README's routes table at desktop, tablet and phone widths.

Step 3: Deploy

Option A: connect the Git repository

1. Push the project to GitHub or GitLab. Commit package-lock.json.
2. In the Cloudflare dashboard, create a Pages project and connect the repository.
3. Set the build command to npm run build and the build output directory to dist.
4. Set a NODE_VERSION environment variable of 22 (or later) so the build image uses a recent Node.js.
5. If the site has forms, add VITE_FORM_ENDPOINT (see below) as a build environment variable.
6. Save and deploy.

Each push to the production branch redeploys; every other branch and pull request gets its own preview URL.

Option B: deploy from your machine with Wrangler

npm install --save-dev wrangler
npm run build
npx wrangler pages deploy dist --project-name my-site

The first run asks you to log in and creates the project. This is handy for a one-off move or a CI pipeline you already have. Check Cloudflare's docs for current Wrangler flags; Cloudflare has also been steering new static projects toward Workers with static assets, and the same dist/ folder works there too.

Forms on Pages

A Vite project has no server to receive form posts. Each native Framer form posts its fields as JSON to an endpoint set at build time:

• VITE_FORM_ENDPOINT for every form, or
• VITE_FORM_<NAME>_ENDPOINT for one form (the README lists each form's variable).

Point it at a form service such as Formspree, Basin or Web3Forms. Because the value is compiled into the build, change it in the Pages settings and redeploy. If none is set, the form shows its error state and the browser console names the missing variable. The value netlify is for Netlify Forms only, so don't use it on Cloudflare. More on the form setup is in forms after leaving Framer.

If you'd rather receive submissions on Cloudflare itself, you can write a Pages Function at a path such as /api/contact and point the form's variable at it. That's your own code; Deframer doesn't generate it.

Redirects and headers

The redirects you set in Framer's site settings are in public/_redirects, which Vite copies into dist/. Pages reads it on deploy. Netlify-style _redirects has no 307 or 308 in the file the converter writes, so temporary redirects are 302 and permanent ones 301.

To add response headers (for example security headers), create public/_headers yourself:

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: DENY

A full set, including a Content Security Policy that allows your Custom Code scripts, is in security headers for a self-hosted Framer site.

Step 4: Move the domain

If your domain's DNS is already on Cloudflare, adding it to the Pages project under Custom domains creates the record for you. If the DNS is elsewhere, Pages shows the CNAME to add; for an apex domain on another provider, Cloudflare's docs explain the options, and moving the zone to Cloudflare is the simplest.

Before switching:

1. Lower the TTL on the records you'll change a day ahead.
2. Update the domain in public/robots.txt and public/sitemap.xml if it changes.
3. Test the *.pages.dev address end to end.

After switching, remove the domain from your Framer project. Moving a domain off Framer without downtime has the full checklist and rollback steps.

Limits of a static site

• New CMS items need a new conversion. Items known at conversion each have their page. One added in Framer later renders in the browser from 404.html with a 404 status until you convert again. If the content keeps changing, edit it in the project's JSON instead, or connect a headless CMS (adding a headless CMS).
• Split tests don't run. A static site has no server to pick variants, so visitors see each tested page's original. A Next.js project keeps them; see Framer A/B tests after conversion.
• Pages limits. Cloudflare documents limits on file count, file size and builds per month. Large sites with assets in the project should check them.

What about Next.js on Cloudflare?

A converted Next.js project can run on Cloudflare Workers through the OpenNext adapter (@opennextjs/cloudflare), which needs a Wrangler config and an OpenNext config you add. The steps are in deploying a converted Framer site. Confirm in the adapter's docs that the version you install supports the Next.js version in the project, and test proxy.ts behavior (URL forms, 404s) before you switch the domain.