How to Deploy a Vite + React App to GitHub Pages

If you want to watch this in video form:

Deploying your React app built with Vite to GitHub Pages is quick and easy. Follow these steps:

Prerequisites

• A GitHub account.


• Node.js and npm installed.


• A React project created with Vite.

Steps

1. 
   Install gh-pages
   From your project directory, run:
   

   npm install --save-dev gh-pages

1. 
   Update package.json
   Add a homepage field and deploy script:
   

   {

     "name": "my-vite-react-app",

     "homepage": "https://<your-username>.github.io/<repo-name>/",

     "scripts": {

       "dev": "vite",

       "build": "vite build",

       "predeploy": "npm run build",

       "deploy": "gh-pages -d dist"

     }

   }

Replace <your-username> and <repo-name> with your actual GitHub username and repository name.

1. 
   Configure Vite Base URL
   In vite.config.js, set the base to match your repo’s path:
   

   import { defineConfig } from 'vite'

   import react from '@vitejs/plugin-react'



   export default defineConfig({

     base: '/<repo-name>/', // Add this line

     plugins: [react()]

   })

1. 
   Build and Deploy
   Run:
   

   npm run deploy

This command builds your app and pushes the dist folder to the gh-pages branch of your repo.

1. 
   Access Your Deployed Site
   Go to:
   

   https://<your-username>.github.io/<repo-name>/

Done!

Your Vite React app is now live on GitHub Pages.