You've built your website — now what? Deploying your site has never been easier thanks to modern hosting platforms. This guide compares the top 3 free deployment platforms and walks you through deploying your first project step by step.
🏆 Platform Comparison
| Feature | Vercel | Netlify | Cloudflare Pages |
|---|---|---|---|
| Free Tier | 100GB bandwidth | 100GB bandwidth | Unlimited bandwidth |
| Build Time | 6000 min/mo | 300 min/mo | 500 builds/mo |
| Edge Network | Global CDN | Global CDN | 300+ PoPs |
| Serverless Functions | ✅ Edge + Node | ✅ Netlify Functions | ✅ Workers |
| Framework Support | Next.js (best) | All frameworks | All frameworks |
| Custom Domain | Free SSL | Free SSL | Free SSL |
🚀 Deploy on Vercel (Step-by-Step)
# 1. Install Vercel CLI
npm install -g vercel
# 2. Login
vercel login
# 3. Deploy from project root
vercel
# 4. Deploy to production
vercel --prod
# That's it! Your site is live at:
# https://your-project.vercel.app🔷 Deploy on Netlify
# 1. Install Netlify CLI
npm install -g netlify-cli
# 2. Login
netlify login
# 3. Initialize project
netlify init
# 4. Build and deploy
npm run build
netlify deploy --prod --dir=dist
# Or connect GitHub repo for auto-deploy:
# netlify.com → New Site → Import from Git☁️ Deploy on Cloudflare Pages
# Option 1: Via Dashboard
# 1. Go to dash.cloudflare.com → Pages
# 2. Connect GitHub/GitLab repo
# 3. Set build command: npm run build
# 4. Set output directory: dist
# 5. Click Deploy!
# Option 2: Via Wrangler CLI
npm install -g wrangler
wrangler login
wrangler pages deploy dist/🌐 Custom Domain Setup
# All 3 platforms follow similar steps:
# 1. Add your domain in the dashboard
# e.g., www.mysite.com
# 2. Update DNS records at your registrar:
# Type: CNAME
# Name: www
# Value: cname.vercel-dns.com (Vercel)
# your-site.netlify.app (Netlify)
# your-project.pages.dev (Cloudflare)
# 3. Wait for SSL certificate (usually < 5 minutes)
# 4. Enable "Force HTTPS" in settings⚡ CI/CD — Auto-Deploy on Git Push
All three platforms support automatic deployments when you push to GitHub:
- Push to main → Production deploy
- Push to feature branch → Preview deploy with unique URL
- Pull Request → Preview link posted as comment
🎯 Our Recommendation:
- Vercel — Best for Next.js and React projects
- Netlify — Best for static sites, forms, and simple backends
- Cloudflare Pages — Best for unlimited bandwidth and global speed
🔧 Environment Variables
# All platforms support env vars in dashboard:
# Settings → Environment Variables → Add
# Example .env.local (never commit this!)
VITE_API_URL=https://api.example.com
VITE_STRIPE_KEY=pk_live_xxx
DATABASE_URL=postgresql://user:pass@host/db
# Access in code:
const apiUrl = import.meta.env.VITE_API_URL;📊 Performance Tips
- Enable image optimization (Vercel Image, Cloudflare Polish)
- Use Cache-Control headers for static assets
- Enable Brotli compression (all 3 support it)
- Use lazy loading for images and routes
- Minimize JavaScript bundle size with tree shaking
