Deploy to Cloudflare Pages · Vibe Coding Academy

Shipping shouldn't be hard

Plenty of beginners get stuck at "it's done, but I don't know how to let people see it." Cloudflare Pages makes this simple: connect your code to Git, and every push auto-builds and ships worldwide.

Three ways to ship

Connect Git (recommended): link GitHub/GitLab, push to auto-deploy, and get preview URLs for free.
Direct upload: drag your built output folder into the dashboard — good for one-off static sites.
Wrangler CLI: deploy with wrangler pages deploy — good if you want to script it.

Connecting Git, in plain steps

Push your project to GitHub.
Cloudflare Dashboard → Workers & Pages → create a Pages project → connect your repo.
Set the build command (e.g. npm run build) and the output directory (e.g. out or dist).
Hit deploy, wait for it to finish, and you get a your-project.pages.dev URL. It's live.

What happens after a push

Putting it on your own domain

*.pages.dev works as-is, but for something more professional, attach your own domain: add it under the project's "Custom domains" and follow the DNS instructions. If the domain already lives on Cloudflare, this step is nearly one click.

Traps beginners fall into

Wrong build command or output directory: deploy succeeds but the page is blank — usually the output directory points at the wrong folder.
Missing env vars / secrets: works locally, breaks live — often a missing environment variable. Add it in the Pages settings.
Committing secrets to Git: never put keys in version control. Use the platform's secret settings; don't hard-code them.

Next steps

Still deciding on a platform: Cloudflare vs Vercel for beginners
Get the full picture: Cloudflare

Frequently asked questions

The deploy succeeded but the page is blank — what now?

The most common cause is a wrong "output directory" — Pages is publishing a folder that isn’t your real build output (e.g. the root instead of out). Next are a wrong build command or missing env vars. Check those three first and it usually resolves.

What are the limits of deploying on the free plan?

The free plan is usually plenty for personal projects, but watch the monthly build count, bandwidth, and (if you use Functions) invocation limits. Static sites rarely hit them; if you add lots of dynamic features or get heavy traffic, reassess upgrading. Check the official pricing page for exact numbers.