How-To Guide
How to Deploy with Vercel
Vercel offers free hosting with automatic HTTPS, a global CDN, and GitHub integration. Here's how to deploy any project in under 10 minutes.
📋 What You'll Need
- A GitHub account (free)
- A Vercel account (free, sign up with GitHub)
- Your project files ready (HTML/CSS/JS, React, Next.js, etc.)
- 10 minutes of your time
✅ Vercel's Hobby plan is free forever for personal projects.
Push Your Code to GitHub
Open a terminal in your project folder and run:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin mainIf you've never used Git, see our Install Git guide first.
Sign Up at Vercel
Go to the official website:
👉 vercel.com
Click Sign Up and choose "Continue with GitHub". This authorises Vercel to read your repositories.
Import Your Repository
From the Vercel dashboard:
- Click Add New → Project
- Find your GitHub repo in the list
- Click Import
Vercel auto-detects your framework. For plain HTML sites, leave everything default.
Deploy
Click the blue Deploy button. Vercel will:
- Install dependencies
- Build your project
- Deploy to a global CDN
- Give you a URL like
your-project.vercel.app
The whole process takes about 30 seconds. 🎉
💡 Auto-deploys: Every push to main triggers a new production deploy. Every pull request gets its own preview URL. You never manually deploy again.
🌐 Adding a Custom Domain
- Go to Settings → Domains in your Vercel project
- Click Add and enter your domain
- Vercel shows DNS records to add at your registrar
- Add them and wait 5–60 minutes
- Vercel auto-issues an SSL certificate
Custom domains are optional. The free .vercel.app subdomain works fine for personal projects.
🔑 Environment Variables
If your app uses API keys, add them in Vercel rather than hardcoding them:
- Project → Settings → Environment Variables
- Add each key with its value
- Rebuild by pushing a new commit
Access them in your code:
const apiKey = process.env.MY_API_KEY;🔧 Troubleshooting
Build fails on Vercel but works locally
Usually a case-sensitive file path. Vercel's Linux build is case-sensitive; Windows and macOS are not. Check your imports.
404 on routes that work locally
Client-side routing (React Router, Vue Router) needs a rewrite rule. Add a vercel.json file with a wildcard rewrite to /index.html.
Site is slow on first load
Static sites on Vercel have no cold start. Serverless functions might. For static sites, this isn't an issue.
🎯 What's Next?
Now that your site is live, here are the next steps: