# Static Site Cloudflare Pages

> Use when building, iterating, previewing, and deploying a small static website or personal storefront to Cloudflare Pages, especially when the work involves repeated content tweaks, payment/contact assets, local preview links, or Pages deployment with wrangler.

- Skill: `arcdodo/static-site-cloudflare-pages` (Agent Skill)
- Install (CLI): `npx skillmds@latest add arcdodo/static-site-cloudflare-pages`
- Raw SKILL.md: https://api.skillmd.com/api/skills/arcdodo/static-site-cloudflare-pages/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: arcdodo (https://skillmd.com/u/arcdodo)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/arcdodo/static-site-cloudflare-pages

---


# Static Site to Cloudflare Pages

Use this skill for small static sites: personal pages, simple storefronts, landing pages, QR/payment pages, and HTML/CSS/JS sites that should become a shareable Cloudflare Pages URL.

## Workflow

1. **Scope and safety**
   - Clarify or infer site purpose, contact details, payment assets, and what must be removed.
   - Do not help sell or share platform accounts in ways that violate provider rules; rewrite risky copy as official subscription/recharge assistance or consultation.
   - Avoid storing secrets in files. API tokens should be passed through environment variables or stdin and rotated after use.

2. **Build locally**
   - Keep output simple: `index.html`, `styles.css`, `script.js`, and `assets/`.
   - Copy user-provided images into `assets/` with stable names.
   - For payment flows, support Alipay/WeChat tabs and clear post-payment contact instructions.
   - Keep purchasing UI deterministic: product list data in `script.js`, generated cards, order modal, payment modal, and validation for contact info.

3. **Preview and verify**
   - Start a local server if needed; if a port is blocked, try another or explain the blocker.
   - Verify the page loads, assets resolve, counts match product data, and purchase/payment modals work.
   - For mobile, ensure single-column product grids and no clipped button text.

4. **Prepare deploy folder**
   - Create a clean deploy folder, for example `deploy-cloudflare/`.
   - Include only site files and required assets.
   - Exclude source archives, build logs, local tools, `.npm-cache`, `.home`, and temporary files.

5. **Deploy to Cloudflare Pages**
   - Deploy only when the user explicitly asks to publish/deploy or has already approved deployment for the current site. Building or previewing a site does not authorize deployment.
   - Before the command that publishes externally, summarize the project name and deploy folder and obtain confirmation if deployment was not explicit in the user's latest request.
   - Prefer Wrangler:
     ```bash
     HOME="$PWD/.home" \
     npm_config_cache="$PWD/.npm-cache" \
     CLOUDFLARE_API_TOKEN="$TOKEN" \
     CLOUDFLARE_ACCOUNT_ID="$ACCOUNT_ID" \
     npx --yes wrangler pages deploy deploy-cloudflare --project-name <project-name>
     ```
   - If Wrangler asks to create the project, accept and use `production` as the production branch unless the user specifies another.
   - If DNS/network fails, test `https://api.cloudflare.com/client/v4/` and retry when DNS returns.
   - If token cannot list accounts, ask for `CLOUDFLARE_ACCOUNT_ID`.

6. **After deploy**
   - Return the Pages URL.
   - Remind the user to revoke/rotate any token pasted into chat.
   - If local verification of `pages.dev` fails because of network/TLS issues but Wrangler reports success, say so clearly.

## Common Checks

- Product category totals equal product data count.
- Payment tabs switch the QR image and alt text.
- Contact and pickup instructions appear in announcement, order modal, and payment modal.
- Public deploy folder contains all referenced assets.
- No secrets or API tokens are committed or written into the site.