Deploying a Vite app to GitHub pages

Posted on 15 April 2024

Tutorial GitHub Vite

A no nonsense step-by-step guide for publishing your Vite app to GitHub.

Create a new repository on the command line

echo "# test" >>
git init
git add
git commit -m "first commit"
git branch -M main
git remote add origin{username}/{repo-name}.git
git push -u origin main

Or or push an existing repository from the command line

git remote add origin{username}/{repo-name}.git
git branch -M main
git push -u origin main

Update your vite.config.js

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

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

Install gh-pages

npm install gh-pages --save-dev

Update package.json

Add the following predeploy and deploy scripts:

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

Add a homepage property:

"homepage": "https://{username}{repo-name}/"

Run Deploy

npm run deploy

And that’s it!

In a few moments you’ll be able to share your creation with the world.

Until next time, happy coding!