How to Host a Static Website for Free on Vercel (Step by Step)

What you need before you start

• A folder with an index.html file (and your CSS, JavaScript and images).
• A free GitHub account and Git installed on your computer.
• A free Vercel account (sign in with GitHub, it is the simplest option).

Step 1: Put your project on GitHub

Open a terminal in your project folder and run:

git init
git add .
git commit -m "First version of my website"
git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git
git push -u origin main

Create the empty repository on GitHub first (the green New button), then paste its URL in the git remote add line.

Step 2: Import the repository in Vercel

1. In the Vercel dashboard choose Add New and then Project.
2. Pick your GitHub repository and click Import.
3. For a plain HTML site choose the Other framework preset. Leave Build Command and Output Directory empty so Vercel serves your files as they are.
4. Click Deploy. After a short wait you get a free address like your-project.vercel.app.

From now on, every git push to the main branch publishes a new version automatically. Other branches get their own preview links, which is handy for testing changes.

Step 3: Connect your own domain

1. Buy a domain from any registrar.
2. In your Vercel project open Settings, then Domains, and add your domain (for example www.example.com).
3. Vercel shows the exact DNS records to create. Add them in your registrar's DNS panel. Usually this is a record for the bare domain and a CNAME record for www.
4. Wait for DNS to update (often minutes, sometimes a few hours). Vercel then issues the HTTPS certificate for you.

Choose one version as the main address, either example.com or www.example.com, and let the other redirect to it. Search engines should see a single address for each page.

Step 4: Clean URLs and redirects with vercel.json

Create a file named vercel.json in your project root. This example removes .html from addresses and permanently redirects an old address to a new one:

{
  "cleanUrls": true,
  "trailingSlash": false,
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

permanent: true sends a permanent (308) redirect, which tells search engines to move the old address's ranking to the new one. Use false for a temporary redirect.

Step 5 (optional): Deploy from the command line

npm install -g vercel
vercel          # creates a preview deployment
vercel --prod   # publishes to your production domain

The first run asks you to log in and link the folder to a project. After that the two commands above are all you need.

Mistakes we made (so you can skip them)

• Folder names are case-sensitive. Vercel runs on Linux, so /Shayaries/ and /shayaries/ are different addresses. A link that works on your Windows or Mac computer can return a 404 online. Keep one spelling and use it everywhere.
• Old misspelled addresses kept getting traffic. We had pages indexed under addresses with typos and apostrophes. We fixed it with explicit, one-to-one redirects in vercel.json (about 90 of them) instead of wildcard rules.
• Avoid redirect chains. Point each old address straight to the final one. A to B to C slows pages down and can make search engines drop the old address.
• Use root-absolute links such as /coding/styles.css instead of ../styles.css. Relative paths break when the same page is reached through a different folder depth.
• Check robots.txt. A stray Disallow line can stop search engines from following your redirects.

Quick checklist before you share your site

• The home page and every important link open without a 404.
• The site loads over https:// and the other domain version redirects to your main one.
• Each page has its own title and meta description.
• You submitted your sitemap.xml in Google Search Console.