Skip to content

[WIP] Fix absolute paths in index.html for asset references#55

Draft
sheenyg with Copilot wants to merge 1 commit into
mainfrom
copilot/fix-absolute-paths-index-html
Draft

[WIP] Fix absolute paths in index.html for asset references#55
sheenyg with Copilot wants to merge 1 commit into
mainfrom
copilot/fix-absolute-paths-index-html

Conversation

Copilot AI commented Feb 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

GitHub Pages Deployment Fixes

  • Verify vite.config.ts has correct base path (/wouldreads/)
  • Update index.html to use relative paths for CSS and script imports
    • Change /src/main.css to ./src/main.css
    • Change /src/main.tsx to ./src/main.tsx
  • Create public directory if it doesn't exist
  • Add public/404.html for SPA routing support on GitHub Pages
  • Build and verify the changes work correctly
Original prompt

The GitHub Pages deployment at https://sheenyg.github.io/wouldreads/ is failing or showing a broken page. After investigating the repository configuration, the following issues need to be fixed:

Issue 1: index.html uses absolute root paths for assets

In index.html, the CSS and script references use absolute root paths (/src/main.css and /src/main.tsx). While Vite rewrites these during the build process, they should use relative paths or paths that account for the /wouldreads/ base path to be consistent and avoid any edge-case issues:

<!-- Current (in index.html) -->
<link href="/src/main.css" rel="stylesheet" />
<script type="module" src="/src/main.tsx"></script>

These should be updated to use relative paths so they work correctly with the Vite base path configuration:

<!-- Fixed -->
<link href="./src/main.css" rel="stylesheet" />
<script type="module" src="./src/main.tsx"></script>

When Vite processes index.html, it transforms these paths. Using ./ (relative) instead of / (absolute root) ensures Vite correctly prepends the base path (/wouldreads/) to the output assets.

Issue 2: Verify vite.config.ts base path is correct

The vite.config.ts already has base: "/wouldreads/" which is correct for GitHub Pages deployment at https://sheenyg.github.io/wouldreads/. No changes needed here, but confirm it stays in place.

Issue 3: Add a 404.html for SPA routing on GitHub Pages

Since this is a single-page React application, navigating directly to any sub-path (or refreshing the page) will result in a 404 from GitHub Pages. A common fix is to add a 404.html in the public/ directory that redirects to index.html. This ensures that GitHub Pages serves the app correctly for all routes.

Create a public/404.html file that redirects to the base path, allowing the SPA to handle routing client-side.

Files to modify:

  1. index.html - Change /src/main.css to ./src/main.css and /src/main.tsx to ./src/main.tsx
  2. Create public/404.html - Add a 404.html redirect page for SPA support on GitHub Pages. The 404.html should contain a script that redirects to the base URL with the path stored in a query parameter or session storage, so the SPA router can pick it up. A simple approach:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>wouldreads</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment.
      var pathSegmentsToKeep = 1;
      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
</html>

This pull request was created from Copilot chat.

💡 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 AI requested a review from sheenyg February 12, 2026 22:38
Copilot stopped work on behalf of sheenyg due to an error February 12, 2026 22:38
The session was cancelled by the user.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sheenyg sheenyg Awaiting requested review from sheenyg

Assignees

@sheenyg sheenyg

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@sheenyg