Zum Inhalt springen

Veröffentliche deine Astro-Website bei GitHub Pages

Du kannst GitHub Pages verwenden, um eine Astro-Website direkt von einem Repository auf GitHub.com zu hosten.

Wie du sie veröffentlichst

Abschnitt betitelt Wie du sie veröffentlichst

Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du GitHub Actions verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub liegen.

Astro pflegt die offizielle withastro/action, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies die README des Pakets, falls du mehr Informationen benötigst.

  1. Setze die Optionen site und bei Bedarf auch base in astro.config.mjs.

    • site sollte in etwa https://<DEIN_NUTZERNAME>.github.io entsprechen
    • base sollte ein Schrägstrich gefolgt vom Namen deines Repositories sein, zum Beispiel /mein-repository.

  2. Erstelle eine neue Datei .github/workflows/deploy.yml in deinem Projekt und füge den folgenden YAML-Code ein:

    name: GitHub Pages Astro CI
    

    on:
      # Löst den Workflow bei jedem Push auf den `main`-Branch aus
      # Verwendest du einen anderen Branch-Namen? Ersetze `main` durch den Namen deines Branches
      push:
        branches: [ main ]
      # Erlaubt es dir, diesen Workflow manuell über den Actions-Tab auf GitHub zu starten
      workflow_dispatch:
    

    # Erlaubt diesem Job das Repository zu klonen und eine Veröffentlichung bei GitHub Pages zu erstellen
    permissions:
      contents: read
      pages: write
      id-token: write
    

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checke dein Repository mit Git aus
            uses: actions/checkout@v4
          - name: Installiere Abhängigkeiten, erzeuge deine Website und lade sie hoch
            uses: withastro/action@v0
    

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Bei GitHub Pages veröffentlichen
            id: deployment
            uses: actions/deploy-pages@v1

  3. Committe die neue Workflow-Datei und pushe sie zu GitHub.

  4. Gehe auf GitHub zum Tab Settings deines Repositories und suche den Abschnitt Pages.

  5. Wähle den gh-pages-Branch und das "/" (root)-Verzeichnis als Source deiner Website aus und drücke Save.

Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen an deinem Astro-Projekt zu deinem Repository pushst, wird die GitHub Action diese automatisch veröffentlichen.

Weitere Veröffentlichungs-Anleitungen