How to Deploy Your Website for Free (Vercel, Netlify, GitHub Pages)

Question

Introduction

Building your first project is one milestone. Actually getting it live on the internet, with a real URL you can share, is a completely different feeling — and it used to be way more complicated than it is now.

Today, deploying a frontend project is genuinely a 5-minute job with the right platform. Here are the three most beginner-friendly options and exactly how to use each one.

Option 1: Vercel (Best for React/Next.js Projects)

Vercel is built by the creators of Next.js, and it's my personal go-to for React projects.

Steps:

1. Push your project to a GitHub repository (see Article 7 if you need a refresher)
2. Go to vercel.com and sign up with your GitHub account
3. Click "Add New Project"
4. Select your repository
5. Vercel auto-detects your framework (React, Next.js, Vite, etc.) and sets the build settings automatically
6. Click "Deploy"

That's it. Within a minute or two, you get a live URL like your-project.vercel.app.

Bonus: Every time you push new code to GitHub, Vercel automatically redeploys your site. No manual re-upload, ever.

Option 2: Netlify (Great All-Rounder)

Netlify works almost identically to Vercel and is equally beginner-friendly.

Steps:

1. Push your project to GitHub
2. Go to netlify.com and sign up with GitHub
3. Click "Add new site" → "Import an existing project"
4. Select your repository
5. Set your build command (for a Vite React app, this is usually npm run build) and publish directory (dist)
6. Click "Deploy site"

You'll get a URL like your-project.netlify.app, with the same automatic redeploy behavior on every push.

Netlify extra: It has a built-in drag-and-drop deploy option too — for a plain HTML/CSS/JS site with no build step, you can literally drag your project folder into the browser and it goes live instantly.

Option 3: GitHub Pages (Simplest for Static Sites)

GitHub Pages is a solid choice for portfolio sites and static HTML/CSS/JS projects — it's what many developers use for their own portfolio (mine included).

Steps for a React (Vite) project:

• Install the gh-pages package:

npm install gh-pages --save-dev

• In package.json, add:

"homepage": "https://yourusername.github.io/your-repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

• Run:

npm run deploy

• In your GitHub repo settings, go to Pages and confirm the source is set to the gh-pages branch.

Your site goes live at yourusername.github.io/your-repo-name.

For a plain HTML/CSS/JS project (no build step):

Just push your files to GitHub, go to Settings → Pages, select your main branch as the source, and save. Done.

• Vercel — Best for React and Next.js projects. Offers a free custom domain.
• Netlify — Best for any frontend framework, with built-in form handling and serverless functions. Offers a free custom domain.
• GitHub Pages — Best for simple static websites and portfolios. Supports a free custom domain with a little setup.

My honest recommendation: use Vercel or Netlify for client and freelance projects — they handle builds, environment variables, and redeploys more smoothly. Use GitHub Pages for personal portfolio projects where simplicity matters more than advanced features.

Common Beginner Mistakes

1. Forgetting to set the correct build/publish directory. For Vite projects, it's dist. For Create React App, it's build. Get this wrong and you'll see a blank page.
2. Hardcoding API keys directly in your code instead of using environment variables — both Vercel and Netlify let you set these securely in project settings.
3. Not testing the production build locally first. Run npm run build and npm run preview (Vite) before deploying, to catch build errors early.
4. Forgetting the homepage field for GitHub Pages — without it, your assets (CSS, images) often break after deployment.

Final Thoughts

There's no excuse to keep a finished project sitting only on your local machine anymore. Pick Vercel or Netlify, connect your GitHub repo, and you'll have a shareable, live link in minutes — something you can put directly in a portfolio, a Fiverr gig, or a job application.

---

Muhammad Farhan is a Frontend Developer specializing in React.js and Tailwind CSS, based in Dera Ismail Khan, Pakistan.
Portfolio: Muhammad Farhan