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" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:{username}/{repo-name}.git
git push -u origin main

Or or push an existing repository from the command line

git remote add origin git@github.com:{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';

// https://vitejs.dev/config/
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}.github.io/{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!