Infrastructure

Vercel: Deploy Anything

Put your website on the internet — for free — in under 2 minutes

You've built a website on your computer, but right now only you can see it. Deploying means putting it on the internet so anyone with the link can visit it. Vercel is a platform that makes this ridiculously easy — connect your code, and it handles everything else. No server setup, no complicated configuration.

What does Vercel actually do?

When you build a website on your computer, it only exists on your machine. Vercel takes your project files, builds them, and puts them on fast servers all around the world. When someone visits your URL, they get served from the closest server — making your site load quickly no matter where they are.

Hosting — your site lives on Vercel's servers, not yours
Auto-deploy — every time you update your code (via Git), Vercel automatically rebuilds and republishes
Preview links — when you're testing changes, Vercel gives you a temporary URL to preview before going live
Free SSL — your site gets https:// automatically (the padlock icon in the browser)

What you'll need first

A GitHub account (free — see Guide #5 if you don't have one)
Your project code pushed to a GitHub repository
A Vercel account — sign up at vercel.com using your GitHub account

If you don't have a project yet, that's fine — Vercel has starter templates you can deploy with one click to try it out.

Your first deploy

Go to vercel.com and sign in
Click "Add New…" → "Project"
Select the GitHub repo you want to deploy
Vercel auto-detects what kind of project it is (React, Next.js, Astro, plain HTML, etc.) and configures the build
Click "Deploy"
Wait about 60 seconds — you'll get a live URL like your-project.vercel.app

That's it. Seriously. From now on, every time you push code to GitHub, Vercel automatically rebuilds and updates your site.

Claude Code can do this for you

You can ask Claude Code: "Deploy this project to Vercel" — it can set up the Vercel configuration, push your code, and walk you through connecting the repo.

Environment variables (keeping secrets safe)

If your project uses an API key or password (like a database connection or an AI API key), you should never put it directly in your code. Instead, store it as an environment variable on Vercel — a secret value that your code can access but that isn't visible in your source code.

In Vercel: go to your project → Settings → Environment Variables
Add a name (like ANTHROPIC_API_KEY) and a value (your actual key)
In your code, access it with process.env.ANTHROPIC_API_KEY

What does it cost?

Free tier — generous enough for most personal and hobby projects
Unlimited static sites, 100 GB bandwidth/month
The paid tier ($20/month) adds more bandwidth, team features, and commercial use

When to use Vercel vs. other options

Vercel — best for frontend sites and Next.js/Astro/React apps
Netlify — similar to Vercel, also excellent, slight different feature set
GitHub Pages — free, but only for simple static sites (no server-side code)
Fly.io / Railway — when you need a full backend server running 24/7 (not just serverless)

Try this now

If you have a project on GitHub, import it to Vercel right now — it takes 2 minutes and you'll have a live URL to share. If you don't have a project yet, go to vercel.com/templates and deploy a starter template with one click.

← Guide 6 All Guides Guide 8 →