skills/website/phases/04-deploy.md

Phase 4 — Deploy to Vercel

Deploy the generated site live. Takes ~2 minutes from build to live URL.

Prerequisites

# Check Vercel CLI is installed
vercel --version

# If not installed
npm i -g vercel@latest

# Check you're logged in
vercel whoami

Step 1 — Local Build Verification

Before deploying, run a local build to catch errors:

npm run build

Fix any TypeScript or module errors. Common issues:

• Missing 'use client' on components using useState/useEffect/useRef
• GSAP ScrollTrigger not registered (must be in a client component)
• framer-motion useMotionValue used in Server Component — extract to client component

Step 2 — Link to Vercel Project

vercel link

If this is a new project, answer the prompts:

• Scope: your team/personal account
• Project name: <brand.name>-site (lowercase, hyphenated)
• Root directory: . (current directory)

Step 3 — Deploy Preview

vercel

This deploys to a preview URL like https://<project>-<hash>.vercel.app.

Open the preview URL and verify:

• Hero animation plays on load
• Scroll triggers fire on scroll
• All sections render
• Mobile layout works (use browser dev tools at 390px)
• No console errors

Step 4 — Deploy Production

vercel --prod

This promotes the preview to https://<project>.vercel.app (or custom domain if configured).

Step 5 — Output Live URL

After deployment completes, present the user with:

Your site is live!

Preview: https://<project>-<hash>.vercel.app
Production: https://<project>.vercel.app

Built from: <source-url>

Optional: Custom Domain

vercel domains add <yourdomain.com>
vercel alias set <deployment-url> <yourdomain.com>

Optional: Environment Variables

If the site uses AI features (AI Gateway, Firecrawl API key in server actions):

vercel env add FIRECRAWL_API_KEY
vercel env pull .env.local   # pull all env vars locally

Deployment Checklist

• npm run build succeeds with zero errors
• vercel preview URL loads correctly
• Hero animation plays on preview URL
• Scroll animations work on preview URL
• Mobile layout verified at 390px width
• No console errors in browser devtools
• vercel --prod promoted to production
• Production URL shared with user