Deploy Vite React App on Github

Follow two step to publish

Step: 1

Configure repo in vite.config.js

Set the base in vite.config.js.

If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to "/".

If you are deploying to https://<USERNAME>.github.io/<YOUR_REPO_NAME>/, for example your repository is at https://github.com/hidaytrahman/chepo, then set base to "/chepo/".

Example:

export default defineConfig({
  base: "/<YOUR_REPO_NAME>/", // add the base as repo name as "/yourRepoName/"
  plugins: [react()],
});

Step: 2

Install and setup gh-pages

Now, Install the gh-pages package

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

Add below line in the package.json file

 "homepage": "https://<USERNAME>.github.io/<YOUR_REPO_NAME>/",

Also add these beautiful scripts

 "predeploy": "npm run build",
 "deploy": "gh-pages -d dist"

we are done with the configuration, let's run the command to deploy.

yarn run deploy

Or

npm run deploy

Yayyy!!! see it in action in 2-3 minutes.

Comments

[SeongKuk Han]

Easy to step, thank you for the article! Here is just my one of opinions, I think that would be good to mention Github in the title.

[Hidayt Rahman]

Thank you! Great suggestion I will update the title

[Andre Marti]

Nice article, i"ll try it, only works for static data right?

[Hidayt Rahman]

Thank you! Yes but you can use API for dynamic stuff.