Technical
Vercel Deployment: From Git Push to Live in 60 Seconds
Deployment used to involve SSH sessions, build scripts, nginx configuration, SSL certificates, and prayer. Now I push to git and my site is live in 60 seconds on Vercel's global edge network. Here is how to set it up.
What Vercel Does
Vercel is a deployment platform optimized for frontend frameworks, especially Next.js. When you push code to your git repository, Vercel automatically builds your project and deploys it to a global CDN. Every commit gets a unique preview URL. Merging to main deploys to production.
The Setup (5 Minutes)
- Create a Vercel account (free tier available)
- Import your GitHub repository
- Vercel detects Next.js automatically and configures the build
- Click Deploy
That is genuinely it. No build scripts to write. No server to configure. No SSL certificates to manage. Vercel handles all of it.
The Free Tier
Vercel's free tier includes:
- Unlimited personal projects
- 100GB bandwidth per month
- Serverless function execution
- Automatic HTTPS
- Preview deployments for every branch and commit
- Global CDN distribution
For a blog or portfolio, the free tier is more than enough.
Environment Variables
Store configuration in Vercel's environment variables, not in your code:
Vercel Dashboard -> Settings -> Environment Variables
API_URL = https://api.peaklight.ai
NEXT_PUBLIC_SITE_URL = https://peaklight.aiThese variables are injected at build time and runtime. Access them in your code with process.env.API_URL. Never commit secrets to git.
Custom Domains
Adding a custom domain takes two steps:
- Add the domain in Vercel's dashboard
- Update your DNS records to point to Vercel
DNS Records:
A record: 76.76.21.21
CNAME record: cname.vercel-dns.comVercel provisions an SSL certificate automatically. No Let's Encrypt configuration, no certificate renewal, no nginx setup.
Preview Deployments
Every pull request gets its own deployment URL. You can share this URL with clients or teammates for review before merging to production. This is one of Vercel's best features for collaborative development.
main branch: peaklight.ai (production)
feature/new-header: peaklight-ai-abc123.vercel.app (preview)The Development Workflow
- Develop locally with
npm run dev - Push to a feature branch
- Vercel builds and deploys a preview
- Review the preview URL
- Merge to main
- Vercel deploys to production (60 seconds)
No CI/CD pipeline to maintain. No deploy scripts. No server access. Just git push.
See the Vercel documentation for the complete platform guide.
RELATED READING
The Consulting Shift I Am Making In Year Two
After a year of writing and building, my consulting practice is changing shape. Shorter engagements. Sharper outcomes.
ReadThe Frontend Shift: Shipping Less JavaScript In Year Two
A year ago I reached for Next.js for everything. This year I often reach for nothing.
ReadThe Serverless Lesson I Would Write On A Sticky Note
After a year of shipping serverless projects, one rule explains most of the wins and all of the losses.
Read