Deploy Vite REACT app using GitHub pages, with the help of gh-pages package.

Setting up a Vite REACT app on GitHub Pages can be a bit confusing for beginners. That’s why we have gh-pages! In just 5 simple steps, you can deploy your React app using gh-pages. Let’s begin.

Step 1: Creating a GitHub repository

Step 2: Install gh-pages package as a dev-dependency

npm install gh-pages --save-dev
or
yarn add -D gh-pages

Step 3: Set the config

// add this line at your package.json file in first line
// change username and repository to yours
"homepage": "https://username.github.io/repository-name",

// add following two line to scripts on package.json file
"predeploy": "yarn build", // or, npm run build
"deploy": "gh-pages -d dist",

Now, go to your vite.config.js file and add

// change repository-name to yours
base: '/repository-name/',

Step 4: Push your project to GitHub repository

Step 5: Deploy

npm run deploy
or 
yarn deploy

Well done your react app is live now! 👏

To visit your app go to,
your repository > settings > pages > Here you will find live site link.
or directly, goto previously added homepage link to package.json file

if your site is not live immediately don’t be scared, to go live there may take a few minutes.