Veröffentliche deine Astro-Website mit GitLab Pages

GitLab Pages ermöglichen es dir eine Astro-Website für deine GitLab Projekte, Gruppen oder Benutzerkonten bereitzustellen.

So funktioniert die Veröffentlichung

Du kannst eine Astro-Site auf GitLab Pages bereitstellen, indem du GitLab CI/CD nutzt, um deine Site automatisch zu erstellen und bereitzustellen. Dazu muss dein Quellcode auf GitLab gehostet werden und du musst die folgenden Änderungen an deinem Astro-Projekt vornehmen:

Richte die Optionen site (EN) und base (EN) in astro.config.mjs ein.
astro.config.mjs
```
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://<benutzername>.gitlab.io',
  base: '/<mein-repo>',
  outDir: 'public',
  publicDir: 'static',
});
```
site

Der Wert für site muss einer der folgenden sein:
- Die folgende URL basiert auf deinem Benutzernamen: https://<benutzername>.gitlab.io
- Die folgende URL basiert auf deinem Gruppennamen: https://<gruppenname>.gitlab.io
- Deine benutzerdefinierte Domain, wenn du sie in den Einstellungen deines GitLab-Projekts konfiguriert hast: https://example.com
Bei selbstverwalteten GitLab-Instanzen ersetze „gitlab.io“ durch die Pages-Domäne deiner Instanz.

base

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

Setze keinen base-Parameter, wenn deine Seite aus dem Stammverzeichnis veröffentlicht wird.

Der Wert für base sollte der Name deines Repositorys sein, der mit einem Schrägstrich beginnt, zum Beispiel /mein-blog. Damit Astro weiß, dass das Stammverzeichnis deiner Website /mein-repo ist und nicht der Standardwert /.
Achtung
Wenn dieser Wert konfiguriert ist, muss allen deinen internen Seitenlinks dein base-Wert vorangestellt werden:
<a href="/mein-repo/about">Über uns</a>
Siehe mehr über einen base-Wert konfigurieren (EN).
Benenne das Verzeichnis public/ in static/ um.
Setze outDir: 'public' in astro.config.mjs. Diese Einstellung weist Astro an, die statische Build-Ausgabe in einem Ordner namens public abzulegen, der von GitLab Pages für exponierte Dateien benötigt wird.

Wenn du das Verzeichnis public/ als Quelle für statische Dateien in deinem Astro-Projekt verwendet hast, benenne es um und verwende diesen neuen Ordnernamen in astro.config.mjs für den Wert von publicDir.

Hier sind zum Beispiel die richtigen Einstellungen für astro.config.mjs, wenn das Verzeichnis public/ in static/ umbenannt wird:
astro.config.mjs
```
import { defineConfig } from 'astro/config';

export default defineConfig({
  outDir: 'public',
  publicDir: 'static',
});
```
Ändere die Build-Ausgabe in .gitignore. In unserem Beispiel müssen wir dist/ in public/ ändern:
.gitignore
```
# build output
dist/
public/
```

Erstelle im Stammverzeichnis deines Projekts eine Datei namens .gitlab-ci.yml mit dem folgenden Inhalt. Damit wird deine Website erstellt und bereitgestellt, sobald du Änderungen an deinen Inhalten vornimmst:

pages:
  # Das Docker-Image, das für die Erstellung deiner App verwendet wird
  image: node:lts

  before_script:
    - npm ci

  script:
    # Gib hier die Schritte an, die zur Erstellung deiner App nötig sind
    - npm run build

  artifacts:
    paths:
      # Der Ordner, der die zu veröffentlichenden Dateien enthält.
      # Dies muss „public“ genannt werden.
      - public

  only:
    # Löse einen neuen Build aus und setze ihn nur dann ein,
    # wenn es einen Push auf den/die Branch(es) unten gibt
    - main

Commite deine Änderungen und pushe sie zu GitLab.
Gehe auf GitLab in das Menü Deploy deines Repositorys und wähle Pages. Hier siehst du die vollständige URL deiner GitLab Pages Website. Um sicherzustellen, dass du das URL-Format https://benutzername.gitlab.io/mein-repo verwendest, deaktiviere die Einstellung Einzigartige Domain verwenden auf dieser Seite.

Deine Website sollte jetzt veröffentlicht sein! Wenn du Änderungen am Repository deines Astro-Projekts vornimmst, werden sie von der GitLab CI/CD-Pipeline automatisch für dich veröffentlicht.