GitHub Pages tools

Gratis GitHub Pages SPA 404-helper

Genereer een 404.html-fallback voor single-page apps op GitHub Pages.

Tool laden...

Wat is GitHub Pages SPA 404-helper?

GitHub Pages serveert statische bestanden en kent geen client-side routes tenzij een overeenkomend bestand bestaat. Een single-page app kan 404 tonen wanneer een bezoeker direct een diepe route opent. Een 404-fallback kan de browser terugsturen naar het app-ingangspunt terwijl het gevraagde pad behouden blijft voor de router.

Snel antwoord

Genereer een 404.html-fallback voor single-page apps die op GitHub Pages zijn geïmplementeerd. De fallback stuurt diepe client-side routes door naar het app-ingangspunt terwijl het oorspronkelijke pad behouden blijft voor de router.

Last updated: 2026-06-11

Beperkingen

  • Dit is een generieke client-side fallback, geen server-side omleidingsconfiguratie. Het vertrouwt op JavaScript in de browser om het oorspronkelijke pad te extraheren en door te geven aan de router.
  • De client-side router moet worden geconfigureerd om het behouden pad uit de query string of hash te lezen en de bijbehorende route weer te geven. Niet alle routers verwerken dit omleidingspatroon automatisch.
  • Deze aanpak lost navigatie- of verversingsgedrag binnen de SPA na de initiële omleiding niet op. Router-niveau configuratie is nog steeds nodig voor volledige client-side routing-ondersteuning.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer het app-basispad in. Gebruik / voor een gebruikers- of aangepast domein, of /repo-naam/ voor een projectpagina.
  2. Kies of de fallback het oorspronkelijke pad moet opslaan in de query string of hash.
  3. Kopieer het gegenereerde 404.html-bestand naar de gepubliceerde site-root.
  4. Test een diepe route direct na implementatie.

Waarvoor je het kunt gebruiken

  • Repareer directe bezoeken aan client-side routes op GitHub Pages.
  • Bereid een 404-fallback voor voor React-, Vue-, Svelte- of vanilla-routers.
  • Documenteer het benodigde basispad voor projectpagina's.

Gebruik

Praktische voorbeelden

Voorbeeld

Aangepast domein SPA

Een site op www.voorbeeld.nl gebruikt client-side routing. De helper genereert een fallback die diepe routes terugstuurt naar / met het behouden pad.

Voorbeeld

Projectpagina SPA

Een project dat onder /mijn-app/ is geïmplementeerd, moet het basispad bevatten zodat routes niet naar de domein-root worden omgeleid.

Veelgemaakte fouten

  • / gebruiken als basispad voor een projectpagina die onder /repo-naam/ is geïmplementeerd.
  • Vergeten 404.html naar de uiteindelijke dist-map te kopiëren.
  • Verwachten dat deze fallback server-side omleidingen vervangt.

Verificatie

  1. Implementeer de site met de gegenereerde 404.html in de root en open vervolgens een diepe route-URL zoals https://uw-site.nl/een/diepe/route direct in een browser.
  2. Bevestig dat de pagina het SPA-ingangspunt laadt en de router naar de diepe route navigeert zonder 404 of een lege pagina te tonen.

FAQ

Vragen over GitHub Pages SPA 404-helper

Werkt dit voor elke router?

Nee. Het is een generieke fallback. Uw router moet nog steeds het behouden pad lezen en de bijbehorende route weergeven.

Waar moet 404.html komen?

Plaats het in de gepubliceerde site-root, naast index.html, CNAME, robots.txt of andere uiteindelijke uitvoerbestanden.

Moeten normale statische sites dit gebruiken?

Meestal niet. Een normale statische site moet echte HTML-bestanden publiceren voor belangrijke pagina's in plaats van alles via een fallback te routeren.

Gerelateerde tools

Meer github pages tools

Probeer ook

Probeer ook