gitlab.mdx

title	description	sidebar	type	i18nReady
Veröffentliche deine Astro-Website mit GitLab Pages	Anleitung zur Veröffentlichung deiner Astro-Website mittels GitLab Pages.	label GitLab Pages	deploy	true

import { Steps } from '@astrojs/starlight/components';

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

:::tip[Auf der Suche nach einem Beispiel?] Schau dir das offizielle Astro-Beispiel für GitLab Pages an! :::

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:

1. Richte die Optionen site und base in astro.config.mjs ein.

   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.

   :::note 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 /.

   :::caution 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. :::

2. Benenne das Verzeichnis public/ in static/ um.

3. 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:

   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     outDir: 'public',
     publicDir: 'static',
   });

4. Ändere die Build-Ausgabe in .gitignore. In unserem Beispiel müssen wir dist/ in public/ ändern:

   # build output
   -dist/
   +public/

5. 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

6. Commite deine Änderungen und pushe sie zu GitLab.

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