commands and script for a static Vite / React app GitHub Pages deployment

deploy-github-pages-vite-react.md

GitHub Pages deployment for a Vite / React app

⚠️ EDIT After testing this solution again, it looks like it only worked the first time. Additional research might help produce and actually viable solution

A better solution may be deployment via GitHub Actions, but I stumbled upon a working solution someone else may find helpful. It modifies the shell script found in the documentation a bit to use a workspace to support history

• Vite Static Deployment Documentation 📑
• Inspiration 💡
  • Using Git Worktree to Deploy GitHub Pages
  • An approach from @ChrisBAshton

Prerequisite commands

(run once before deploy.sh script)

# Checkout a new, clean slate 'gh-pages' branch (this shouldn't already exist)
git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initial commit"
git checkout main

deploy.sh

#!/usr/bin/env sh

# abort on errors
set -e

# delete the existing build (worktree must be bare)
rm -rf dist

# create an output directory checked out to the gh-pages branch
git worktree add -B gh-pages dist origin/gh-pages

# build the static app
npm run build

# navigate into the build output directory
cd dist

# bypass Jekyll processing
echo > .nojekyll

# ensure git actions are being performed on the gh-pages worktree
current_branch=$(git symbolic-ref --short -q HEAD)
if [ "$current_branch" != "gh-pages" ]; then
  echo "Expected build folder to be on gh-pages branch."
  exit 1
fi

# Provide a helpful timestamp to commits 
git add -A
git commit -m "GitHub Pages deploy script
[$(date '+%F@%T (%Z)')]"
git push

# uncomment: when deploying to a custom domain
# echo 'www.example.com' > CNAME

cd -