Skip to main content

Automatische Bereitstellung Ihrer Website

Automatisieren Sie Ihre Codebereitstellung mit GitHub Actions und GitHub Pages, um bei jedem Push in den Hauptzweig Aktualisierungen auf einer Live-Website zu veröffentlichen.

Ihr Feature wird zusammengeführt, sodass Sie es jetzt freigeben können. In diesem Tutorial richten Sie die automatische Bereitstellung so ein, dass jeder Push auf main Ihr Softwareprojekt auf einer Live-Website veröffentlicht.

Hinweis

Die URL Ihrer GitHub Pages Website hängt davon ab, welche Version GitHub Sie verwenden.

  • Am GitHub.com ist Ihre Website unter YOUR-USERNAME.github.io/REPOSITORY veröffentlicht.
  • Wenn Sie GitHub mit Datenresidenz auf GHE.com verwenden, wird Ihre Website unter pages.SUBDOMAIN.ghe.com/YOUR-USERNAME/REPOSITORY veröffentlicht, wobei SUBDOMAIN die Unterdomäne Ihres Unternehmens ist.
  • Am GitHub Enterprise Server wird Ihre Website unter pages.HOSTNAME/YOUR-USERNAME/REPOSITORY veröffentlicht, wobei HOSTNAME der Hostname Ihrer GitHub Enterprise Server-Instanz ist.

Voraussetzungen

Aktivieren von GitHub Pages

Richten Sie GitHub Pages ein, um Ihre Website zu hosten, und verwenden Sie GitHub Actions, um Ihre Website zu erstellen und zu veröffentlichen.

  1. Navigieren Sie auf GitHub zu Ihrem stargazers-log Repository.
  2. Klicken Sie unter Ihrem Repositorynamen auf "Einstellungen".
  3. Klicken Sie in der Randleiste im Abschnitt "Code und Automatisierung" auf "Seiten".
  4. Wählen Sie unter "Erstellen und Bereitstellen" im Dropdownmenü " Quelle " die Option GitHub Actions aus.

Behalten Sie die anderen Einstellungen bei ihren Standardeinstellungen bei. Als Nächstes erstellen Sie Ihren eigenen Workflow , um Ihre Website automatisch zu erstellen und bereitzustellen.

Erstellen eines Bereitstellungsworkflows

Ein Workflow ist eine Reihe automatisierter Schritte, die GitHub Actions für Sie ausführt. Fügen Sie eine hinzu, die Ihre Website erstellt und bereitstellt, wann immer Sie an main pushen.

  1. Erstelle in deinem Repository eine Datei mit dem Namen .github/workflows/deploy.yml.

    1. Klicken Sie auf der Hauptseite Ihres stargazers-log-Repositorys oberhalb der Liste der Dateien auf , und klicken Sie dann auf Neue Datei erstellen.
    2. Gib in das Feld für den Dateinamen .github/workflows/deploy.yml ein.
  2. Fügen Sie den folgenden Workflowinhalt hinzu.

    YAML
    name: Deploy to GitHub Pages
    
    on:
      push:
        branches:
          - main
    
    permissions:
      contents: read
      pages: write
      id-token: write
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Checkout
            uses: actions/checkout@v6
          - name: Setup Pages
            uses: actions/configure-pages@v5
          - name: Upload artifact
            uses: actions/upload-pages-artifact@v2
            with:
              path: '.'
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v2
    
  3. Übernehmen Sie die Datei direkt in die main Verzweigung.

Grundlegendes zum Workflow

Jeder Teil des Workflows hat einen Auftrag:

  • on weist GitHub Actions an, den Workflow bei jedem Push an main auszuführen.
  • permissions dem Workflow den Zugriff gewähren, den er benötigt, um in GitHub Pages zu veröffentlichen.
  • environment stellt den Auftrag mit Ihrer GitHub Pages Website in Verbindung und macht die veröffentlichte URL als ${{ steps.deployment.outputs.page_url }}verfügbar.
  • steps Checken Sie Ihren Code aus, bereiten Sie GitHub PagesIhre Dateien vor, laden Sie Ihre Dateien als Artefakt hoch und stellen Sie sie auf Ihrer Live-Website bereit.

Ihre Live-Website anzeigen

Nachdem Sie den Workflow committet haben, führt GitHub Actions ihn automatisch aus.

  1. Klicken Sie in Ihrem Repository auf die Registerkarte "Aktionen ", um die Ausführung des Workflows zu überwachen.
  2. Klicken Sie auf die neueste Workflowausführung, um eine Zusammenfassung der Auftragsdetails anzuzeigen.
  3. Wenn die Ausführung abgeschlossen ist, öffnen Sie Ihre veröffentlichte Site unter https://pages.HOSTNAME/YOUR-USERNAME/stargazers-log/. Ersetzen Sie YOUR-USERNAME durch Ihren Benutzernamen, und ersetzen Sie HOSTNAME durch Ihren GitHub Enterprise ServerHostnamen.
    • Wenn Ihr Kontobenutzername beispielsweise GitHub lautet, befindet sich Ihre Website unter octocat``https://pages.HOSTNAME/octocat/stargazers-log/.

Ab sofort stellt jeder Push auf main Ihre Website mit Ihren neuesten Änderungen erneut bereit.

Was Sie erstellt haben

In dieser Reihe haben Sie ein vollständiges Softwareprojekt erstellt und den GitHub Workflow praktiziert:

StageWas Sie gelernt haben
Erstellen Ihres SoftwareprojektsRepositorys, README-Dateien
Planen Ihrer ArbeitProbleme, Projekte (Projektgremien)
Lokales Herstellen einer Verbindung
GitHub Desktop, Klonen
Schreiben und Speichern von CodeVerzweigungen, Commits, Pullanforderungen, Copilot
Überprüfen von ÄnderungenPull-Request-Überprüfungen, Copilot
Wird automatisch bereitgestellt
GitHub Actions, GitHub Pages

Nächste Schritte

  • Erweitern Sie Ihr Verständnis von Git und GitHub. Weitere Informationen findest du unter Git und GitHub Lernressourcen.
  • Erkunden Sie Copilot-Chat , um schneller zu lernen und Hilfe während des Codes zu erhalten. Weitere Informationen finden Sie in der Dokumentation unter GitHub Enterprise Cloud.
  • Gehen Sie tiefer mit KI und erfahren Sie, wie Agenten wie ein praktischer Codierungspartner agieren können, indem Sie Ideen in kleine umsetzbare Schritte umwandeln, Beispiele generieren und sich wiederholende Arbeit behandeln. Weitere Informationen finden Sie in der Dokumentation unter GitHub Enterprise Cloud.
  • Erfahren Sie mehr über die Automatisierung Ihrer Softwareprojekte mit GitHub Actions Workflows. Weitere Informationen findest du unter Grundlegendes zu GitHub Actions.
  • Fügen Sie eine benutzerdefinierte Domäne hinzu, oder erkunden Sie weitere Möglichkeiten zum Veröffentlichen Ihrer Website mit GitHub Pages. Weitere Informationen findest du unter Erste Schritte mit GitHub Seiten.