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 gehosted sein.

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-Datei des Pakets, falls du mehr Informationen benötigst.

Astro für GitHub Pages konfigurieren

Abschnitt betitelt Astro für GitHub Pages konfigurieren

Veröffentlichung auf einer github.io UR

Abschnitt betitelt Veröffentlichung auf einer github.io UR

Setze die Optionen site (EN) und base (EN) in astro.config.mjs.

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'my-repo',
})

site

Abschnitt betitelt site

Der Wert für site muss einer der folgenden sein:

base

Abschnitt betitelt base

Ein Wert für base kann erforderlich sein, damit Astro deinen Repository-Namen (z.B. /my-repo) als Stammverzeichnis deiner Website behandelt.

Der Wert für base sollte der Name deines Repositorys sein, der mit einem Schrägstrich beginnt, zum Beispiel /my-blog. Damit Astro weiß, dass das Stammverzeichnis deiner Website /my-repo ist und nicht der Standardwert /.

GitHub-Seiten mit einer eigenen Domain verwenden

Abschnitt betitelt GitHub-Seiten mit einer eigenen Domain verwenden

Um Astro für die Verwendung von GitHub-Seiten mit einer benutzerdefinierten Domain zu konfigurieren, gibst du deine Domain als Wert für site an. Setze keinen Wert für base:

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://example.com',
})

Konfiguriere eine GitHub-Aktion

Abschnitt betitelt Konfiguriere eine GitHub-Aktion

  1. Erstelle eine neue Datei in deinem Projekt unter .github/workflows/deploy.yml und füge die folgende YAML ein.

    deploy.yml
    name: Deploy to GitHub Pages
    

    on:
      # Löse den Workflow jedes Mal aus, wenn du zum `main`-Branch pushst
      # Du verwendest einen anderen Branchnamen? Ersetze `main` durch den Namen deines Branches
      push:
        branches: [ main ]
      # Ermöglicht es dir, diesen Workflow manuell über die Registerkarte „Actions“ auf GitHub auszuführen.
      workflow_dispatch:
    

    # Erlaube diesem Job, das Repo zu klonen und eine Seitenbereitstellung zu erstellen
    permissions:
      contents: read
      pages: write
      id-token: write
    

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v4
          - name: Install, build, and upload your site
            uses: withastro/action@v3
            # with:
              # path: . # Das Stammverzeichnis deines Astro-Projekts innerhalb des Repositorys. (optional)
              # node-version: 20 # Die spezifische Version von Node, die für die Erstellung deiner Website verwendet werden soll. Der Standardwert ist 20. (optional)
              # package-manager: pnpm@latest # Der Node-Paketmanager, der für die Installation von Abhängigkeiten und die Erstellung deiner Website verwendet werden soll. Wird automatisch anhand deines Lockfiles ermittelt. (optional)
    

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4

  2. Gehe auf GitHub auf den Reiter Einstellungen deines Repositorys und suche den Abschnitt Seiten der Einstellungen.

  3. Wähle GitHub Actions als Quelle für deine Seite.

  4. Übertrage die neue Workflow-Datei und pushe sie auf GitHub.

Deine Website sollte jetzt veröffentlicht werden! Wenn du Änderungen am Repository deines Astro-Projekts vornimmst, wird die GitHub-Aktion sie automatisch für dich veröffentlichen.

Weitere Veröffentlichungs-Anleitungen

Wirke mit

Worum geht es?

Issue auf GitHub erstellen

Schnellster Weg, um unser Team auf ein Problem aufmerksam zu machen.

Community