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:

     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.