Deploy Vite on Github Pages using Github Actions

vitejs.dev

Do you have a Vite-powered React app that you want to automatically deploy on Github Pages?

Github Action is your best friend!

Step 1

In your vite.config.js file, add a new field as follows.
Make sure to replace <repo-name> with your repository name.

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

export default defineConfig({
    plugins: [react()],
    base: '/<repo-name>/'
})

Step 2

We use the gh-pages package to deploy to Github Pages.

npm i gh-pages --save-dev

Step 3

Add the following lines to package.json
Make sure to replace <output_directory> with whichever directory the build files are stored in.

...
"predeploy": "npm run build",
"deploy": "gh-pages -d <output_directory>"
...

Step 4

Then, we create a file, .github/workflows/deploy.yml

In the YAML file, we add the steps that will need to be run while deploying.

name: Deployment
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy site to gh-pages
    runs-on: ubuntu-latest
steps:
      - name: "Checkout"
        uses: actions/checkout@v2
- name: "Install Dependencies"
        run: yarn
- name: "Github Pages Deployment"
        run: |
          git remote set-url origin @github.com/${GITHUB_REPOSITORY}.git">https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          yarn deploy -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

You are done!

Push your changes to GitHub and a new run should have started. Once the run is completed, head over to the GitHub page to see your React app deployed successfully!