skills.rest
OKHP3
OKHP3COMMUNITY
Explore all skills by this author →
WebsiteGitHub

okhp3-vite-github-pages

Deploy Vite SPAs to GitHub Pages with npm scripts and base path adjustments.

2|1|Updated Jun 12, 2026
Search Tags:#GitHub Pages#Vite#SPA deployment#HashRouter#npm script
One-click install
npx skills add https://github.com/OKHP3/skillz --skill okhp3-vite-github-pages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: okhp3-vite-github-pages
Source: https://github.com/OKHP3/skillz/tree/main/universal/okhp3-vite-github-pages
Command: npx skills add https://github.com/OKHP3/skillz --skill okhp3-vite-github-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses common pitfalls in deploying Vite Single Page Applications (SPA) to GitHub Pages, such as base path issues, incorrect routing, and branch problems.

Core Features & Use Cases

  • Base Path Handling: Automatically adjusts base paths to match GitHub Pages requirements.
  • Routing Support: Ensures correct usage of HashRouter for static site hosting.
  • gh-pages Deployment: Automates deployment steps with npm scripts.
  • Use Case: If you're deploying a React or Vue SPA and facing issues with the base path, routing, or deployment to the gh-pages branch, this skill can help.

Quick Start

Use the okhp3-vite-github-pages skill to deploy your Vite SPA to GitHub Pages with a single npm command.

Frequently Asked Questions about okhp3-vite-github-pages

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a Vite SPA to GitHub Pages without base path or routing errors?▼

To deploy a Vite SPA to GitHub Pages, you must configure the base path to match your repository name and ensure correct routing. This skill resolves these common deployment failure modes using automated npm scripts.

Why does my Vite SPA routing break on GitHub Pages?▼

Vite SPA routing breaks on GitHub Pages because static hosting does not handle client-side routes by default. Using HashRouter instead of BrowserRouter prevents these 404 errors on page refreshes.

How do I automate Vite deployment to the gh-pages branch?▼

You can automate Vite deployment to the gh-pages branch by utilizing npm scripts. This skill handles base path adjustments and publishes your build output without manual branch switching.

Do I need to manually configure the base path for a Vite project on GitHub Pages?▼

No, manual base path configuration is not required. This skill automatically adjusts the Vite base path to align with GitHub Pages requirements, ensuring assets load correctly during deployment.

What's the best way to handle static site hosting for a Vite SPA?▼

The best way to handle static site hosting for a Vite SPA is combining automated base path adjustments with HashRouter. This avoids branch mismatches and direct asset path errors common in GitHub Pages.

Can I use a single npm command to build and deploy my Vite app to GitHub Pages?▼

Yes, you can use a single npm command to build and deploy your Vite app. This skill integrates the necessary deployment steps and base path configurations into a streamlined npm script workflow.

Related Skills

Explore More Software Engineering Skills→
SoltusSoltus
1

web-development

Standardize web frontend projects with Vite, npm, and CloudBase Web SDK.

Community
Intermediate
Tobbe3108Tobbe3108
3

github-pages-deployment

Automate static site deployment to GitHub Pages via gh-pages and CI/CD workflows.

Community
Intermediate
haotoolhaotool
2

vite-react-best-practices

Document Vite and React SPA deployment, caching, and performance rules.

Official
Advanced
OpusGameLabsOpusGameLabs
307

game-deploy

Deploy browser games to static hosting via automated build and publish steps.

Official
Advanced