Vercel is the fastest way to get a website or app live on the internet. It's free for personal projects, handles all the server infrastructure for you, gives you a live URL the second you deploy, and auto-redeploys every time you push a change. For vibe coders, it's the default choice.

There are two ways to deploy to Vercel: drag-and-drop (fastest, no GitHub needed) and GitHub-connected (best for ongoing projects). This guide covers both.

Method 1 — Drag and Drop (Fastest)

Use this when you have a folder of files and you just want it live. No Git, no terminal, nothing to install.

01
Create a Vercel account
Go to vercel.com and sign up — free, no credit card needed. Sign in with GitHub if you have one, or email works fine too.
02
Go to the dashboard
Once logged in, you'll see your Vercel dashboard. Look for the big + New Project button or the Add New dropdown in the top right.
03
Drag your folder
On the new project screen, scroll down to find the drag-and-drop area. Drag your entire project folder (the one containing your index.html or package.json) directly onto it. Vercel detects your framework automatically.
04
Hit Deploy
Click the Deploy button. Vercel builds and deploys your project. Takes 10–60 seconds. When it's done, you get a live URL that looks like yourproject.vercel.app — share it immediately.
// TIP: For a static HTML site (just an index.html file), create a folder with your file inside it before dragging. Vercel needs a folder, not a single file.
// Advertisement //

Method 2 — GitHub Connected (Best for Ongoing Projects)

Connect your GitHub repo once. Every time you push to main, Vercel auto-redeploys. No manual steps required ever again.

01
Push your project to GitHub
If you don't have a GitHub account, create one free at github.com. Create a new repository (public or private), upload your files, and push.
02
Import to Vercel
On Vercel's new project screen, choose "Import Git Repository." Connect your GitHub account if prompted. Find your repo in the list and click Import.
03
Configure (usually skip this)
Vercel auto-detects Next.js, React, Vue, Vite, and most frameworks. For static HTML sites, make sure Framework Preset is set to "Other." You don't need to change anything else.
04
Deploy and forget
Click Deploy. Done. From now on, every push to your GitHub main branch automatically deploys. Your site is always up to date with whatever's in your repo.

Adding a Custom Domain

Your free Vercel URL (yourproject.vercel.app) works immediately. To use a custom domain you own:

Go to your project in Vercel → Settings → Domains → Add your domain. Vercel gives you DNS records to add in your domain registrar or Cloudflare. Copy the CNAME record, paste it in your DNS settings, and wait 5–30 minutes for it to propagate. Done — your custom domain is live.

Every push to GitHub.
Auto-deploys.
No manual steps.
Ever again.

Common Issues and Fixes

// ISSUE: "Build failed" — Usually a missing dependency or a file with a syntax error. Check the build logs in Vercel's dashboard for the exact error message. For static HTML sites, make sure your index.html doesn't reference files that don't exist.
// ISSUE: "requirements.txt parse error" — If you have a Python backend, make sure requirements.txt has no BOM character at the start. Open it in VS Code, look at the bottom-right for "UTF-8 with BOM" — if you see BOM, save it as plain UTF-8.
// ISSUE: Page loads but assets are missing — Check your file paths. In Vercel, paths are case-sensitive. If your CSS file is Style.css but your HTML links to style.css, it won't load on Vercel even if it works locally on Windows.
// Advertisement //

Vercel Pricing

The Hobby plan is completely free and covers most personal and small projects: unlimited deployments, 100GB bandwidth/month, custom domains, SSL certificates, and edge network distribution. You hit limits only when you're running serious production traffic, at which point the Pro plan ($20/user/month) makes sense.

For every app you build while learning vibe coding, the free plan is more than enough.