Guide: Deploy your VITE project to GitHub Pages in 2024

Deploying your VITE project to GitHub Pages is a great way to share your work with others or host your website for free. In this guide, I'll walk you through the steps to deploy your VITE project on GitHub Pages.

Step 1 : Test your project

Build your project using npm run build command and run it using npm run preview command and make sure everything is functioning as you expected.

Step 2 : Configure Your Project for Deployment

Note: Skip this step if you plan to use YOUR_USERNAME.github.io or a Custom domain through GitHub Pages to host your website.

• Open the vite.config.js file in your project and add the base path to it.

• Example: If your GitHub repository containing the project files is named example_project, your vite.config.js file should look like this:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/example_project/' //------> This line is added  <------
})

Now push the changes to your GitHub.

Step 3 : Set Up GitHub Actions for Deployment

1. Open your GitHub repository's Settings.

2. Navigate to the Pages section.

3. In Build and Deployment, set GitHub Actions as the source.

4. Click Configure on the Static Deploy tab.

Step 4: GitHub Actions Configuration

Copy and paste the following code into the GitHub Actions workflow editor and commit the changes:

name: Deploy static content to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20' # Use the Node.js version your project requires

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist' # Upload the build output directory

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

• Commit the changes and wait for the deployment to finish.

• You can see the status in Actions tab.

Conclusion:

And that's it! You've successfully deployed your VITE project to GitHub Pages. Now you can share your project with the world. If you make changes to your project, just pushing it to the GitHub will be enough. The action script that you just setup in Step 4 will take care of deploying the website with the updated changes.

What If It Doesn't Work?

• After Step 4, you should see a .github folder in your repository with a workflows subfolder in it which contains static.yml file.

• If the deployment still doesn't work, make a minor edit to any file in your repository and push the changes again. The static.yml script will be triggered to run every time you push your code.

• Comment down the problem you are facing, I'll try to come up with a solution.