# 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.

Start publishing for free

Connect this AI to Revdoku so it can store files, create, update, and publish websites for me. Read and follow https://revdoku.com/prompt.md. A Revdoku account is required. If I do not have one, send me https://app.revdoku.com/users/sign_up?utm_source=revdoku.com&utm_medium=ai-chat&utm_campaign=connect_ai_first and wait until I confirm signup is complete. For ChatGPT, Claude, or another cloud AI, connect https://app.revdoku.com/mcp and complete Revdoku OAuth. For a local agent, use Revdoku's browser device sign-in and complete the connection in Revdoku. Never ask me for a password or API key in chat, or for a verification code. When Revdoku tools are connected, verify the connection, tell me you’re ready, and ask what I want to publish.

Copy Prompt

or

Create Free Account

---

[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)