Automatically Publishing a Vite Project to GitHub Pages

Here are my notes from publishing from There’s an action at that makes this easy without setting up additional API tokens, but there are a few Vite specific steps worth noting.

Create the project

If you don’t already have one npm create [email protected], and cd into the directory. Then:

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin
git push -u origin main

Create gh-pages branch

If you don’t already have a gh-pages branch you can create an empty one like so:

git switch --orphan gh-pages
git commit --allow-empty -m "gh-pages"
git push origin gh-pages

Add files to the repo

Create a vite.config.js with:

import { defineConfig } from "vite";
export default defineConfig({
  base: "./",

Create a .github/workflows/node.js.yml with:

name: Node.js CI

    branches: ["main"]
    branches: ["main"]

    runs-on: ubuntu-latest
      - uses: actions/[email protected]
      - name: Use Node.js 18.x
        uses: actions/[email protected]
          node-version: 18.x
          cache: "npm"
      - run: npm install
      - run: npm run build --if-present

      - name: Deploy
        uses: peaceiris/[email protected]
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Update GitHub settings

At this point there’s an action running at which builds the project from scratch and publishes to the root of the gh-pages branch, making it available at something like