jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub-Pages-Tools

Kostenlose GitHub-Pages-Workflow-Generator

Generiere eine GitHub-Actions-Workflow-YAML zum Deployen statischer Sites auf GitHub Pages.

Tool wird geladen...

Was ist GitHub-Pages-Workflow-Generator?

Ein GitHub Pages Workflow ist eine GitHub Actions YAML-Datei, die Ihre Site automatisch erstellt und bereitstellt, jedes Mal wenn Sie in den main-Branch pushen. Einsteiger benötigen oft eine Vorlage, die die korrekten Berechtigungen, Concurrency-Einstellungen, Node-Setup, Build-Schritt und Artefakt-Upload enthält. Dieses Tool generiert eine gebrauchsfertige pages.yml mit der Standard-Bereitstellungsstruktur.

Kurze Antwort

Ein GitHub Actions Workflow automatisiert das Erstellen und Bereitstellen Ihrer statischen Site auf GitHub Pages bei jedem Push. Das generierte YAML enthält die Standardberechtigungen, Concurrency-Einstellungen und Build-Schritte.

Last updated: 2026-06-11

Einschränkungen

  • Der generierte Workflow ist eine Standardvorlage. Benutzerdefinierte Build-Tools, Monorepos oder mehrstufige Pipelines benötigen möglicherweise zusätzliche Job-Schritte.
  • Die GitHub Pages-Bereitstellung über Actions funktioniert nur für öffentliche Repositories oder private Repositories mit GitHub Pro, Team oder Enterprise-Plänen.
  • Die CNAME-Platzhalterdatei muss erstellt oder in das Ausgabeverzeichnis kopiert werden, wenn die Site eine benutzerdefinierte Domain verwendet.

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

So nutzt du dieses Tool

  1. Wählen Sie die Voreinstellung für den Site-Typ oder geben Sie benutzerdefinierte Build-Einstellungen ein.
  2. Legen Sie die Node-Version, den Build-Befehl und das Ausgabeverzeichnis für Ihr Projekt fest.
  3. Kopieren Sie das generierte YAML in .github/workflows/pages.yml in Ihrem Repository.
  4. Aktivieren Sie GitHub Pages in Ihren Repository-Einstellungen, um GitHub Actions als Quelle zu verwenden.

Wofür du es nutzen kannst

  • Automatisierte Bereitstellung für eine einfache statische HTML-Site auf GitHub Pages einrichten.
  • Einen Build-and-Deploy-Workflow für ein Vite- oder Astro-Projekt erstellen.
  • Einen CNAME-Platzhalter-Schritt hinzufügen, damit benutzerdefinierte Domains bei der Bereitstellung nicht verloren gehen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Bereitstellung einer einfachen HTML-Site

Eine statische HTML-Site ohne Build-Schritt benötigt den Workflow, um das Root-Verzeichnis unverändert hochzuladen. Der Generator erstellt einen minimalen Workflow ohne Build-Schritt.

Beispiel

Vite-Projekt-Bereitstellung

Ein Vite-Projekt benötigt npm ci, npm run build und den Upload des dist-Ordners. Der Generator erstellt den korrekten Workflow mit Artefakt-Upload.

Haufige Fehler

  • Verwendung des falschen Ausgabeverzeichnisses, was dazu führt, dass GitHub Pages eine leere oder unvollständige Site ausliefert.
  • Vergessen, die korrekten Berechtigungen für pages und id-token im Workflow zu setzen.
  • Den CNAME-Platzhalter im Workflow belassen, obwohl die Site keine benutzerdefinierte Domain verwendet.

Überprüfung

  1. Pushen Sie die Workflow-Datei in Ihr Repository und überprüfen Sie den Actions-Tab, um zu bestätigen, dass der Workflow erfolgreich ausgeführt wird.
  2. Besuchen Sie nach einem erfolgreichen Lauf Ihre GitHub Pages URL und überprüfen Sie, ob der Site-Inhalt der erwarteten Ausgabe entspricht.

FAQ

Fragen zu GitHub-Pages-Workflow-Generator

Wo sollte die Workflow-Datei gespeichert werden?

Speichern Sie sie als .github/workflows/pages.yml in Ihrem Repository. GitHub Actions erkennt und führt Workflow-Dateien in diesem Verzeichnis automatisch aus.

Muss ich etwas in den Repository-Einstellungen konfigurieren?

Ja. Gehen Sie zu Settings > Pages und setzen Sie die Quelle auf GitHub Actions. Dies teilt GitHub Pages mit, die Workflow-Bereitstellung statt der branch-basierten Bereitstellung zu verwenden.

Welche Node-Version sollte ich verwenden?

Verwenden Sie die Node-Version, die Ihren Projektanforderungen entspricht. Node 20 oder 22 sind sichere Optionen für die meisten Static-Site-Generatoren.

Kann ich pnpm oder yarn anstelle von npm im GitHub Actions Workflow verwenden?

Ja. Ersetzen Sie die npm-Befehle durch das Äquivalent für Ihren Paketmanager. Für pnpm verwenden Sie pnpm/action-setup vor dem Install-Schritt. Für yarn ersetzen Sie npm install mit yarn install --frozen-lockfile.

Verwandte Tools

Weitere github-pages-tools

Auch ausprobieren

Auch ausprobieren