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.

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@v2
    - 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