This is a step-by-step visual guide to help you set up the required GitHub secrets for automated deployment.
You need to add 3 secrets to GitHub so it can automatically deploy to Vercel:
┌─────────────────────────────────────────────────────┐
│ GitHub Repository │
│ ┌───────────────────────────────────────────────┐ │
│ │ Secrets (Hidden Configuration) │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ VERCEL_TOKEN = abc123... │ │ │
│ │ │ VERCEL_ORG_ID = team_xyz... │ │ │
│ │ │ VERCEL_PROJECT_ID = prj_abc... │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
↓
Used by
↓
┌─────────────────────────────────────────────────────┐
│ GitHub Actions Workflow │
│ (Automatically deploys to Vercel) │
└─────────────────────────────────────────────────────┘
URL: https://vercel.com/account/tokens
┌─────────────────────────────────────────────────────┐
│ Vercel Dashboard │
│ ┌───────────────────────────────────────────────┐ │
│ │ Personal Account Tokens │ │
│ │ │ │
│ │ [Create Token] ← Click this button │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Fill in the form:
┌─────────────────────────────────────────────────────┐
│ Create Token │
│ ┌───────────────────────────────────────────────┐ │
│ │ Token Name: GitHub Actions │ │
│ │ Scope: ● Full Account │ │
│ │ Expiration: ○ No Expiration │ │
│ │ │ │
│ │ [Create] ← Click this │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
IMPORTANT: Copy immediately! You won't see it again!
┌─────────────────────────────────────────────────────┐
│ Token Created Successfully │
│ ┌───────────────────────────────────────────────┐ │
│ │ vercel_abc123def456ghi789jkl012mno345pqr678 │ │
│ │ [Copy] ← Click to copy │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ⚠️ Save this token now. You won't see it again! │
└─────────────────────────────────────────────────────┘
Save this as: VERCEL_TOKEN
Open your terminal:
npm install -g vercel┌─────────────────────────────────────────────────────┐
│ Terminal │
│ ┌───────────────────────────────────────────────┐ │
│ │ $ npm install -g vercel │ │
│ │ ✓ Installed vercel@latest │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
git clone https://github.com/christophernemala/tutorialkit.git
cd tutorialkit┌─────────────────────────────────────────────────────┐
│ Terminal │
│ ┌───────────────────────────────────────────────┐ │
│ │ $ git clone https://github.com/... │ │
│ │ Cloning into 'tutorialkit'... │ │
│ │ $ cd tutorialkit │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
vercel login┌─────────────────────────────────────────────────────┐
│ Terminal │
│ ┌───────────────────────────────────────────────┐ │
│ │ $ vercel login │ │
│ │ > Opening browser to authenticate... │ │
│ │ ✓ Success! Logged in as you@email.com │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
vercel link┌─────────────────────────────────────────────────────┐
│ Terminal - Interactive Prompts │
│ ┌───────────────────────────────────────────────┐ │
│ │ ? Set up and deploy? Yes │ │
│ │ ? Which scope? Your Account │ │
│ │ ? Link to existing project? No │ │
│ │ ? What's your project's name? tutorialkit │ │
│ │ ? In which directory? ./ (press Enter) │ │
│ │ │ │
│ │ ✓ Linked to your-account/tutorialkit │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
cat .vercel/project.json┌─────────────────────────────────────────────────────┐
│ Terminal - Output │
│ ┌───────────────────────────────────────────────┐ │
│ │ { │ │
│ │ "orgId": "team_abc123xyz456", │ │
│ │ "projectId": "prj_def789ghi012" │ │
│ │ } │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Copy these values:
orgId→ Save asVERCEL_ORG_IDprojectId→ Save asVERCEL_PROJECT_ID
URL: https://github.com/christophernemala/tutorialkit/settings/secrets/actions
┌─────────────────────────────────────────────────────┐
│ GitHub Repository Settings │
│ ┌───────────────────────────────────────────────┐ │
│ │ Secrets and variables > Actions │ │
│ │ │ │
│ │ Repository secrets (0) │ │
│ │ │ │
│ │ [New repository secret] ← Click this │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Click "New repository secret":
┌─────────────────────────────────────────────────────┐
│ New secret │
│ ┌───────────────────────────────────────────────┐ │
│ │ Name * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ VERCEL_TOKEN │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Secret * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ vercel_abc123def456ghi789... │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [Add secret] ← Click this │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Click "New repository secret" again:
┌─────────────────────────────────────────────────────┐
│ New secret │
│ ┌───────────────────────────────────────────────┐ │
│ │ Name * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ VERCEL_ORG_ID │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Secret * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ team_abc123xyz456 │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [Add secret] ← Click this │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Click "New repository secret" one more time:
┌─────────────────────────────────────────────────────┐
│ New secret │
│ ┌───────────────────────────────────────────────┐ │
│ │ Name * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ VERCEL_PROJECT_ID │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Secret * │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ prj_def789ghi012 │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [Add secret] ← Click this │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
You should now see:
┌─────────────────────────────────────────────────────┐
│ Repository secrets (3) │
│ ┌───────────────────────────────────────────────┐ │
│ │ VERCEL_TOKEN Updated 1 minute ago │ │
│ │ VERCEL_ORG_ID Updated 2 minutes ago │ │
│ │ VERCEL_PROJECT_ID Updated 3 minutes ago │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
✅ Perfect! All secrets are configured!
echo "# Test auto-deploy" >> README.mdgit add .
git commit -m "test: trigger automated deployment"
git push origin main┌─────────────────────────────────────────────────────┐
│ Terminal │
│ ┌───────────────────────────────────────────────┐ │
│ │ $ git add . │ │
│ │ $ git commit -m "test: trigger deployment" │ │
│ │ [main abc1234] test: trigger deployment │ │
│ │ $ git push origin main │ │
│ │ Enumerating objects: 5, done. │ │
│ │ Writing objects: 100% (3/3), done. │ │
│ │ ✓ Pushed to main │ │
│ │ $▊ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Go to: https://github.com/christophernemala/tutorialkit/actions
┌─────────────────────────────────────────────────────┐
│ GitHub Actions │
│ ┌───────────────────────────────────────────────┐ │
│ │ 🟡 Production Deployment │ │
│ │ test: trigger automated deployment │ │
│ │ ├─ ✅ Quality Checks (2m 30s) │ │
│ │ ├─ 🟡 Build (running...) │ │
│ │ └─ ⏸️ Deploy (waiting...) │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
After 5-10 minutes:
┌─────────────────────────────────────────────────────┐
│ GitHub Actions │
│ ┌───────────────────────────────────────────────┐ │
│ │ ✅ Production Deployment │ │
│ │ test: trigger automated deployment │ │
│ │ ├─ ✅ Quality Checks (2m 30s) │ │
│ │ ├─ ✅ Build (5m 15s) │ │
│ │ └─ ✅ Deploy (1m 45s) │ │
│ │ │ │
│ │ 🚀 Deployed to: │ │
│ │ https://tutorialkit-xyz.vercel.app │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
🎉 Success! Your platform is live!
After setup, verify everything works:
- All 3 secrets added to GitHub
- Secrets have correct names (case-sensitive)
- Test push triggered workflow
- Workflow completed successfully
- Deployment URL is accessible
- Platform loads correctly
- WebContainer works
VERCEL_TOKEN
VERCEL_ORG_ID
VERCEL_PROJECT_ID
| Secret | Where to Get It |
|---|---|
VERCEL_TOKEN |
https://vercel.com/account/tokens |
VERCEL_ORG_ID |
.vercel/project.json (after vercel link) |
VERCEL_PROJECT_ID |
.vercel/project.json (after vercel link) |
https://github.com/christophernemala/tutorialkit/settings/secrets/actions
VERCEL-TOKEN ← Wrong (has dash)
vercel_token ← Wrong (lowercase)
VERCEL_TOKEN ← Correct! ✅
Only added 2 secrets ← Wrong
Need all 3 secrets ← Correct! ✅
Copied wrong ID from Vercel ← Wrong
Used orgId from project.json ← Correct! ✅
You've successfully set up automated deployment!
Now every time you push code:
- GitHub Actions automatically builds
- Deploys to Vercel
- Your changes go live!
No manual deployment needed! 🚀
- Create your first tutorial
- Customize your platform
- Share with the world!
- GitHub Secrets: https://github.com/christophernemala/tutorialkit/settings/secrets/actions
- Vercel Tokens: https://vercel.com/account/tokens
- GitHub Actions: https://github.com/christophernemala/tutorialkit/actions
- Vercel Dashboard: https://vercel.com/dashboard
Need help? Check SETUP_VERCEL_SECRETS.md for detailed troubleshooting!
Happy deploying! ✨