A simple but robust deployment of a Vite app to GitHub Pages. This project uses React + TypeScript as an example, but you can easily switch to a different stack by following the instructions below.
The Actions workflow is built from a combination of the Vite documentation on static sites, the documentation from the various GitHub Actions in use and my own wisdom.
Press the Use this template button (or equivalent for your language) near where the Code button usually is. See GitHub's docs on creating a repository from a template for more details.
Once created, the repo's Pages configuration needs to be switched to GitHub Actions mode. Go to the repo > Settings > Pages > and change Source to GitHub Actions. See Publishing with a custom GitHub Actions workflow in GitHub's documentation.
- Create a new project using the desired create-vite template by following the Vite getting started guide.
- Copy the contents of the
.githubdirectory from this repo to your new project -- it'll work with any project generated from Vite's templates.
When production building the app for GitHub Pages, you'll notice the that the Vite logo ends up broken.
I'm not the only one to have noticed. A fix was suggested here, which I've implemented in this project.
This occurs because the img src directly refers to the build-generated /vite.svg and React does not preprocess src attributes to add the configured base.
The fix is to import /vite.svg just like any other resource in React:
import viteLogo from '/vite.svg'
// ...
<img src={viteLogo} className="logo" alt="Vite logo" />To make things a bit more tricky, this issues does not show up when running npm run dev -- only when running npm run build (followed by npm run preview for testing locally):
# This will replicate the issue
npm run build -- --base /test
npm run preview -- --base /test
# This will NOT replicate the issue
npm run dev -- --base /testI've raised an MR to fix this for anyone generating projects in the future. Update 2023-03-11: Now merged!