This guide covers the complete deployment process for migrating Leadership Legacy to Cloudflare infrastructure with Clay-inspired design enhancements.
Before starting, ensure you have:
SRt4Hz-Sk78lrbN0LMW49LkK_xGbE5CEeqT41_1ed3dbdd3e1ebbc28edf0ce756d9841490A ready-to-use CI workflow lives at .github/workflows/cloudflare.yml. Add the following repository secrets so pushes to main automatically build the static Next.js export, deploy the Worker API, and publish Cloudflare Pages:
CLOUDFLARE_API_TOKEN – API token with Workers + Pages accessCLOUDFLARE_ACCOUNT_ID – Your Cloudflare account ID (d3dbdd3e1ebbc28edf0ce756d9841490)CF_D1_DATABASE_ID – The D1 database UUID created belowCF_KV_NAMESPACE_ID – The KV namespace ID created belowCF_PAGES_PROJECT – The Pages project name (defaults to leadership-legacy if omitted)NEXT_PUBLIC_API_URL – Public API base (e.g. https://leadership-legacy.YOUR_SUBDOMAIN.workers.dev)Local environment variables are documented in .env.example (commit-safe).
npm install
Wrangler is already installed as a dev dependency. Authenticate with Cloudflare:
npx wrangler login
This will open a browser window for authentication. Alternatively, set the API token manually:
export CLOUDFLARE_API_TOKEN=SRt4Hz-Sk78lrbN0LMW49LkK_xGbE5CEeqT41_1e
export CLOUDFLARE_ACCOUNT_ID=d3dbdd3e1ebbc28edf0ce756d9841490
Or add to your shell profile (~/.bashrc, ~/.zshrc):
echo 'export CLOUDFLARE_API_TOKEN=SRt4Hz-Sk78lrbN0LMW49LkK_xGbE5CEeqT41_1e' >> ~/.bashrc
echo 'export CLOUDFLARE_ACCOUNT_ID=d3dbdd3e1ebbc28edf0ce756d9841490' >> ~/.bashrc
source ~/.bashrc
npm run cf:db:create
This creates a D1 SQLite database named leadership-legacy-db.
Expected Output:
✅ Successfully created DB 'leadership-legacy-db'
Database ID: [your-database-id]
Copy the Database ID from the output above and update wrangler.toml:
[[d1_databases]]
binding = "DB"
database_name = "leadership-legacy-db"
database_id = "YOUR_DATABASE_ID_HERE" # ← Replace this
npm run cf:db:migrate
This executes the SQL schema in schema/schema.sql, creating tables for:
Verify Tables:
npx wrangler d1 execute leadership-legacy-db --command="SELECT name FROM sqlite_master WHERE type='table';"
npm run cf:r2:create
This creates an R2 bucket named leadership-legacy-assets for storing:
npm run cf:kv:create
This creates a KV namespace for:
Expected Output:
🌀 Creating namespace...
✅ Success!
Add the following to your configuration file:
kv_namespaces = [
{ binding = "LEADERSHIP_CONFIG", id = "YOUR_KV_ID" }
]
Add the KV namespace ID to wrangler.toml:
[[kv_namespaces]]
binding = "CONFIG"
id = "YOUR_KV_ID_HERE" # ← Replace this
npm run cf:deploy
This deploys the Workers in workers/api/index.ts with the following endpoints:
curl https://leadership-legacy.YOUR_SUBDOMAIN.workers.dev/api/health
Expected Response:
{
"status": "healthy",
"environment": "production"
}
npm run cf:pages:build
This generates a static export in the out/ directory.
npm run cf:pages:deploy
Leadership-Legacy-Startup-Agency-Websitenpm run buildoutIn the Cloudflare Pages dashboard, add:
NEXT_PUBLIC_API_URL=https://leadership-legacy.YOUR_SUBDOMAIN.workers.dev
NODE_ENV=production
Click Save and Deploy. Cloudflare will build and deploy your site.
npm run dev
Visit http://localhost:3000
In a separate terminal:
npm run cf:dev
This starts Wrangler’s local development server at http://localhost:8787
Create .env.local:
cp .env.example .env.local
Edit .env.local:
NEXT_PUBLIC_API_URL=http://localhost:8787
NODE_ENV=development
# Health check
curl http://localhost:8787/api/health
# Test contact form
curl -X POST http://localhost:8787/api/contact \
-H "Content-Type: application/json" \
-d '{
"name": "Test User",
"email": "test@example.com",
"message": "Testing contact form"
}'
CLOUDFLARE_ACCOUNT_ID=d3dbdd3e1ebbc28edf0ce756d9841490
CLOUDFLARE_API_TOKEN=SRt4Hz-Sk78lrbN0LMW49LkK_xGbE5CEeqT41_1e
NEXT_PUBLIC_API_URL=http://localhost:8787
NODE_ENV=development
Set these in the Cloudflare Pages dashboard under Settings > Environment variables:
NEXT_PUBLIC_API_URL=https://leadership-legacy.YOUR_SUBDOMAIN.workers.dev
NODE_ENV=production
┌─────────────────────────────────────────────┐
│ Cloudflare Pages (Frontend) │
│ - Next.js 16 static export │
│ - Clay-inspired animations & UI │
│ - Gold/Navy brand colors │
└──────────────┬──────────────────────────────┘
│
├─────────────────────────────────┐
│ │
┌──────────────▼──────────────┐ ┌─────────────▼──────────────┐
│ Cloudflare Workers │ │ R2 Bucket │
│ - Contact form API │ │ - Images & media │
│ - Analytics tracking │ │ - Brand assets │
│ - Newsletter API │ │ - Portfolio content │
│ - Rate limiting │ └────────────────────────────┘
└──────────────┬──────────────┘
│
┌──────────────▼──────────────┐
│ D1 Database │
│ - Contact submissions │
│ - Analytics events │
│ - Newsletter subscribers │
└─────────────────────────────┘
┌─────────────────────────────┐
│ Workers KV Store │
│ - Feature flags │
│ - Configuration │
│ - Session data │
└─────────────────────────────┘
Problem: Schema migration fails with “table already exists”
Solution:
# Drop and recreate database (CAUTION: destroys data)
npx wrangler d1 delete leadership-legacy-db
npm run cf:db:create
npm run cf:db:migrate
Problem: Deployment fails with authentication error
Solution:
# Re-authenticate
npx wrangler logout
npx wrangler login
Problem: Frontend can’t reach Workers API
Solution:
npx wrangler deployments list.env.localworkers/api/index.tsProblem: Next.js build fails with module errors
Solution:
package.jsonrm -rf .next node_modules package-lock.json
npm install
npm run build
After deployment, verify these metrics using Lighthouse:
Key Metrics:
For issues or questions:
Last Updated: December 2025 Version: 1.0.0