From local code to a live site with custom domain and free SSL — in about 10 minutes. Everything you need, nothing you don't.
Here's the full deployment flow at a glance. Your code lives on GitHub, Vercel watches for changes, builds your site automatically, and serves it worldwide via a global CDN. You just point your domain and you're done.
Vercel's edge network builds and deploys in ~30 seconds for most projects. No waiting, no configuration.
Your site is served from data centers around the world, so users load it fast no matter where they are.
HTTPS certificates are issued and renewed automatically. No Let's Encrypt scripts, no nginx configs.
Every pull request gets its own preview URL so you can test changes before merging to production.
Make sure you have these set up first. Most take less than 2 minutes each.
macOS, Windows, or Linux. You'll use the terminal (Terminal on Mac, PowerShell or CMD on Windows).
Download from git-scm.com. Verify with git --version.
Only if using React, Next.js, Vite, etc. Get LTS from nodejs.org. Check with node -v.
Plain HTML/CSS/JS, or a framework project. At minimum an index.html in your project root.
First time with Git? After installing, run git config --global user.name "Your Name" and git config --global user.email "you@example.com" once so Git knows who's making commits.
GitHub is where your code lives. Vercel reads from it and redeploys every time you push changes.
Go to github.com → Sign up (free) → Click "New Repository" (green button, top right) → Name it (e.g. my-website) → Set to Public (free tier) or Private → Leave README/gitignore unchecked for now → Create repository.
Naming tip: Use lowercase letters, numbers, and hyphens only. Avoid spaces and special characters (e.g. portfolio-v2, not My Portfolio!).
Open your terminal, navigate to your project folder, and run these commands one by one:
# Navigate to your project folder cd /path/to/your-project # Initialize Git in this folder git init # Stage all files for commit git add . # Save a snapshot with a message git commit -m "Initial commit" # Link to your GitHub repo (replace YOU/REPO) git remote add origin https://github.com/YOU/REPO.git # Rename default branch to 'main' git branch -M main # Push code to GitHub git push -u origin main
First push asking for a password? GitHub requires a Personal Access Token (PAT) instead of your password. Go to GitHub → Settings → Developer settings → Personal access tokens → Generate new. Use the token as your password when prompted, or install GitHub CLI (gh auth login) for an easier flow.
.gitignore (recommended)Create a file named .gitignore in your project root to prevent uploading junk like node_modules and secrets:
# Dependencies node_modules/ .pnp .pnp.js # Build output dist/ build/ .next/ out/ # Environment variables (NEVER commit these) .env .env.local .env.*.local # Editor / OS .DS_Store Thumbs.db .vscode/ .idea/ # Logs *.log npm-debug.log*
Open github.com/YOUR_USERNAME/YOUR_REPO in your browser — you should see all your files listed there. ✅
Four clicks and your site is live. Vercel handles the build, CDN, SSL, and scaling for you.
Go to vercel.com → "Sign Up" → "Continue with GitHub" → Authorize Vercel to access your repos.
Click "Add New → Project" → Find your GitHub repo in the list → Click "Import".
Vercel auto-detects your framework. For plain HTML, leave defaults. Add env vars if needed → Click "Deploy".
In ~30 seconds your site is live at yourproject.vercel.app. Every future push auto-redeploys!
Pro tip: Every git push triggers Vercel to rebuild and redeploy automatically — no manual steps needed! Pushes to other branches create preview URLs, and pushes to main update production.
Vercel auto-detects most popular frameworks. Here are the default build settings it uses — and how to override them if your setup is custom. Click a tab below.
| Setting | Value |
|---|---|
| Framework Preset | Other |
| Build Command | (none) |
| Output Directory | ./ (root) |
| Install Command | (none) |
Just ship index.html and assets. No build step needed. Vercel serves files directly from your repo root.
| Setting | Value |
|---|---|
| Framework Preset | Next.js |
| Build Command | next build |
| Output Directory | .next |
| Install Command | npm install |
Vercel built Next.js — zero config. Server components, API routes, ISR, image optimization, and middleware all work automatically.
| Setting | Value |
|---|---|
| Framework Preset | Create React App |
| Build Command | npm run build |
| Output Directory | build |
| Install Command | npm install |
Heads up: Create React App is no longer actively maintained. For new projects, consider Vite or Next.js instead.
| Setting | Value |
|---|---|
| Framework Preset | Vite |
| Build Command | npm run build |
| Output Directory | dist |
| Install Command | npm install |
Works with React, Vue, Svelte, Solid, and more. Vercel auto-detects Vite from your package.json.
| Setting | Value |
|---|---|
| Framework Preset | Astro |
| Build Command | npm run build |
| Output Directory | dist |
| Install Command | npm install |
For server-side rendering, install the Vercel adapter: npm install @astrojs/vercel, then add it to astro.config.mjs.
Custom config? You can create a vercel.json file in your repo root to override anything — build commands, redirects, headers, rewrites, and more.
Got a custom domain? Here's how to point it to your Vercel site. Works with any registrar — GoDaddy, Namecheap, Google Domains, Cloudflare, etc.
Go to your project dashboard → Settings → Domains → Enter your domain (e.g. yourdomain.com) → Click Add. Vercel will show you the DNS records you need to add at your registrar.
Log in to your registrar (GoDaddy, Namecheap, Cloudflare, etc.) → Find DNS Settings (sometimes called "Manage DNS" or "Zone File") → Add these two records:
| Type | Name / Host | Value / Points To | Use Case |
|---|---|---|---|
| A | @ | 76.76.21.21 | Root (yourdomain.com) |
| CNAME | www | cname.vercel-dns.com | www subdomain |
Naming varies by registrar: Some call Name "Host" and Value "Points To" or "Target". Always use the exact values shown on your Vercel dashboard — they occasionally differ based on your setup.
DNS changes take anywhere from a few minutes to 48 hours to propagate worldwide. Vercel automatically issues a free SSL certificate once it detects the records.
Check propagation status at dnschecker.org — type your domain to see if DNS resolves correctly from multiple locations around the world.
Using Cloudflare? Set the DNS record to "DNS only" (grey cloud), not "Proxied" (orange cloud). Vercel handles the CDN — a double proxy causes SSL errors.
API keys, database URLs, and any secret values should never be committed to GitHub. Use environment variables instead.
Create a .env.local file in your project root (and make sure it's in .gitignore):
# API keys (keep server-side, never expose) DATABASE_URL="postgres://user:pass@host/db" STRIPE_SECRET_KEY="sk_live_..." # For Next.js: NEXT_PUBLIC_ prefix = exposed to browser NEXT_PUBLIC_API_URL="https://api.example.com" # For Vite: VITE_ prefix = exposed to browser VITE_SUPABASE_URL="https://xyz.supabase.co"
In your project dashboard → Settings → Environment Variables → Enter key and value → Choose which environments to apply to:
| Environment | When it applies |
|---|---|
| Production | Deploys from main branch |
| Preview | Deploys from PRs and other branches |
| Development | Local dev via vercel dev |
Environment variables only take effect on new deployments. After adding them, trigger a new deploy via the Vercel dashboard (Deployments → Redeploy) or push a new commit.
Never commit secrets to Git. If you accidentally push an API key, rotate it immediately at the provider's dashboard — the key is forever public once it's in Git history, even if you delete the file later.
After initial setup, updating is just three commands. No SSH, no FTP, no file managers.
# After making changes to your files: # 1. Stage all changes git add . # 2. Commit with a descriptive message git commit -m "Update: describe your changes" # 3. Push → Vercel auto-deploys! git push # Live site updates in ~30 seconds ✅
Create a branch, push it, open a PR — Vercel gives you a unique preview URL so you can test before merging.
Bad deploy? Go to Deployments → find the previous working one → click "Promote to Production". Zero downtime.
Enable Web Analytics in the dashboard to see real-time visitor counts, page views, and Core Web Vitals.
Check build and runtime logs in the Vercel dashboard to debug errors or monitor what's happening.
.gitignore set up (no secrets or node_modules)yourdomain.com 🎉Hit a wall? These are the most common deployment issues and how to fix them fast.
Open the build log in Vercel (Deployments → click the failed one → view logs). Scroll to the red error text. Most common causes:
npm install <pkg> locally, commit the updated package.json, push.ignoreBuildErrors: true in your config.Single-page apps (React Router, Vue Router) need a rewrite rule so all routes fall back to index.html. Add a vercel.json in your repo root:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
DNS records haven't propagated yet or are pointing wrong. Quick checks:
76.76.21.21.Three things to check:
NEXT_PUBLIC_, Vite needs VITE_, CRA needs REACT_APP_.Usually a case-sensitivity mismatch. macOS and Windows filesystems aren't case-sensitive by default, but Vercel's Linux build servers are. Check that your import paths match file names exactly:
import Button from './Button' won't find ./button.jsx.dependencies (not just devDependencies) if it's needed at runtime.Open your live site, then open browser DevTools → Console. Look for red errors:
src="./img.png" usually work better than src="/img.png" unless you're sure about your base URL.index.html is actually in the directory you specified.base setting if not deploying to the domain root.Yes, for personal projects and hobby use. The Hobby plan includes generous limits on bandwidth, build minutes, and deployments. You only need a paid plan (Pro) if you want commercial use, team features, priority support, or have high traffic. Check current limits at vercel.com/pricing.
Both are excellent. Vercel is built by the Next.js team and is the best choice for Next.js projects (zero config, first-class support). Netlify is more framework-agnostic and has slightly different serverless function pricing. For most static sites, either works great.
Yes. Vercel also supports GitLab and Bitbucket. You can also deploy directly from your terminal using the Vercel CLI: npm i -g vercel, then run vercel in your project folder.
You can buy from any registrar — popular options: Namecheap, Porkbun, Cloudflare Registrar (at-cost pricing), or directly through Vercel (Vercel → Domains → Buy). Prices range from $10-15/year for .com, more for fancier TLDs.
Yes, via Serverless Functions or Edge Functions. Create an api/ folder (Next.js API routes) or configure serverless functions in your framework of choice. Vercel handles scaling automatically, but note the Hobby plan has execution time limits (check their docs).
Go to Project → Settings → General → Delete Project. This removes the deployment but keeps your GitHub repo. To also disconnect Vercel from GitHub, revoke access at GitHub → Settings → Applications → Authorized OAuth Apps.
Password protection and team-only access are available on the Pro plan. Go to Project → Settings → Deployment Protection. For the free plan, you can use Vercel's "Vercel Authentication" to require login with your Vercel account.
Vercel is SOC 2 Type 2 compliant and uses HTTPS by default. That said, you're still responsible for your own application security — sanitize user input, validate auth, keep dependencies updated, and never commit secrets to Git.
Create repos, push code, manage branches and pull requests.
Import GitHub repo, manage deployments, add domains, set env vars.
Check if your DNS records have propagated globally across regions.
Official documentation — deep dives on every feature and framework.
Vercel automatically handles HTTPS — no extra setup or renewal needed.
Install: npm i -g vercel. Deploy from terminal with vercel.