Going Live with Cloudflare Pages: Publish by Drag and Drop Without Knowing Git

This is lesson 3 of Route A (building websites), and the most beginner-friendly Cloudflare Pages tutorial on this whole site: no repository, no tools to install, no command line. Drag the folder you built in A1 into the browser and you get a public URL at 项目名.pages.dev. The whole thing takes about 12 minutes, and the free plan is enough.

• Folder not ready yet? Go back to A1 Build a Website with AI first and create your pages
• Still hesitating between platforms? Read A5 Deployment Platform Comparison first, then come back

What you'll be able to do after this lesson

• Drag the website folder you built in A1 into Cloudflare Pages—no Git repository, no command line—and get a public URL at 项目名.pages.dev
• Name the three ways to go live with Cloudflare Pages (drag and drop / Wrangler CLI / Git integration), who each suits, and which two can't be converted into each other
• Verify the URL yourself after deployment; when you revise the site, drag the folder into the same project again to publish a new version
• Know the free-tier limits: 25 MiB per file, 1,000 files per drag-and-drop upload, 500 deployments per month

Your current predicament

• "I gave up halfway through that whole A2 repository setup—can't I just throw the folder up there and be done with it?"
• "I just want to share my portfolio link with friends—I don't want to figure out what Git is just to go live"
• "I heard Cloudflare can host websites for free, but the dashboard is all English buttons and I don't know where to click"

When to use this approach

When you need to:

• Publish the static website you built in A1 to the public web and get a link you can share
• Do everything in the browser: point, click, and drag—nothing to install
• Go live for free—the official docs state Pages is "Available on all plans", and the free tier is plenty for a personal site

And you don't want to:

• Learn repositories and Git first just to go live—that's the A2 GitHub Pages Deployment route
• Run commands in your project folder—that's the A4 Vercel Deployment route
• Buy a server, set up an environment, or study deployment scripts

🎒 Preparation Before You Start

• Completed A1 Build a Website with AI: From One Sentence to a Launch-Ready Page, with a folder of static pages in hand
• An email address that can receive mail, for registering a Cloudflare account
• Your website folder (or its zip) somewhere handy—drag and drop supports both
• A cup of water ☕

Core Idea

Cloudflare Pages is Cloudflare's website hosting service: you hand it your website files, and it publishes your site to Cloudflare's global network. Purely static websites (the output of A1) can go live just by uploading the files.

There are three ways to hand over the files; this lesson takes the first:

