gh-pages - share index.html for all routes

Question

I want to serve same index.html page for all (sub)urls in my app on gh-pages

is that possible?

right now when I go to repo/inner/path I get a 404

so I want to "force" github pages serve the same root index.html on all routes

Pertinent

Possible duplicate of Can I create routes with react-router for a github-pages site? – Jorgensen

Answer 1

This may or may not be in the cards for you, but it seems you're setting up routing for a SPA. Many client based routers offer hash-based routing precisely for this reason so that you don't have to configure your hosting provider to redirect urls to return index.

The landscape of solutions seems to be:

1. Use Hash-Based Routing

   USE: https://example.com/index.html#inner/path
   NOT: https://example.com/inner/path

   • React Router - <HashRouter>
   • Angular - HashLocationStrategy
   • Vue Router - {mode: 'hash'}

2. Use the custom 404 page for gh-pages to redirect all missed traffic back to index.html

3. Choose a different free static hosting provider that allows basic url rewrites or redirects like:
   • netlify
   • surge.sh

It doesn't look like github supports this feature right now, so you'll either need to avoid deep link requests to the server or change to a hosting provider that allows you to do so.

Further Reading:

• Can I create routes with react-router for a github-pages site?
• Add single page application support for Github pages
• S(GH)PA: The Single-Page App Hack For GitHub Pages

Jorgensen

This is one of those "I don't know the answer to your question so I assume that your way is the the wrong way" answers that don't help. Nice answer, but not for this question. If you end up asking about history mode, you have probably already read everything about the different route modes, but they don't tell you about GH Pages, so you ask here ... – Proulx

Answer 2

Check out Single Page Apps for GitHub Pages. It uses a custom 404.html file with a redirect script to always serve index.html, while preserving the path that was originally requested.

Glamorize

Answer 3

If you can list all possible urls for your application, you can use jekyll redirect from on github-pages.

Sadly, it will be difficult to list all urls that contain a specific id or name like /path/customer/id where id can be any integer.

You will have to find another hosting like netlify or cloudcanon which allows you to configure real redirections.

Kinsella

Thanks, I'll go probably with a node application hosted free on heroku. If not I'll revisit this – Pertinent