Deploy

Skill: Deployment

Help users deploy their portfolio to production.

Quick Deploy

Ask your AI assistant:

"Deploy my portfolio to Vercel"

The assistant can run CLI commands (vercel, netlify, gh) to deploy for you.

Pre-Deployment Checklist

Before deploying, verify:

• npm run build succeeds with no errors
• All images moved to /public and paths updated
• Environment variables documented (if any)
• Links are valid (GitHub, LinkedIn, project URLs)
• No placeholder content ("Lorem ipsum", "TODO", etc.)
• Responsive design works on mobile
• Favicon and meta tags set

Deployment Options

1. Vercel (Recommended)

Why: Zero-config for Next.js, free tier, automatic HTTPS, preview deployments.

Steps:

# Install Vercel CLI
npm i -g vercel

# Deploy (first time - will prompt for setup)
vercel

# Deploy to production
vercel --prod

Or via GitHub:

1. Push to GitHub
2. Go to vercel.com
3. Import repository
4. Vercel auto-detects Next.js settings
5. Click Deploy

Custom Domain:

# Add domain in Vercel dashboard, then:
vercel domains add yourdomain.com

2. Netlify

Steps:

# Install Netlify CLI
npm i -g netlify-cli

# Build first
npm run build

# Deploy
netlify deploy --prod --dir=.next

Or via GitHub:

1. Push to GitHub
2. Go to netlify.com
3. "New site from Git"
4. Build command: npm run build
5. Publish directory: .next

3. Cloudflare Pages

Steps:

1. Push to GitHub
2. Go to Cloudflare Pages dashboard
3. Connect repository
4. Build settings:
   • Framework: Next.js
   • Build command: npm run build
   • Output: .next

4. GitHub Pages (Static Export)

Note: Requires static export, no server features.

Important: You need your own GitHub repository first. If you cloned the Persona template, create your own repo:

# Remove template remote and create your own repo
git remote remove origin
gh repo create my-portfolio --public --source=. --push

Steps:

1. Add to next.config.ts:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true }
};

2. Build:

npm run build

3. Push to your repo and enable GitHub Pages in Settings → Pages → Source: GitHub Actions

5. Self-Hosted (Docker)

Dockerfile:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Run:

docker build -t portfolio .
docker run -p 3000:3000 portfolio

Environment Variables

If using environment variables:

1. Local: Create .env.local
2. Vercel: Add in Project Settings → Environment Variables
3. Netlify: Add in Site Settings → Environment
4. Docker: Pass with -e or use .env file

Custom Domain Setup

General Steps

1. Add domain in hosting provider
2. Update DNS records:
   • A record: Points to hosting IP
   • CNAME: Points to hosting subdomain
3. Wait for DNS propagation (up to 48h, usually minutes)
4. SSL certificate auto-provisions

Common Providers

• Vercel: Automatic SSL, add domain in dashboard
• Netlify: Automatic SSL, add domain in dashboard
• Cloudflare: Automatic SSL + CDN

Post-Deployment

After deploying:

1. Test the live site

   • Check all pages load
   • Test on mobile
   • Verify images load
   • Click all links

2. Set up analytics (optional)

   • Vercel Analytics (built-in)
   • Plausible (privacy-focused)
   • Google Analytics

3. Submit to search engines (optional)

   • Google Search Console
   • Bing Webmaster Tools

Troubleshooting

Build Fails

• Check npm run build locally first
• Review error messages for missing dependencies
• Ensure all imports are valid

Images Not Loading

• Move to /public folder
• Use absolute paths: /images/photo.jpg
• Check case sensitivity (Linux is case-sensitive)

404 on Routes

• For static export: ensure generateStaticParams for dynamic routes
• Check next.config.ts for trailingSlash setting

Slow Performance

• Run Lighthouse audit
• Optimize images (use next/image)
• Check for large bundle sizes

CI/CD with GitHub Actions

Pre-configured workflows in .github/workflows/:

Vercel (deploy-vercel.yml)

Auto-deploy on push to main. Setup:

1. Import repo at vercel.com
2. Run vercel link locally to get IDs
3. Add GitHub secrets:
   • VERCEL_TOKEN (from vercel.com/account/tokens)
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID

GitHub Pages (deploy-pages.yml)

Static export to GitHub Pages. Setup:

1. Enable in repo Settings → Pages → Source: GitHub Actions
2. Ensure next.config.ts has output: 'export'

MCP Integration

MCP (Model Context Protocol) enables AI-driven deployment. Supported by Claude Code, Codex, and Gemini CLI.

Setup: Run ./bin/setup.sh and select "Yes" when asked about deployment integration.

Manual Setup by CLI

Claude Code

claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN="your-token" -- npx -y @modelcontextprotocol/server-github
claude mcp add vercel -e VERCEL_API_TOKEN="your-token" -- npx -y vercel-mcp-server

Codex

codex mcp add github -- npx -y @modelcontextprotocol/server-github
codex mcp add vercel -- npx -y vercel-mcp-server

Then set environment variables: GITHUB_PERSONAL_ACCESS_TOKEN, VERCEL_API_TOKEN

Gemini CLI

Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token" }
    },
    "vercel": {
      "command": "npx",
      "args": ["-y", "vercel-mcp-server"],
      "env": { "VERCEL_API_TOKEN": "your-token" }
    }
  }
}

Get Tokens

• GitHub: https://github.com/settings/tokens (scopes: repo, read:user)
• Vercel: https://vercel.com/account/tokens

Usage

Once configured, just ask your AI assistant:

• "Deploy my portfolio to Vercel"
• "Create a GitHub repo and deploy to GitHub Pages"

Shell Commands (All CLIs)

Any AI assistant can deploy using standard CLI tools (no MCP required).

GitHub Pages via gh CLI

First, ensure you have your own repo (not the template):

# Check current remote
git remote -v

# If it points to the template repo, remove it and create your own:
git remote remove origin
gh repo create my-portfolio --public --source=. --push

Then enable GitHub Pages:

# Enable GitHub Pages with Actions
gh api repos/{owner}/{repo}/pages -X POST -f build_type=workflow

Requires:

1. gh CLI installed and authenticated (gh auth login)
2. Your own GitHub repository (not the template)
3. Static export in next.config.ts:

   output: 'export',
   images: { unoptimized: true }
   

Vercel via CLI

npm i -g vercel
vercel --prod

Netlify via CLI

npm i -g netlify-cli
netlify deploy --prod