jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub-Pages-Tools

Kostenlose GitHub-Pages-SPA-404-Helfer

Erstelle einen 404.html-Fallback für Single-Page-Apps auf GitHub Pages.

Tool wird geladen...

Was ist GitHub-Pages-SPA-404-Helfer?

GitHub Pages stellt statische Dateien bereit und kennt keine Client-seitigen Routen, es sei denn, eine passende Datei existiert. Eine Single-Page-App kann 404 anzeigen, wenn ein Besucher direkt eine tiefe Route offnet. Ein 404-Fallback kann den Browser zuruck zum App-Einstiegspunkt umleiten, wahrend der angeforderte Pfad fur den Router erhalten bleibt.

Kurze Antwort

Generieren Sie einen 404.html-Fallback fur Single-Page-Apps, die auf GitHub Pages bereitgestellt werden. Der Fallback leitet tiefe Client-seitige Routen zum App-Einstiegspunkt um, wahrend der ursprungliche Pfad fur den Router erhalten bleibt.

Last updated: 2026-06-11

Einschränkungen

  • Dies ist ein generischer Client-seitiger Fallback, keine Server-seitige Weiterleitungskonfiguration. Er verlässt sich auf JavaScript im Browser, um den ursprunglichen Pfad zu extrahieren und an den Router zu ubergeben.
  • Der Client-seitige Router muss so konfiguriert sein, dass er den erhaltenen Pfad aus dem Query-String oder Hash liest und die passende Route rendert. Nicht alle Router verarbeiten dieses Weiterleitungsmuster automatisch.
  • Dieser Ansatz behebt nicht das Navigations- oder Aktualisierungsverhalten innerhalb der SPA nach der ersten Weiterleitung. Router-Level-Konfiguration ist immer noch fur die vollstandige Client-seitige Routing-Unterstutzung erforderlich.

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

So nutzt du dieses Tool

  1. Geben Sie den App-Basispfad ein. Verwenden Sie / fur eine Benutzer- oder benutzerdefinierte Domain-Site oder /repo-name/ fur eine Projektseite.
  2. Wahlen Sie, ob der Fallback den ursprunglichen Pfad im Query-String oder Hash speichern soll.
  3. Kopieren Sie die generierte 404.html-Datei in den veroffentlichten Site-Root.
  4. Testen Sie nach der Bereitstellung direkt eine tiefe Route.

Wofür du es nutzen kannst

  • Direktbesuche Client-seitiger Routen auf GitHub Pages beheben.
  • Einen 404-Fallback fur React-, Vue-, Svelte- oder Vanilla-Router vorbereiten.
  • Den Basispfad dokumentieren, der fur Projektseiten benotigt wird.

Anwendungsfalle

Praxisbeispiele

Beispiel

SPA mit benutzerdefinierter Domain

Eine Site unter www.example.com verwendet Client-seitiges Routing. Der Helfer generiert einen Fallback, der tiefe Routen mit erhaltenem Pfad zurück zu / umleitet.

Beispiel

Projektseiten-SPA

Ein Projekt, das unter /my-app/ bereitgestellt wird, benotigt den Basispfad, damit Routen nicht zur Domain-Wurzel umleiten.

Haufige Fehler

  • / als Basispfad fur eine Projektseite zu verwenden, die unter /repo-name/ bereitgestellt wird.
  • Zu vergessen, 404.html in den endgultigen dist-Ordner zu kopieren.
  • Zu erwarten, dass dieser Fallback Server-seitige Weiterleitungen ersetzt.

Überprüfung

  1. Stellen Sie die Site mit der generierten 404.html im Root bereit, und offnen Sie dann eine tiefe Routen-URL wie https://ihresite.com/some/deep/route direkt in einem Browser.
  2. Bestatigen Sie, dass die Seite den SPA-Einstiegspunkt ladet und der Router zur tiefen Route navigiert, ohne 404 oder eine leere Seite anzuzeigen.

FAQ

Fragen zu GitHub-Pages-SPA-404-Helfer

Funktioniert dies fur jeden Router?

Nein. Es ist ein generischer Fallback. Ihr Router muss immer noch den erhaltenen Pfad lesen und die passende Route rendern.

Wohin soll 404.html?

Platzieren Sie sie im veroffentlichten Site-Root, neben index.html, CNAME, robots.txt oder anderen endgultigen Ausgabedateien.

Sollten normale statische Sites dies verwenden?

Normalerweise nein. Eine normale statische Site sollte echte HTML-Dateien fur wichtige Seiten veroffentlichen, anstatt alles durch einen Fallback zu leiten.

Verwandte Tools

Weitere github-pages-tools

Auch ausprobieren

Auch ausprobieren