Upload method	What you need to know	Characteristics	Who it suits
Drag-and-drop upload (Direct Upload, this lesson's main track)	Dragging files in the browser	Get 项目名.pages.dev right away	You, who absolutely don't want to touch the command line or Git
Wrangler CLI	Two npm commands	Same URL, higher file-count limit	Those willing to open a terminal but not to learn Git
Git integration	GitHub/GitLab + push	Auto build and deploy on every push	Those who already know Git and revise often

Remember Direct Upload in one sentence: what you upload are "finished files". The platform no longer builds for you—whatever you upload goes live as-is, so the files must already be in final form before uploading. The pure static pages AI wrote in A1 are exactly that.

⚠️ Think it through before choosing: the two routes are mutually exclusive

• A project that uses Git integration cannot be changed to Direct Upload later—the official docs state this restriction explicitly
• A project that chose Direct Upload cannot be changed to Git integration later either; if one day you want push-triggered auto deployment, you'll have to create a new project
• Good news: within the same Direct Upload project, you can freely switch between the drag-and-drop and Wrangler upload methods

💡 The official push is Workers; beginners can ignore it for now

Cloudflare's official documentation now shows a notice at the top of the Pages page: Workers supports most Pages use cases and has a fuller feature set, so new projects are recommended to start with Workers. Workers is Cloudflare's flagship development platform, well suited for full-stack applications with a backend; but for getting a static site online from zero, Pages' drag-and-drop upload is still the most direct path—nothing to install. When you later want to build a full-stack application, it won't be too late to learn about Workers then.

Follow along with me

After these five steps, your site will have a public URL. The example continues with A1's "photography portfolio"—just swap in your own subject and do the same.

Step 1: Check your website folder and make sure you drag "the right level"

Why: Direct Upload does not build for you, and the contents of the uploaded directory are exactly the contents of the site root—add an extra layer of folder and your homepage will no longer be at the top level of the URL.

Open A1's project folder and take a look; the first level should directly contain these files:

index.html      ← the homepage, must be at the first level
style.css
script.js
images/

You should see: index.html sitting directly at the first level of the folder, and double-clicking it opens your page in a browser.

Dragging a zip works too—the official instructions say drag-and-drop accepts "a single zip file" or "a single folder." If you compress, compress this level; don't include its parent folder in the zip.

• The first level of the folder (or zip) directly shows index.html

Step 2: Register a Cloudflare account and go to Workers & Pages

Why: Pages projects are all created and managed in the Workers & Pages page of the dashboard.

Steps: Open dash.cloudflare.com in your browser, register, and log in (the free plan is fine—Pages is available on all plans), then find the Workers & Pages page in the dashboard and click into it.

You should see: the Workers & Pages page, plus the Create application button.

• You can see the Create application button

Step 3: Create the application and drag in the folder—the core step of the Cloudflare Pages tutorial

Why: The project name determines your URL prefix; once you fill it in at this step, the URL is set.

Follow the official path and click through: Workers & Pages → Create application → Get started → Drag and drop your files.

Enter a name in the project name field (for example my-photo-site), then drag the folder or zip into the upload box.

You should see: files start uploading, with file names like index.html in the list and no red warnings.

💡 Project name = URL prefix

Your URL will be 项目名.pages.dev. The official documentation states: if the project name is taken, Cloudflare automatically appends a few random characters—to keep a clean URL, pick a name unlikely to collide on the first try.

• The project is created, and there are no red warnings in the upload list

Step 4: Click Deploy site and get your pages.dev URL

Why: After uploading, the "deploy" action is still needed; only when deployment finishes do you get a public URL.

Steps: When the upload finishes, select Deploy site (this step may also show Save and Deploy—just click it) and wait for the progress to complete.

You should see: deployment complete, with the page showing your URL https://项目名.pages.dev; continuing into the project panel (continue to your newly deployed project), you can see the deployment status and the URL.

• https://项目名.pages.dev has appeared

Step 5: Open the URL for acceptance testing, and learn how to update to a new version

Why: You must look at it yourself before going live—the discipline of the 3.4 acceptance checklist applies just as much to a freshly launched site.

Steps: Open https://项目名.pages.dev in your computer's browser and check it block by block against A1's structure checklist; then send the link to your phone and open it there.

You should see: your page opens correctly on both phone and computer, without breaking on narrow screens.

What about future revisions? Have the AI update the files, return to this project's Workers & Pages page, select Create a new deployment, choose the production environment, and drag the new folder in again—the new version goes live. The old version isn't lost either: Pages supports Rollbacks, letting you return to a previous production version with one click.

You should see: the new version replaces the old one, and the URL stays the same.

• You have opened your own URL on both phone and computer

Checkpoint ✅

• The first level of the folder (or zip) is directly index.html
• The project was created in Workers & Pages via Create application → Get started → Drag and drop your files
• Deployment completed, and https://项目名.pages.dev opens your homepage
• It also opens correctly on your phone
• You know that after a revision, re-dragging once via Create a new deployment updates the site

Pitfall warnings

❌ Dragged the wrong folder level

Symptom: deployment succeeded, but opening the URL doesn't show your homepage.

Cause: the contents of the uploaded directory are exactly the contents of the site root—if you nested the website folder inside another new folder before dragging (or the zip has an extra layer), index.html is no longer in the root directory.

Correct approach: before compressing or dragging, open it and check that the first level is directly index.html. If you uploaded the wrong thing, there's no need to delete the project—use Create a new deployment and drag the correct folder again.

❌ File limits exceeded: 25 MiB per file, 1,000 files per drag

Symptom: during upload, a red warning symbol appears next to some files, and those files weren't uploaded.

Cause: direct upload limits were exceeded—the official documentation says a single file over 25 MiB gets a red warning; drag-and-drop allows at most 1,000 files per upload; Wrangler's limits are looser (20,000 files, with the same 25 MiB per file).

Correct approach: the official documentation says assets with red warnings can be deleted, but they cannot be replaced in place—the whole site must be re-uploaded. So: compress images before uploading; if you have more than 1,000 files, switch to Wrangler (see the advanced tips below). The free tier allows 500 deployments per month, so clean up your files before re-uploading.

❌ Deployment succeeded, but opening the URL gives a DNS error

Symptom: deployment clearly completed, but the browser can't open the site and reports a DNS error.

Cause: The official documentation states that after the first deployment, DNS may not have taken effect yet (propagation takes time).

Correct approach: Wait a few minutes and refresh, or open it from a different device on a different network (such as mobile data).

❌ Creating several projects in a row right after registration gets you blocked

Symptom: As soon as the first project is created, immediately creating a new one gets restricted.

Cause: The official anti-abuse restrictions apply to new accounts—within the first 48 hours of using the service, the number of new Pages projects you can create is limited, and the limit is lifted automatically afterward; in addition, each account can have at most 100 projects.

Correct approach: Get one project working today; if you really need multiple, come back after 48 hours.

Advanced tips (optional)

🔧 Go live with two Wrangler commands (optional)

Willing to open a terminal but don't want to learn Git? The official command-line tool Wrangler also uses Direct Upload—it belongs to the same route as drag and drop, and you can mix them freely at any time:

npx wrangler pages project create
npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

• The first command will prompt you to fill in the project name and production branch, which is then cached in node_modules/.cache/wrangler, so subsequent deployments don't require filling them in again
• <BUILD_OUTPUT_DIRECTORY> replace with your folder path; for a pure static website in A1, what you upload is the project folder itself
• Wrangler only supports folders, not zip (drag and drop supports both)
• To publish a preview environment: add --branch=<分支名>, and you get 分支名.项目名.pages.dev
• File count limit 20,000 (drag and drop is 1,000); the functions functions directory can only be compiled and uploaded by Wrangler, drag and drop does not support it (the single-file _worker.js is supported by both)
• Prerequisite: npm installed on your machine (the official requirement is to install npm first, then Wrangler); on first use, run npx wrangler login to log in, then execute the commands below

🔧 Know Git already? Make every push deploy automatically (optional)

This is the Git integration, mutually exclusive with drag and drop—click through: Workers & Pages → Create application → Pages → Connect to Git, authorize GitHub or GitLab → select a repository (both private and public are supported) → configure the build: project name (defaults to the repository name), production branch (usually main), leave Build command empty if there is no framework, build output directory → Save and Deploy.

After that, every push builds and deploys automatically; non-production branches automatically generate preview deployments (分支名.项目名.pages.dev). Reminder: if you created a direct-upload project and want to switch to this route, you can only create a new project—see the core idea above for the mutual-exclusion rule.

🔧 Want your own domain name? (optional)

pages.dev is a subdomain provided by the platform; for something more official, you can bind a domain you purchased: on the free plan, each project can bind 100 custom domains. For the general approach to domain resolution and binding, see 5.3 Custom domains.

One Cloudflare-specific point to note: the official documentation reminds you that before deleting a project with a custom domain, you must first delete the corresponding CNAME record, otherwise the domain will point to a project that no longer exists.

Lesson summary

✅ You have completed the drag-and-drop go-live route of this Cloudflare Pages tutorial:

• Check the folder: the first level contains index.html directly; either dragging the folder or a zip works
• Create the project: Workers & Pages → Create application → Get started → Drag and drop your files, the project name is the URL prefix
• Deploy: Deploy site → get https://项目名.pages.dev
• Verify: opened on both phone and computer
• Update: Create a new deployment and drag again; within the same direct-upload project you can switch freely between drag and drop and Wrangler, but it is mutually exclusive with Git integration

Stage	Key operation	What to remember
Prepare	Check the first level of the folder	The uploaded directory's contents = the website root directory
Create	Create application → drag-and-drop entry	The project name determines the pages.dev prefix
Deploy	Deploy site	Single file ≤ 25 MiB, drag and drop ≤ 1,000 files per upload
Verify	Open on phone + computer	If the first open shows a DNS error, wait a few minutes first
Update	Create a new deployment	Free tier allows 500 deployments per month, previous versions can be rolled back

For a complete comparison of the free quotas and limits of GitHub Pages, Cloudflare Pages, and Vercel, see A5 Deployment platform comparison for the full picture on one page.

Next lesson preview

In the next lesson, A4 Going live on Vercel: one-command deployment for AI coding agents, we switch to a different go-live philosophy: type one command in the project folder, and everything from build to go-live is fully automatic. You will learn:

• Install Node.js 18+ and the Vercel CLI, vercel login log in once
• vercel --prod complete a production deployment with one command
• What "the CLI automatically detects the framework" means, and what it means for your static website
• Vercel's Hobby free tier prohibits commercial use—be clear about this before choosing it

When you're ready, keep the folder at hand and go to A4 →