What you need
Three things, all free to start:
- Your website files on your computer (an
index.html, or a React, Next.js or Vite project). - A free GitHub account.
- A free Vercel account.
Step 1: Put your project on GitHub
Create a repository
On GitHub, click New repository, give it a name such as my-website, and click Create repository.
Upload your files
Open a terminal in your project folder and run these commands. Replace USERNAME and my-website with your own.
git init
git add .
git commit -m "First version"
git branch -M main
git remote add origin https://github.com/USERNAME/my-website.git
git push -u origin mainNo terminal? On the new repository page, click uploading an existing file and drag your files in.
Step 2: Sign up for Vercel
Continue with GitHub
Go to vercel.com, click Sign Up, choose the Hobby plan and pick Continue with GitHub. Allow Vercel to see your repositories.
Step 3: Import and deploy
Import your repository
In the Vercel dashboard, click Add New… → Project, find my-website in the list and click Import.
Check the settings
Vercel usually detects your framework by itself. For a plain HTML site, leave the settings as they are. If your project uses secret keys, add them under Environment Variables now.
Click Deploy
Wait a minute while Vercel builds your site. You get a live address like my-website.vercel.app that you can share right away.
Step 4: Add your own domain
Open your project → Settings → Domains, type your domain (for example yourshop.pk) and click Add. Vercel then shows the exact DNS records to add. Log in where you bought the domain (Namecheap, GoDaddy, Hostinger and so on), open its DNS settings, and add those records. Once they are found, Vercel sets up HTTPS for you.
Step 5: Update your site
Every time you push a change to the main branch on GitHub, Vercel builds and publishes the new version by itself. Changes pushed to other branches get their own preview link, so you can check them before they go live.
Deploy from the command line
If you prefer the terminal, install the Vercel CLI with Node.js and deploy straight from your project folder:
npm i -g vercel
vercel # creates a preview deployment
vercel --prod # publishes to your live addressCommon problems
The build failed
Open the deployment and read the build log. Most often a package is missing from package.json, or the build command or output folder is wrong in the project settings.
Pages show 404 when I refresh
Single-page apps (for example React with a router) need every address sent to index.html. Add a vercel.json file to your project:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}My API key doesn't work
Add it under Settings → Environment Variables, then redeploy. Keys added after a deployment only apply to the next one.
FAQ
Is Vercel really free?+
Do I need to know coding to use Vercel?+
Can I use my own .com or .pk domain?+
Founder, Rizwan's AI Agency. Builds websites, apps and AI tools for small businesses in the UK, UAE and Pakistan, and teaches the Hunar AI course in Urdu.
Stuck on a step?
Ask our assistant, or send your question on WhatsApp.