# Cloudflare Pages Tutorial: Publish an AI Website

> Publish an AI-generated static website with Cloudflare Pages Direct Upload, add a custom domain, and use Wrangler for repeatable updates.

![Cloudflare Pages service page](/assets/blog/how-to-publish-an-ai-generated-site-on-cloudflare-pages/01-service-page.png)

This Cloudflare Pages tutorial shows how to publish an AI-generated website from a finished static build, with no Git setup or server to manage. You will upload the files, check the `.pages.dev` address, connect a domain, and publish updates.

## Before you start

Direct Upload suits a portfolio, landing page, or AI-made demo consisting of HTML, CSS, JavaScript, images, and fonts. It does not build source code, so export the project first.

Have these ready:

- A Cloudflare account
- The final build folder or its ZIP
- An optional domain you control
- A modern browser

Cloudflare’s [Direct Upload documentation](https://developers.cloudflare.com/pages/get-started/direct-upload/) limits dashboard uploads to **1,000 files**, with a **25 MiB limit per file**. Use Wrangler if the export exceeds either limit.

## 1. Prepare the build folder

Open the folder you will upload. The file `index.html` must be at the folder root because it is the home page Cloudflare serves.

```text
site-build/
├── index.html
├── styles.css
├── script.js
└── images/
```

If your AI builder produced `src` and `package.json`, do not upload that source as the site. Run its export or build command, then use the output folder, often `dist`, `build`, or `out`. Open `index.html` locally and check the images and styles.

## 2. Create a Direct Upload project

In the Cloudflare dashboard, open **Workers & Pages**. Select **Create application**, **Get started**, then **Drag and drop your files**. Enter a short project name; it becomes part of an address such as `studio-demo.pages.dev`.

Choose carefully. A [Direct Upload project cannot later switch to Git integration](https://developers.cloudflare.com/pages/get-started/direct-upload/). Automatic Git builds would require a new project. Direct Upload is the simpler hosting route for vibe coding when you want to publish now.

![Cloudflare Pages Direct Upload guide](/assets/blog/how-to-publish-an-ai-generated-site-on-cloudflare-pages/02-direct-upload.png)

## 3. Upload and deploy

Drag the build folder or its ZIP into the upload area. Review the file list, then select **Deploy site**; some dashboard screens use **Save and Deploy**.

Wait for the success message. If Cloudflare rejects an asset, fix or remove it locally and upload the complete build again. Dashboard drag and drop accepts folders and ZIP files; Wrangler accepts a folder.

## 4. Open the pages.dev URL

Open the generated ` .pages.dev` link, then test the site:

- Follow every navigation link.
- Reload a deeper page directly.
- Check images on desktop and mobile.
- Submit each form and confirm where its data goes.

A static deploy does not create a database or API. Server-dependent forms or sign-ins may fail even when the page looks right. For client review, you can put the preview URL and supporting files in a Revdoku bucket, apply an email or password gate, and keep feedback with the deliverable.

## 5. Add a custom domain

Open the project, choose **Custom domains**, select **Set up a domain**, enter the hostname, and continue. The [Cloudflare custom-domain guide](https://developers.cloudflare.com/pages/configuration/custom-domains/) covers both routes:

- An apex domain such as `example.com` must be a Cloudflare zone using Cloudflare nameservers.
- A subdomain such as `www.example.com` can use an outside DNS provider and a CNAME to ` .pages.dev`.

Start inside Pages before adding the CNAME. Otherwise, Cloudflare says the hostname may return a **522 error**. Wait until its status becomes active.

![Cloudflare Pages custom domain guide](/assets/blog/how-to-publish-an-ai-generated-site-on-cloudflare-pages/03-custom-domain.png)

## Update the site

Make changes, export a fresh build, and verify `index.html`. In the project dashboard, select **Create a new deployment**, choose production, and upload the replacement build. The `.pages.dev` address and custom domain stay unchanged.

For repeatable publishing, use [Wrangler with Direct Upload](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/):

```bash
npx wrangler pages deploy dist --project-name=studio-demo
```

Replace `dist` and `studio-demo` with your folder and project names. Wrangler is the practical alternative when manual uploads become tedious, and it works with the existing Direct Upload project.

| Item | What to check |
|---|---|
| **Home page** | `index.html` opens at the root |
| **Assets** | Images, fonts, CSS, and scripts load |
| **Navigation** | Every internal and external link works |
| **Responsive view** | Main pages work on a phone |
| **Domain** | The custom hostname loads over HTTPS |

Your site is live.

Just ask to “publish to Revdoku” to
publish your HTML pages presentation dashboard app prototype game prototype
as a fast and secure website

from your Codex , Claude or another AI app publish files or folders

Connect
Skill
MCP

Paste this into your AI app.

Copy

Install the Revdoku skill in your AI app.

Copy
npx skills add revdoku/revdoku --skill revdoku -g

Choose your AI app to connect through MCP.

Codex CLI
Claude Code
Other

Copy codex mcp add revdoku --url https://app.revdoku.com/mcp
codex mcp login revdoku

Copy claude mcp add --transport http revdoku https://app.revdoku.com/mcp
claude mcp login revdoku

Transport Streamable HTTP Auth Browser OAuth

Copy https://app.revdoku.com/mcp

Open the MCP setup guide →

Free · Public or protected · Visitor analytics · Forms and email alerts Building websites for clients? Explore Revdoku for agencies →

---

[View the canonical page](https://revdoku.com/blog/how-to-publish-an-ai-generated-site-on-cloudflare-pages/) · [Browse llms.txt](https://revdoku.com/llms.txt)