GitHub Actions CI + Vercel CD
Every push to main triggers GitHub Actions to lint and validate, then Vercel automatically deploys the new version — zero manual steps.
How It Works
This portfolio uses a split CI/CD strategy. GitHub Actions handles the Continuous Integration (validating code quality), while Vercel handles the Continuous Deployment (building and serving the app globally).
- Checkout code
- Install dependencies
- Run ESLint
- Build validation
- Detects push to main
- Optimized Next.js build
- Global CDN deployment
- Preview URLs for PRs
Pipeline Simulation
Click Run Pipeline to simulate the full flow. The first 4 steps run on GitHub Actions; the last 2 are handled automatically by Vercel.
Pipeline Simulation
GitHub Actions (CI) → Vercel (CD)
GitHub Actions Workflow
The CI workflow is defined at .github/workflows/ci-cd.yml. It runs on every push and pull request to main, catching lint errors and build failures before Vercel deploys.
name: CI — Lint & Build Check
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
validate:
name: Lint & Build Check
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
cache: "npm"
- name: Install dependencies
run: npm ci
- name: Run ESLint
run: npm run lint
- name: Build Next.js app
run: npm run buildVercel Auto Deployment
Vercel is connected directly to the GitHub repository. Once a push lands on main, Vercel automatically picks it up, runs an optimized Next.js build, and deploys it globally via its edge CDN.