This guide covers the complete deployment process for Harvest Hope: The Last Farm using GitHub Pages.
Before deploying, ensure you have:
- Node.js 18+ installed
- Git repository set up on GitHub
- GitHub account with repository access
The deployment consists of:
- Frontend: React app deployed via GitHub Pages
- Build System: GitHub Actions for automated deployment
- CDN: GitHub's global CDN infrastructure
# Commit and push your changes
git add .
git commit -m "ready for deployment"
git push origin main
# The GitHub Actions workflow will automatically deploy-
Go to Repository Settings:
- Navigate to your GitHub repository
- Click on "Settings" tab
- Scroll down to "Pages" section
-
Configure Source:
- Set Source to "GitHub Actions"
- Save the configuration
- Repository Secrets:
- Go to Settings → Secrets and variables → Actions
- Add repository secret:
VITE_GEMINI_API_KEY - Set value to your actual Gemini API key
# Make sure all changes are committed
git add .
git commit -m "deploy to GitHub Pages"
git push origin main
# GitHub Actions will automatically build and deployYour site will be available at:
https://yourusername.github.io/HarvestHope/
The .github/workflows/deploy-github-pages.yml file automatically:
- Installs dependencies
- Builds the production bundle
- Deploys to GitHub Pages
- Runs on every push to main branch
The production build includes:
- Code splitting: Vendor and AI chunks separated
- Asset optimization: Images, CSS, JS minified
- Caching: Optimized file naming for browser caching
- Bundle size: ~84KB gzipped total
- GitHub's global CDN for fast delivery
- Automatic HTTPS/SSL
- Optimized asset caching
- Mobile responsive design
GitHub Pages is completely FREE including:
- Unlimited bandwidth (100GB/month soft limit)
- Free SSL certificate
- Global CDN
- Automatic deployments
-
Build Failures:
- Check GitHub Actions logs in the "Actions" tab
- Verify environment variables are set correctly
- Ensure Node.js version compatibility
-
API Key Issues:
- Verify
VITE_GEMINI_API_KEYsecret is set in repository - Check that the API key is valid and active
- Game works without API key (has fallbacks)
- Verify
-
404 Errors on Page Refresh:
- GitHub Pages automatically handles SPA routing
- Ensure
basepath in vite.config.ts matches repository name
# Test build locally
cd frontend
npm run build
npm run preview
# Check GitHub Actions logs
# Go to repository → Actions tab → View latest workflow run
# Test deployed site
curl -I https://yourusername.github.io/HarvestHope/In GitHub:
- Go to repository → Actions tab
- Find a previous successful deployment
- Click "Re-run jobs" to redeploy that version
# Revert to previous commit
git revert HEAD
git push origin main
# GitHub Actions will automatically redeploy the reverted version- Weekly: Monitor GitHub Actions for failed builds
- Monthly: Update dependencies and security patches
- Quarterly: Review and optimize bundle size
- Code Updates: Push to GitHub (auto-deploys via GitHub Actions)
- Dependency Updates: Update package.json and push to trigger rebuild
- Configuration Updates: Modify vite.config.ts or workflow files as needed
- GitHub Pages Documentation: GitHub Pages Guide
- GitHub Actions Documentation: GitHub Actions Guide
- Vite Documentation: Vite Build Guide
For issues or questions, check the GitHub Actions logs first, then consult the GitHub Pages documentation.