---
name: deploy-site-to-cloudflare
description: Deploys a static site, single-page app or full-stack app to Cloudflare Workers with Wrangler - log in, pick static assets or a Worker, set secrets, preview, then ship - and adds storage such as KV, D1 or R2 only when needed. Use when the user wants to host on Cloudflare, deploy with wrangler, or move a site to Cloudflare Workers or Pages.
license: Apache-2.0
compatibility: Needs Node 18+ and a free Cloudflare account
metadata:
  category: deployment
  tags: "cloudflare,hosting,dns"
  author: johnny-bravo
  version: "1.0"
  updated: "2026-11-02"
  status: published
  aliases: "cloudflare pages, wrangler deploy, cloudflare workers hosting"
  source_url: "https://github.com/openai/skills/tree/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/cloudflare-deploy"
  source_license: Apache-2.0
  copyright: "Copyright (c) OpenAI (openai/skills, cloudflare-deploy); Apache License 2.0 text in LICENSE.txt"
  original_author: "OpenAI (openai/skills, cloudflare-deploy)"
  modified: "Modified by TheSkillVault on 2026-11-02: rewritten as a beginner deploy walkthrough for one site; the product index and decision trees were cut to a short storage table; added secrets handling, gotchas and done-when. Not the original file."
  imported_on: "2026-11-02"
---

# Deploy a site to Cloudflare

Ship a site to Cloudflare's network with the Wrangler command-line tool. Most sites need only static assets; add a Worker when you need server code.

## When to use
- You want fast, cheap hosting on Cloudflare for a static site or app.
- You were told to "run wrangler deploy" and want to do it safely.
- You are moving off another host and want a preview first.

## When not to use
- Your app is Next.js and you want zero config. Use deploy-nextjs-to-vercel, or the Cloudflare adapter for your framework.

## Steps
1. Build the site locally (`npm run build`) and note the output folder, such as `dist`.
2. Run `npx wrangler login`, then `npx wrangler whoami` to confirm the account.
3. Add a `wrangler.toml` (or `wrangler.jsonc`) with a `name`, a `compatibility_date` and an `[assets]` block pointing at the build folder.
4. If you have server code, add `main = "src/worker.ts"`. Keep API routes there.
5. Store secrets with `npx wrangler secret put NAME`. Put plain config in `[vars]`.
6. Test locally with `npx wrangler dev`.
7. Run `npx wrangler deploy --dry-run` to check the bundle without shipping.
8. Ask before the real deploy, then run `npx wrangler deploy` and open the `*.workers.dev` URL it prints.
9. Add your domain under the Worker's settings when the preview looks right.

| Need | Cloudflare piece |
| --- | --- |
| Key-value cache or settings | KV |
| SQL database | D1 |
| File and image storage | R2 |
| Background jobs | Queues |

## Gotchas
- Never put API keys in `[vars]` or in git. They are visible. Use `wrangler secret`.
- An old `compatibility_date` can disable newer runtime features. Use a recent date for new projects.
- Single-page apps need `not_found_handling = "single-page-application"` under `[assets]` so deep links work.
- Workers do not run every Node module. Add `nodejs_compat` to compatibility flags when a library needs Node APIs.
- In CI, use a scoped API token as a secret, not your personal login.

## Portability
Works with Astro, SvelteKit, Vite, Remix and plain HTML. If you use a framework with its own Cloudflare adapter, follow its build command and keep the same wrangler steps.

## Example prompt
"Deploy my Vite site to Cloudflare. Show me a dry run first and keep my API key secret."

## Done when
- `wrangler deploy --dry-run` passes with no errors.
- The live URL loads, deep links work, and secrets are set with `wrangler secret`, not in files.
- The custom domain (if any) shows the new site over HTTPS.

---
Modified from "cloudflare-deploy" in openai/skills (Apache-2.0). Changes by TheSkillVault are listed in the metadata above. See LICENSE.txt.