Deploying to Production

Automated deployment workflow for Next.js websites using GitHub and Vercel.

When to use this Skill

• Creating a new website and need to deploy it
• Setting up GitHub repository for version control
• Deploying to Vercel production environment
• User mentions: "deploy", "GitHub", "Vercel", "go live", "publish"

Deployment Workflow

Copy this checklist and track your progress:

Deployment Progress:
- [ ] Step 1: Pre-deployment validation (build + E-E-A-T check)
- [ ] Step 2: Create GitHub repository
- [ ] Step 3: Push code to GitHub
- [ ] Step 4: Deploy to Vercel
- [ ] Step 5: Post-deployment verification

Step 1: Pre-deployment validation

Run build and verify no errors:

cd "$PROJECT_DIR"
npm run build

CRITICAL: Only proceed if build succeeds with no errors.

Pre-deployment checklist - See CHECKLIST.md for complete list: - [ ] npm run build completes successfully - [ ] All environment variables configured - [ ] E-E-A-T elements present (About page, author info) - [ ] Core Web Vitals acceptable - [ ] SEO meta tags complete

Step 2: Create GitHub repository

Run the script to create a private GitHub repository:

bash scripts/create-github-repo.sh <project-name>

What this script does: - Creates a private GitHub repository - Initializes Git (if needed) - Commits all changes - Pushes to GitHub

If the script fails, see TROUBLESHOOTING.md.

Step 3: Verify GitHub push

Check the repository URL:

gh repo view --web

Verify all files are pushed correctly.

Step 4: Deploy to Vercel

Run the deployment script:

bash scripts/deploy-to-vercel.sh <project-name>

What this script does: - Links the project to Vercel - Deploys to production environment - Returns deployment URL

If deployment fails, see TROUBLESHOOTING.md.

Step 5: Post-deployment verification

Verify deployment: 1. Visit the deployment URL 2. Test core functionality: - Homepage loads correctly - Navigation works - Core features functional 3. Check Core Web Vitals (use PageSpeed Insights) 4. Verify SEO meta tags (use browser inspector)

If issues found: - Review Vercel build logs: vercel logs - Check environment variables in Vercel dashboard - Verify DNS settings (if custom domain) - Return to Step 1 and fix issues

Only mark deployment complete when all verifications pass.

Script locations

All deployment scripts are in the scripts/ directory: - create-github-repo.sh - GitHub repository creation - deploy-to-vercel.sh - Vercel deployment

Important notes

Prerequisites: - GitHub CLI (gh) installed and authenticated - Vercel CLI installed and authenticated - Project must be in /Volumes/Time/go to wild/websites/ directory

Project naming convention: - Format: keyword-site-lang (e.g., pdf-converter-jp) - Use lowercase and hyphens only

Environment variables: - Configure in Vercel dashboard after first deployment - Required variables depend on project features (database, auth, etc.)

Next steps after deployment

1. Set up monitoring: - Add Google Analytics or Plausible - Configure Google Search Console - Set up Vercel Analytics

2. Configure custom domain (if needed): - Add domain in Vercel dashboard - Update DNS records - Wait for SSL certificate

3. Enable automatic deployments: - Push to main branch auto-deploys to production - Push to other branches creates preview deployments

For detailed troubleshooting, see TROUBLESHOOTING.md.