Deploying to Production: Automates GitHub repository creation and Vercel deployment for Next.js websites. Use when deploying new websites, pushing to production, setting up CI/CD pipelines, or when the user mentions deployment, GitHub, Vercel, or going live.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
name: Deploying to Production description: Automates GitHub repository creation and Vercel deployment for Next.js websites. Use when deploying new websites, pushing to production, setting up CI/CD pipelines, or when the user mentions deployment, GitHub, Vercel, or going live.
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 buildcompletes 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:
- Visit the deployment URL
- Test core functionality:
- Homepage loads correctly
- Navigation works
- Core features functional
- Check Core Web Vitals (use PageSpeed Insights)
- 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 creationdeploy-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
-
Set up monitoring:
- Add Google Analytics or Plausible
- Configure Google Search Console
- Set up Vercel Analytics
-
Configure custom domain (if needed):
- Add domain in Vercel dashboard
- Update DNS records
- Wait for SSL certificate
-
Enable automatic deployments:
- Push to
mainbranch auto-deploys to production - Push to other branches creates preview deployments
- Push to
For detailed troubleshooting, see TROUBLESHOOTING.md.
More by littleben
View allOfficial Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation
Internationalizing Websites: Adds multi-language support to Next.js websites with proper SEO configuration including hreflang tags, localized sitemaps, and language-specific content. Use when adding new languages, setting up i18n, optimizing for international SEO, or when user mentions localization, translation, multi-language, or specific languages like Japanese, Korean, Chinese.
自动同步项目中的 Agents.md、claude.md 和 gemini.md 文件,保持内容一致性。支持自动监听和手动触发。
Shipany AI-powered SaaS boilerplate documentation. Use when working with Shipany framework, Next.js 15, TypeScript, Drizzle ORM, NextAuth, payment integration, or building SaaS applications.
