dev-cloudflare-pages-ci-setup

Set up Cloudflare Pages deployment with GitHub Actions workflows. Use when: (1) Deploying a static site to Cloudflare Pages, (2) User says 'cloudflare pages', 'deploy to cloudflare', 'cf pages setup', (3) User wants CI/CD workflows for Cloudflare Pages with PR previews, (4) Setting up wrangler deployment pipelines.

跳到安装

仓库: Takazudo/claude-resources
最近来源活动: 2026年7月9日 22:15
检测到的 SKILL.md 语言: 英语
星标: 11
分支: 1

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/Takazudo/claude-resources --skill dev-cloudflare-pages-ci-setup

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

name	dev-cloudflare-pages-ci-setup
description	Set up Cloudflare Pages deployment with GitHub Actions workflows. Use when: (1) Deploying a static site to Cloudflare Pages, (2) User says 'cloudflare pages', 'deploy to cloudflare', 'cf pages setup', (3) User wants CI/CD workflows for Cloudflare Pages with PR previews, (4) Setting up wrangler deployment pipelines.

Cloudflare Pages CI Setup

Set up Cloudflare Pages deployment with GitHub Actions workflows for static sites. Supports production deploys, PR preview deploys, and named preview branches.

Step 1: Gather Project Info

Identify the project's build setup:

cat package.json
ls .github/workflows/ 2>/dev/null
cat wrangler.toml 2>/dev/null

Determine: package manager (pnpm/npm/yarn), build command, output directory (dist/, build/, out/), base path (root / or subpath like /pj/project-name/).

Step 2: Ask User Preferences

Cloudflare Pages project name (used in --project-name)
Which workflows: Main only, Main + PR previews, Main + PR + named previews
Base path: root / or specific subpath
IFTTT notifications: yes/no

Step 3: Create Cloudflare Configuration

wrangler.toml

# Cloudflare Pages project configuration

compatibility_date = "2024-12-01"

Add wrangler devDependency

pnpm add -D wrangler

permissions: contents: read jobs: build: # Heavy job — candidate for a larger cloud runner; see /dev-blacksmith-migration runs-on: ubuntu-latest timeout-minutes: 15 steps: # fetch-depth: 0 if project needs git history (e.g., doc history, changelogs) - uses: actions/checkout@v4 - uses: pnpm/action-setup@v4 - uses: actions/setup-node@v4 with: { node-version: 20 } - run: pnpm install --frozen-lockfile - run: pnpm build - uses: actions/upload-artifact@v4 with: { name: dist-out, path: dist/, retention-days: 1 } deploy: needs: build runs-on: ubuntu-latest timeout-minutes: 20 steps: - uses: actions/download-artifact@v4 with: { name: dist-out, path: deploy/ } - run: npm install -g wrangler@4 - name: Deploy to Cloudflare Pages (production) run: | for attempt in 1 2 3; do echo "Deploy attempt $attempt/3..." if wrangler pages deploy deploy \ --project-name=PROJECT_NAME \ --branch=main \ --commit-hash="${GITHUB_SHA}" \ --commit-message="Production deploy: ${GITHUB_SHA}"; then echo "Deploy succeeded on attempt $attempt" exit 0 fi if [ "$attempt" -lt 3 ]; then echo "Deploy failed, retrying in 150 seconds..." sleep 150 fi done echo "Deploy failed after 3 attempts" exit 1 env: CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} notify: # Optional IFTTT notification needs: [build, deploy] if: always() runs-on: ubuntu-latest timeout-minutes: 5 steps: - name: Notify via IFTTT if: env.IFTTT_PROD_NOTIFY != '' env: IFTTT_PROD_NOTIFY: ${{ secrets.IFTTT_PROD_NOTIFY }} BUILD_RESULT: ${{ needs.build.result }} DEPLOY_RESULT: ${{ needs.deploy.result }} SERVER_URL: ${{ github.server_url }} REPO: ${{ github.repository }} RUN_ID: ${{ github.run_id }} run: | if [ "$DEPLOY_RESULT" = "success" ]; then STATUS="✅ succeeded" elif [ "$BUILD_RESULT" = "failure" ]; then STATUS="❌ failed (build)" elif [ "$DEPLOY_RESULT" = "failure" ]; then STATUS="❌ failed (deploy)" else STATUS="⚠️ cancelled"; fi RUN_URL="${SERVER_URL}/${REPO}/actions/runs/${RUN_ID}" curl -sSf --max-time 10 -X POST "$IFTTT_PROD_NOTIFY" \ -H 'Content-Type: application/json' \ -d "{ \"value1\": \"PROJECT_NAME: ${STATUS}\", \"value2\": \"${RUN_URL}\", \"value3\": \"\" }" || echo "::warning::IFTTT notification failed"

Field	Content	Example
`value1`	`<project>: <emoji> <status>`	`my-app: ✅ Deploy succeeded`
`value2`	Run URL for tapping through	`https://github.com/.../runs/123`
`value3`	(unused / empty)	`""`

Secret	Required	Purpose
`CLOUDFLARE_API_TOKEN`	Yes	Wrangler authentication
`CLOUDFLARE_ACCOUNT_ID`	Yes	Cloudflare account identifier
`IFTTT_PROD_NOTIFY`	No	IFTTT webhook URL (skipped if not set)

dev-cloudflare-pages-ci-setup

安装方式

检查来源文件

Cloudflare Pages CI Setup

Step 1: Gather Project Info

Step 2: Ask User Preferences

Step 3: Create Cloudflare Configuration

wrangler.toml

Add wrangler devDependency

Cloudflare Pages CI Setup

Step 1: Gather Project Info

Step 2: Ask User Preferences

Step 3: Create Cloudflare Configuration

wrangler.toml

Add wrangler devDependency

public/_redirects (if using a base path)

Step 4: Create Workflows

Security Best Practices (apply to all workflows)

Deploy Retry (apply to all deploy steps)

Production Deploy (main-deploy.yml)

PR Preview Deploy (pr-checks.yml)

Named Preview Deploy (preview-deploy.yml)

Step 5: Required Secrets

Creating Cloudflare API Token

Step 6: Verify

Companion Skills

dev-cloudflare-pages-ci-setup

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Cloudflare Pages CI Setup

Step 1: Gather Project Info

Step 2: Ask User Preferences

Step 3: Create Cloudflare Configuration

wrangler.toml

Add wrangler devDependency

Cloudflare Pages CI Setup

Step 1: Gather Project Info

Step 2: Ask User Preferences

Step 3: Create Cloudflare Configuration

wrangler.toml

Add wrangler devDependency

public/_redirects (if using a base path)

Step 4: Create Workflows

Security Best Practices (apply to all workflows)

Deploy Retry (apply to all deploy steps)

Production Deploy (main-deploy.yml)

PR Preview Deploy (pr-checks.yml)

Named Preview Deploy (preview-deploy.yml)

Step 5: Required Secrets

Creating Cloudflare API Token

Step 6: Verify

Companion Skills