How to deploy Vite React App to GitHub Pages

3 min readApr 29, 2024

You can use GitHub Pages to host your website for free. In this guide will show you how you can deploy your Vite React applications to GitHub Pages in an easy way. this easy-to-follow tutorial will help you publish your projects. So, let’s dive in and get your website live!

What is GitHub pages?

It is a static site hosting service offered by GitHub. It allows users to effortlessly publish websites directly from their repositories. With GitHub Pages, developers and organizations can showcase their projects, portfolios, documentation, and more to the world. You can even use your own custom domain or use the free domain github.io which is provided by GitHub. It’s all done using Git and GitHub, so it’s super easy!

Setup a simple react application

To begin, make sure you have Node.js installed on your machine. You can then create a new React project by running the following command in your terminal:

npm create vite my-project
cd my-project
npm install
npm run dev

now install install gh-pages package as a dev-dependency:

npm install gh-pages --save-dev

Add Script in package.json

In the package.json file add two new scripts predeploy & deploy something like this:

"scripts": {    
    // ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
}

Add Base Path in vite config

In the vite.config.js add a base path which is the name of the GitHub repository you created and it will look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/my-project",
});

Setting Up Git

Before deploying your website, you’ll need to set up a Git repository to track your project’s changes. Follow these steps:

#create a new git repository
$ git init

#add all changed file paths to staged changes
$ git add .#commit all staged changes
$ git commit -m 'initial commit'#add remote repository
$ git remote add origin [HTTPS URL of the your repo]#pushed local repository to remote repository on GitHub
$ git push origin master

Deploy

Now it’s time for deployment. This process involves building your React application and pushing it to the gh-pages branch of your repository :

npm run deploy

After running this command, git pushes the contents of the dist directory (which contains the built assets) to the gh-pages branch of your repository. This branch serves as the source for your GitHub Pages website. GitHub automatically detects changes to this branch and updates your website accordingly.

Once the deployment process is complete, your website is live! You can access it using the URL :

https://username.github.io/repository-name

where username is your GitHub username and repository-name is the name of your GitHub repository.

Conclusion:

Congratulations! Your Vite React website is now successfully deployed to GitHub Pages, and it’s ready to be accessed by users around the world. Any future updates to your project can be deployed using the same process