Deploy an AI-built site to Cloudflare Pages

Browser-based builders like Bolt and Lovable can publish your site for you. So why host it somewhere else? Common reasons: you want control over the domain and hosting bill, you want the site to live next to other things you run, or you want your code and your hosting to be independent of one vendor.

This recipe moves a Vite and React site (the kind Bolt and Lovable commonly produce) onto Cloudflare Pages, with the code in GitHub. After setup, every change you push to GitHub redeploys automatically.

What you'll need

• A site built in Bolt or Lovable. Check your project's files to confirm it's a Vite project: you should see a vite.config file and a package.json with a build script.
• A free GitHub account, and a free Cloudflare account.
• About 20 minutes.

A word on Cloudflare's product names. Cloudflare Pages is still documented, and its Git integration guide is what this recipe follows. Cloudflare also offers hosting for static sites through Workers (called static assets), and the dashboard may steer new projects toward it. If the Pages option is hidden or labelled differently when you read this, check Cloudflare's docs for the current recommended route. The ideas below (connect a repo, set a build command and output folder) apply to both.

Step 1: Get your code into GitHub

Both builders can sync with GitHub.

In Lovable: Open the project, find the GitHub integration in the project's settings and connect your GitHub account. Lovable's docs say connecting a project normally creates a new repository, private by default, with two-way sync between Lovable and GitHub. Don't rename, move or delete the repository afterwards, because Lovable's FAQ says that breaks the sync.

In Bolt: Click the GitHub icon at the top right of the project, name the repository and choose Create repository. Bolt's docs say it starts private, on a main branch, and that you need an individual GitHub account to connect.

Once it's done, open the repository on github.com and check that your files are there, including package.json.

Step 2: Make sure the project builds locally (optional but wise)

If you're comfortable with a terminal, clone the repository and run the build before involving Cloudflare. That way, if something is wrong, you find it on your machine rather than in a deploy log.

git clone https://github.com/YOUR-NAME/YOUR-REPO.git
cd YOUR-REPO
npm install
npm run build

A successful build creates a folder, normally called dist. That folder is your website: plain HTML, CSS and JavaScript files. Cloudflare will do the same thing on its servers.

If you're unsure about Git itself, read our Git basics guide first.

Step 3: Connect the repository to Cloudflare Pages

Cloudflare's Git integration guide describes the flow like this:

1. Log in to the Cloudflare dashboard.
2. Go to Workers & Pages.
3. Select Create application, then Pages, then Connect to Git.
4. If asked, authenticate with GitHub and choose which repositories Cloudflare can see. Granting access to only the one repo you need is a good habit.
5. Pick your repository and continue.

One thing to know: Cloudflare's docs say that once a project is connected through Git, you can't switch it to Direct Upload later. If you'd rather upload built files by hand, choose that route at the start instead.

Step 4: Set the build settings

On the build settings screen, enter:

Cloudflare's build configuration documentation lists React (Vite) with exactly that command and output directory. For the framework preset, you can pick a Vite or React option if one is offered, or leave it as None and fill in the two fields yourself. Setting the command and directory by hand works either way.

The most common mistake is the output directory. Vite builds to dist. Create React App, an older tool, builds to build. If your deploy "succeeds" but shows a blank or missing site, check this setting first.

Step 5: Add environment variables (if your app needs them)

Many AI-built apps talk to a backend such as Supabase, which needs a URL and a public key. In Lovable and Bolt projects these often live in a .env file, which is deliberately not committed to GitHub. That means Cloudflare won't have them unless you add them.

In your Pages project, open Settings, find Variables and secrets (or Environment variables, depending on the dashboard version), and add each one with the same name your code uses.

Two things to understand about Vite:

• Vite only exposes variables whose names start with VITE_ to your browser code. Use the same names your project's .env file uses.
• These values are read when the site is built, not when it's visited. After changing a variable, trigger a new deploy for it to take effect.

A security warning: anything that ends up in browser code is visible to every visitor. Only put public keys there, such as a Supabase "anon" key, which is designed to be public. Never put a secret key, such as a payment provider's secret or a database admin key, in a VITE_ variable. If your app needs one, it belongs in server-side code, not in this kind of site.

Step 6: Deploy

Choose Save and Deploy. Cloudflare clones your repository, runs npm install and your build command, and publishes the output folder. You can watch the build log live.

When it finishes, you'll get a URL ending in .pages.dev. Open it and click around. Check:

• The home page loads with its styles and images.
• Links between pages work.
• Refresh on an inner page. If you open /about directly or refresh while on it, does it load, or show a 404? Single-page apps handle navigation in the browser, so a host has to send every path to index.html. Pages commonly handles this without help for a site without its own 404.html, but test it rather than assume. If you do get a 404, add a file at public/_redirects containing this line, commit, and redeploy:

/* /index.html 200

• Anything that needs a backend (sign-in, saving data) works, which confirms your environment variables are correct.

Step 7: Redeploy by pushing

From now on, a push to your production branch triggers a build and deploy. If you keep using Lovable or Bolt for edits, their changes sync to GitHub and Cloudflare picks them up, so the builder becomes just another way of writing code. Pull requests and other branches typically get their own preview URLs, which is useful for checking a change before it goes live.

If a deploy fails, open the build log. Look for the first red error, which is usually a missing dependency, a wrong build command or a missing environment variable.

Step 8: Add a custom domain

1. Open your project in the Cloudflare dashboard and look for Custom domains.
2. Choose Set up a custom domain and enter the domain.
3. Follow the prompts. If the domain's DNS is already on Cloudflare, it can add the record for you. Otherwise Cloudflare will tell you which DNS record to create at your registrar.

Allow some time for DNS changes to take effect and for the certificate to be issued. Dashboard labels move around, so if you can't find an option, search Cloudflare's docs for "Pages custom domains".

Troubleshooting

Build fails with "command not found" or missing module. Make sure package.json is at the repository's root, or set the Root directory to where it lives.

The site is blank after a successful deploy. Wrong output directory, or an app that expects a different base path. Re-check dist.

Features work in Lovable or Bolt but not on Cloudflare. Almost always a missing environment variable, or a backend that only allows requests from the builder's own domain. Add your new domain to the backend's allowed list, such as in your sign-in provider's redirect settings.

Changes in the builder don't show up. Confirm the push reached GitHub on the branch Cloudflare watches.

Recap

1. Sync the project to GitHub from Lovable or Bolt.
2. Create a Pages project with Connect to Git.
3. Build command npm run build, output directory dist.
4. Add VITE_ environment variables, and only public keys.
5. Test the live URL, including refreshing an inner page.
6. Add your own domain.

If you're still choosing a builder, see Lovable vs Bolt.