GitHub Pages Hosting

GitHub Pages allows you to host static websites (HTML, CSS, JS, and even Vite builds) directly from your GitHub repository — for free!
It’s perfect for personal portfolios, project documentation, or small apps.

Hosting a Simple HTML Website

1. Create a Repository

• Go to GitHub and create a new repository.
• Name it something like my-website.

2. Add Your HTML Files

• Add index.html (this will be your homepage).
• Commit and push changes to the main branch.

3. Enable GitHub Pages

• Go to Settings → Pages.
• Under Branch, select main and / (root).
• Save → GitHub will give you a live link like:

[https://username.github.io/my-website/](https://username.github.io/my-website/)

Done! Your static site is live.

Hosting a Vite Website

For Vite (React, Vue, or plain JS apps), we need a few extra steps:

1. Install gh-pages Package

npm install gh-pages --save-dev

2. Update vite.config.js

Add this inside your config:

export default defineConfig({
  base: "/my-website/", // Replace with your repo name
});

3. Update package.json

Add these scripts:

"scripts": {
  "build": "vite build",
  "deploy": "gh-pages -d dist"
}

4. Deploy

npm run build
npm run deploy

This pushes your dist/ folder to a special gh-pages branch that GitHub Pages uses.

Notes & Tips

• For portfolio sites, name your repo as <username>.github.io — then your site will be live at

  https://username.github.io/

• Every time you update code:

  git add .
  git commit -m "update site"
  git push origin main
  npm run deploy

Result

You’ve now hosted a free website using GitHub Pages — either plain HTML or a modern Vite app!