littleben/Deploying to Production

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.