cloudflare-pages

Files (5)

• SKILL.md
• ci-cd-templates.md · references/
• add-custom-domain.sh · scripts/
• setup-pages-project.sh · scripts/
• verify-deployment.sh · scripts/

SKILL.md (first lines)

# Cloudflare Pages

Deploy any static site to Cloudflare Pages — create projects, attach custom domains, wire up CI/CD, and verify deployments. Framework-agnostic: works with Hugo, Astro, Next.js, Nuxt, SvelteKit, or any build tool that produces static output.

## Prerequisites

| Requirement | How to get it |
|---|---|
| **wrangler CLI** | `npm i -g wrangler` then `wrangler login` (opens browser OAuth) |
| **Cloudflare account** | [dash.cloudflare.com](https://dash.cloudflare.com) — free tier works |
| **Account ID** | Dashboard → any zone → Overview sidebar, or `wrangler whoami` |
| **API Token (CI/CD)** | Dashboard → API Tokens → "Edit Cloudflare Workers" template (includes Pages) |
| **DNS API Token** | Dashboard → API Tokens → Custom → Zone:DNS:Edit (only if adding custom domains via API) |
| **Zone ID** | Dashboard → your domain → Overview sidebar (only for custom domains) |

## Quick Deploy

For a one-off manual deploy when CI/CD isn't set up yet:

```bash
# 1. Build your site
<your-build-command>          # e.g. hugo --minify, npm run build

# 2. Deploy output directory
wrangler pages deploy <output-dir> --project-name <project-name>
```

Each deploy gets a unique preview URL. The latest deploy on `production` branch becomes the live site at `<project>.pages.dev`.

## Full Setup Workflow

### Step 1 — Create the Pages project

```bash
bash scripts/setup-pages-project.sh <project-name> "<build-command>" <output-dir> [branch]
```

This runs `wrangler pages project create` and prints the resulting `*.pages.dev` URL. The `branch` argument defaults to `main`.

**Manual alternative:**
```bash
wrangler pages project create <project-name> --production-branch main
```

### Step 2 — Deploy

Build and deploy:
```bash
<your-build-command>
wrangler pages deploy <output-dir> --project-name <project-name>
```

### Step 3 — Add a custom domain

```bash
# Set required environment variables
export CLOUDFLARE_ACCOUNT_ID="<your-account-id>"
export CLOUDFLARE_API_TOKEN="<pages-edit-token>"
export CLOUDFLARE_ZONE_ID="<your-zone-id>"
export CLOUDFLARE_DNS_TOKEN="<dns-edit-token>"   # optional, falls back to API_TOKEN

bash scripts/add-custom-domain.sh <custom-domain> <project-name>
```

The script performs two operations:
1. **Registers** the domain on the Pages project via Cloudflare API
2. **Creates** a proxied CNAME DNS record pointing to `<project>.pages.dev`

Both operations are idempotent — safe to re-run.

### Step 4 — Set up CI/CD

See **[references/ci-cd-templates.md](references/ci-cd-templates.md)** for complete GitHub Actions workflows for Hugo, Astro, Next.js, and generic npm builds.

**Required GitHub Secrets:**

| Secret | Value |
|---|---|
| `CLOUDFLARE_API_TOKEN` | API token with "Edit Cloudflare Workers" permissions |
| `CLOUDFLARE_ACCOUNT_ID` | Your Cloudflare account ID |

Set these at: **Repository → Settings → Secrets and variables → Actions → New repository secret**

## Rollback

```bash
# List recent deployments
wrangler pages deployment list --project-name <project-name>

# Rollback: checkout previous commit, rebuild, redeploy
git checkout <commit-hash>
<your-build-command>
wrangler pages deploy <output-dir> --project-name <project-name>

# Return to latest
git checkout main
```

## Verify Deployment

```bash
export CLOUDFLARE_ACCOUNT_ID="<your-account-id>"
export CLOUDFLARE_API_TOKEN="<your-token>"

bash scripts/verify-deployment.sh <project-name> [custom-domain]
```

Shows: latest deployment status (color-coded), last 5 deployments table, custom domain SSL status, and HTTP 200 check on `*.pages.dev`.

## Script Reference

| Script | Purpose | Required env vars |
|---|---|---|
| `setup-pages-project.sh` | Create Pages project via wrangler | `CLOUDFLARE_ACCOUNT_ID` |
| `add-custom-domain.sh` | Register domain + create CNAME | `CLOUDFLARE_ACCOUNT_ID`, `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ZONE_ID` |
| `verify-deployment.sh` | Check deploy status, SSL, HTTP | `CLOUDFLARE_ACCOUNT_ID`, `CLOUDFLARE_API_TOKEN` |

## Token Reference

From aAAaqwq/AGI-Super-Team, MIT.

More from aAAaqwq/AGI-Super-Team