Skip to main content 首页 创作者 jeremylongshore claude-code-plugins-plus-skills webflow-multi-env-setup
webflow-multi-env-setup Configure Webflow across development, staging, and production environments with
per-environment API tokens, site IDs, and secret management via Vault/AWS/GCP.
Trigger with phrases like "webflow environments", "webflow staging",
"webflow dev prod", "webflow environment setup", "webflow config by env".
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill webflow-multi-env-setup命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... name webflow-multi-env-setup description Configure Webflow across development, staging, and production environments with
per-environment API tokens, site IDs, and secret management via Vault/AWS/GCP.
Trigger with phrases like "webflow environments", "webflow staging",
"webflow dev prod", "webflow environment setup", "webflow config by env".
allowed-tools Read, Write, Edit, Bash(aws:*), Bash(gcloud:*), Bash(vault:*) version 1.5.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","design","no-code","webflow"] compatibility Designed for Claude Code
Webflow Multi-Environment Setup
Overview
Configure Webflow Data API v2 integrations across development, staging, and production
with separate API tokens, site IDs, and secret management. Each environment targets
a different Webflow site for complete isolation.
Prerequisites
Separate Webflow sites for each environment (or at minimum, separate API tokens)
Secret management solution (Vault, AWS Secrets Manager, or GCP Secret Manager)
CI/CD pipeline with environment variable support
Environment Strategy
Environment Webflow Site API Token CMS Data Purpose Development Dev site Dev token Test/seed data Local development Staging Staging site Staging token Copy of prod data Pre-prod validation Production Production site Prod token Real data Live traffic
Instructions
Step 1: Environment Configuration
type Environment = "development" | "staging" | "production" ;
interface WebflowEnvConfig {
accessToken : string ;
siteId : string ;
maxRetries : number ;
webhookSecret : string ;
debug : boolean ;
}
function detectEnvironment ( ): Environment {
const env = process.env .NODE_ENV || "development" ;
: [] = [ , , ];
valid. (env ) ? (env ) : ;
}
( ): {
env = ();
: < , > = {
: ({
: ( ),
: ( ),
: ,
: process. . || ,
: ,
}),
: ({
: ( ),
: ( ),
: ,
: ( ),
: ,
}),
: ({
: ( ),
: ( ),
: ,
: ( ),
: ,
}),
};
config = configs[env]();
. ( );
config;
}
( ): {
value = process. [name];
(!value) ( );
value;
}
const
valid
Environment
"development"
"staging"
"production"
return
includes
as
Environment
as
Environment
"development"
export
function
getWebflowConfig
WebflowEnvConfig
const
detectEnvironment
const
configs
Record
Environment
() =>
WebflowEnvConfig
development
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN"
siteId
requireEnv
"WEBFLOW_SITE_ID"
maxRetries
1
webhookSecret
env
WEBFLOW_WEBHOOK_SECRET
""
debug
true
staging
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN_STAGING"
siteId
requireEnv
"WEBFLOW_SITE_ID_STAGING"
maxRetries
2
webhookSecret
requireEnv
"WEBFLOW_WEBHOOK_SECRET_STAGING"
debug
false
production
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN_PROD"
siteId
requireEnv
"WEBFLOW_SITE_ID_PROD"
maxRetries
3
webhookSecret
requireEnv
"WEBFLOW_WEBHOOK_SECRET_PROD"
debug
false
const
console
log
`[webflow] Environment: ${env} , Site: ${config.siteId.substring(0 , 8 )} ...`
return
function
requireEnv
name : string
string
const
env
if
throw
new
Error
`Missing required env var: ${name} `
return
Step 2: Environment Files
WEBFLOW_API_TOKEN=dev-token-here
WEBFLOW_SITE_ID=dev-site-id-here
WEBFLOW_WEBHOOK_SECRET=dev-webhook-secret
WEBFLOW_API_TOKEN_STAGING=staging-token-here
WEBFLOW_SITE_ID_STAGING=staging-site-id-here
WEBFLOW_WEBHOOK_SECRET_STAGING=staging-webhook-secret
WEBFLOW_API_TOKEN_PROD=prod-token-here
WEBFLOW_SITE_ID_PROD=prod-site-id-here
WEBFLOW_WEBHOOK_SECRET_PROD=prod-webhook-secret
WEBFLOW_API_TOKEN=your-token-here
WEBFLOW_SITE_ID=your-site-id-here
WEBFLOW_WEBHOOK_SECRET=your-webhook-secret
Step 3: Secret Management
AWS Secrets Manager
aws secretsmanager create-secret \
--name webflow/production \
--secret-string '{
"WEBFLOW_API_TOKEN": "prod-token",
"WEBFLOW_SITE_ID": "prod-site-id",
"WEBFLOW_WEBHOOK_SECRET": "prod-webhook-secret"
}'
aws secretsmanager get-secret-value \
--secret-id webflow/production \
--query SecretString --output text | jq .
import { SecretsManagerClient , GetSecretValueCommand } from "@aws-sdk/client-secrets-manager" ;
async function loadWebflowSecrets (env : string ) {
const client = new SecretsManagerClient ({});
const command = new GetSecretValueCommand ({
SecretId : `webflow/${env} ` ,
});
const response = await client.send (command);
const secrets = JSON .parse (response.SecretString !);
process.env .WEBFLOW_API_TOKEN_PROD = secrets.WEBFLOW_API_TOKEN ;
process.env .WEBFLOW_SITE_ID_PROD = secrets.WEBFLOW_SITE_ID ;
}
GCP Secret Manager
echo -n "prod-token" | gcloud secrets create webflow-api-token-prod --data-file=-
echo -n "prod-site-id" | gcloud secrets create webflow-site-id-prod --data-file=-
gcloud run deploy webflow-service \
--set-secrets="WEBFLOW_API_TOKEN_PROD=webflow-api-token-prod:latest,WEBFLOW_SITE_ID_PROD=webflow-site-id-prod:latest"
HashiCorp Vault
vault kv put secret/webflow/production \
api_token="prod-token" \
site_id="prod-site-id" \
webhook_secret="prod-webhook-secret"
vault kv get -field=api_token secret/webflow/production
Step 4: Environment Guards Prevent destructive operations in wrong environment:
function requireProduction (operation : string ): void {
const config = getWebflowConfig ();
if (config.debug ) {
throw new Error (
`${operation} is production-only. Current: ${detectEnvironment()} `
);
}
}
function blockProduction (operation : string ): void {
const env = detectEnvironment ();
if (env === "production" ) {
throw new Error (
`${operation} is blocked in production. Use staging for testing.`
);
}
}
async function publishSite (siteId : string ) {
requireProduction ("publishSite" );
await webflow.sites .publish (siteId, { publishToWebflowSubdomain : true });
}
async function deleteAllItems (collectionId : string ) {
blockProduction ("deleteAllItems" );
const { items } = await webflow.collections .items .listItems (collectionId);
const ids = items!.map (i => i.id !);
await webflow.collections .items .deleteItemsBulk (collectionId, { itemIds : ids });
}
Step 5: CI/CD Environment Matrix
name: Deploy Webflow Integration
on:
push:
branches: [main , staging ]
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
include:
- branch: staging
env: staging
token_secret: WEBFLOW_API_TOKEN_STAGING
site_secret: WEBFLOW_SITE_ID_STAGING
- branch: main
env: production
token_secret: WEBFLOW_API_TOKEN_PROD
site_secret: WEBFLOW_SITE_ID_PROD
if: github.ref == format('refs/heads/{0}', matrix.branch)
environment: ${{ matrix.env }}
env:
NODE_ENV: ${{ matrix.env }}
WEBFLOW_API_TOKEN: ${{ secrets[matrix.token_secret] }}
WEBFLOW_SITE_ID: ${{ secrets[matrix.site_secret] }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: "20"
- run: npm ci
- run: npm test
- name: Verify Webflow connectivity
run: |
curl -sf -H "Authorization: Bearer $WEBFLOW_API_TOKEN" \
https://api.webflow.com/v2/sites/$WEBFLOW_SITE_ID > /dev/null
- run: npm run deploy
Step 6: Environment Status Dashboard async function environmentReport ( ) {
for (const env of ["development" , "staging" , "production" ]) {
try {
process.env .NODE_ENV = env;
const config = getWebflowConfig ();
const webflow = new WebflowClient ({ accessToken : config.accessToken });
const site = await webflow.sites .get (config.siteId );
console .log (`[${env} ] ${site.displayName} — last published: ${site.lastPublished} ` );
} catch (error : any ) {
console .log (`[${env} ] ERROR: ${error.message} ` );
}
}
}
Output
Per-environment configuration with separate tokens and site IDs
Secret management via AWS/GCP/Vault
Environment guards preventing dangerous cross-environment operations
CI/CD matrix deploying to correct environment per branch
Environment status reporting
Error Handling Issue Cause Solution Wrong site in production Token/site mismatch Verify WEBFLOW_SITE_ID matches expected site Secret not found Wrong path/name Check secret manager path matches env Guard triggered Running prod operation in dev Set NODE_ENV correctly Missing env var .env not loaded dotenv.config({ path: ".env.development" })
Resources
Next Steps For observability setup, see webflow-observability.