Fix GitHub Pages deployment configuration for project pages site

[Copilot]

Problem

The GitHub Pages site was deploying as a blank page with missing content files. When users visited the deployed site at https://aabs.github.io/fifthlang.github.io/, they would see an empty page instead of the expected React application.

Root Cause

The repository aabs/fifthlang.github.io is a project pages site, not a user pages site, but was configured with settings appropriate for a user pages site:

1. Incorrect base path: Vite was configured with base: '/' instead of base: '/fifthlang.github.io/'
2. Wrong SPA routing config: The 404.html had pathSegmentsToKeep = 0 instead of pathSegmentsToKeep = 1
3. Missing router basename: React Router wasn't configured with the correct base path

This caused:

• Asset files (CSS, JS) to be referenced with incorrect paths like /assets/app.js instead of /fifthlang.github.io/assets/app.js
• Client-side routing to fail when users navigated to routes like /docs or /about
• The 404.html SPA routing fallback to redirect incorrectly

Solution

Made three minimal configuration changes to properly support GitHub Pages project pages deployment:

1. Fixed Vite Base Path (vite.config.ts)

export default defineConfig({
  plugins: [react()],
- base: '/',
+ base: '/fifthlang.github.io/',
})

2. Updated SPA Routing Configuration (public/404.html)

- var pathSegmentsToKeep = 0;
+ var pathSegmentsToKeep = 1;

3. Added React Router Basename (src/main.tsx)

<StrictMode>
- <BrowserRouter>
+ <BrowserRouter basename="/fifthlang.github.io">
    <App />
  </BrowserRouter>
</StrictMode>

How It Works

For project pages sites, when a user visits a route like https://aabs.github.io/fifthlang.github.io/docs:

1. GitHub Pages serves the 404.html (since /docs doesn't exist as a file)
2. The 404.html script redirects to https://aabs.github.io/fifthlang.github.io/?/docs
3. The main React app loads with all assets using the correct /fifthlang.github.io/ prefix
4. React Router processes the ?/docs query parameter and shows the Documentation page

Validation

• ✅ Build completes successfully with correct asset paths
• ✅ All static files properly prefixed with /fifthlang.github.io/
• ✅ SPA routing configuration correct for project pages
• ✅ Local preview server works at http://localhost:4173/fifthlang.github.io/
• ✅ No linting errors introduced

The site should now deploy correctly to https://aabs.github.io/fifthlang.github.io/ with full functionality including client-side routing for all pages (Home, Documentation, Tutorials, News, About).

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull Request Overview

This PR fixes GitHub Pages deployment configuration for a project pages site that was previously deploying as a blank page. The issue was caused by incorrect base path configurations that are different for project pages versus user pages sites.

• Fixed Vite base path configuration to include the repository name prefix
• Updated React Router to use the correct basename for project pages routing
• Corrected SPA routing fallback configuration in 404.html

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
vite.config.ts	Updated base path from '/' to '/fifthlang.github.io/' for correct asset paths
src/main.tsx	Added basename prop to BrowserRouter for proper client-side routing
public/404.html	Changed pathSegmentsToKeep from 0 to 1 for project pages SPA routing

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}