Zum Inhalt

GitLab Pages erstellen

Mit GitLab Pages können Sie ganz unkompliziert eine eigene statische Webseite direkt aus Ihrem GitLab-Projekt veröffentlichen. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess.

Projekt anlegen

  • Erstellen Sie zunächst ein neues Projekt, indem Sie dieser Anleitung folgen. Alternativ können Sie auf dieser Seite unser Beispiel-Projekt zum Erstellen einer eigenen statischen Webseite auf openCode übernehmen. In dem Projekt befindet sich ein Beispiel einer GitLab-Page mit einem angepassten openCode-Theme. Die Grundlage entspricht diesem Screenshot und kann nach belieben geändert werden:

Screenshot der Startseite im Browser

Natürlich können Sie auch andere Themes oder Generatoren nutzen oder aber Sie nutzen eigene HTML-Dateien – das ist oft der einfachste Weg.

Seiten konfigurieren

Die Datei mkdocs.yml steuert das Aussehen und die Struktur Ihrer Webseite. Passen Sie sie wie folgt an:

Seitentitel festlegen:

yaml site_name: Mein Projektname # Hier kann der Seitentitel geändert werden

Projekt-URL und -Name angeben:

yaml repo_url: https://gitlab.com/IhrBenutzername/meine-webseite # URL zum GitLab-Projekt (bitte anpassen) repo_name: Mein Projektname # Name des GitLab-Projekts (bitte anpassen)

Logo und Favicon einbinden:

yaml theme: logo: assets/logo.svg # Pfad zum Logo der Webseite (bitte anpassen) favicon: assets/icon.svg # Pfad zu dem Icon der Webseite (bitte anpassen)

Eigene Inhalte hinzufügen:

  • Die Startseite Ihrer Webseite befindet sich in der Datei docs/index.md. Passen Sie den Inhalt nach Ihren Vorstellungen an, z. B. mit einer Begrüßung oder einer kurzen Projektbeschreibung.
  • Passen Sie die rechtlichen Informationen Ihrer Seite an:
  • Impressum: Bearbeiten Sie die Datei docs/legal/impressum.md.
  • Datenschutz: Bearbeiten Sie die Datei docs/legal/datenschutz.md.
  • Copyright-Hinweis: Ändern Sie den Eintrag in mkdocs.yml:
  • Erweitern Sie Ihre Webseite mit zusätzlichen Seiten:
  • Erstellen Sie neue Markdown-Dateien (.md) im Ordner docs/, z. B. about.md für eine "Über uns"-Seite.
  • Fügen Sie die neuen Seiten zur Navigation in mkdocs.yml hinzu: yaml nav: - index.md - about.md # z.B. Hinzufügen einer neuen "Über uns"-Seite, diese Liste kann beliebig erweitert werden.

Design anpassen:

  • Bearbeiten Sie die Datei docs/style/extra.css, um das Aussehen Ihrer Seite zu verändern. Hierfür sind CSS-Kenntnisse nötig.
  • Fügen Sie Ihren Markdown-Dateien Bilder hinzu, indem Sie diese im Ordner docs/assets/images/ hinzufügen.
  • Nutzen Sie ein Glossar: In der Datei includes/abbreviations.md können Sie Begriffe definieren, die auf Ihrer Seite hervorgehoben und erklärt werden.

CI/CD-Pipeline einrichten: Die Datei .gitlab-ci.yml steuert den automatischen Aufbau und die Veröffentlichung Ihrer Webseite. Diese Konfiguration sorgt dafür, dass Ihre Webseite bei jedem Push auf den main-Branch automatisch gebaut und veröffentlicht wird.

  • Erstellen Sie im Hauptverzeichnis Ihres Projekts eine Datei namens .gitlab-ci.yml
  • Fügen Sie folgenden Inhalt ein:

`yaml pages: stage: deploy script: - mkdocs build -d public artifacts: paths: - public only: - main

Webseite anzeigen Nach erfolgreichem Aufbau finden Sie Ihre veröffentlichte Seite unter: https://IhrBenutzername.gitlab.io/meine-webseite Den genauen Link können Sie auch in Ihrem Projekt unter „Einstellungen > Pages“ einsehen.