Endurative

Easiest Way to Deploy a Vite App to GitHub Pages with GitHub Actions (2025)

If you’ve just built a shiny new Vite project and want to show it off to the world, GitHub Pages is one of the fastest and free ways to host it.

With GitHub Actions, you can automate the entire deployment process — no more manually running build commands or dragging files around.

This guide walks you step-by-step through the easiest way to deploy a Vite app to GitHub Pages in 2025.

Step 1 — Create Your Vite App

If you haven’t created your app yet, open your terminal and run:

npm create vite@latest my-app
cd my-app
npm install

Step 2 — Update vite.config.js for GitHub Pages

When deploying to GitHub Pages, you must set the base property in your Vite config to your repo name.

import { defineConfig } from 'vite'
export default defineConfig({
base: '/<repo-name>/',
})

GitHub Pages serves your site from https://username.github.io/<repo-name>/ (not the root /), so Vite needs to know the correct base path for assets.

Step 3 — Create the GitHub Action Workflow

GitHub Actions will:

  1. Build your Vite app.
  2. Upload it to GitHub Pages automatically.

In your project root (same place as package.json), create: .github/workflows/deploy.yml

my-vite-project/
├── .github/
│ └── workflows/
│ └── deploy.yml
├── src/
├── package.json
├── vite.config.js

Now paste this code into deploy.yml:

# Workflow name (shows in the Actions tab)
name: Deploy Vite to GitHub Pages

# Trigger: Run this workflow when code is pushed to the "main" branch
on:
push:
branches: [ main ]

# Permissions required for GitHub Pages deployment
permissions:
contents: read # Can read your repo files
pages: write # Can upload and publish to GitHub Pages
id-token: write # Needed for authentication with Pages

jobs:
# 1️⃣ Build the Vite app
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20

- name: Install dependencies
run: npm ci

- name: Build Vite app
run: npm run build

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

# 2️⃣ Deploy the build to GitHub Pages
deploy:
needs: build
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

Step 4 — Enable GitHub Pages

  1. Go to Repo → Settings → Pages.
  2. Under Source, select Deploy from GitHub Actions.


Now, every time you push changes to your main branch, GitHub Actions will:

  1. Build your Vite app.
  2. Deploy it automatically to GitHub Pages.
  3. Give you a live URL right in the Actions log.

Example Repo: Vite + GitHub Pages Deployment via Actions