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:

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

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

Projekt-URL und -Name angeben

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

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:

  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.

Info

Mehr informationen zur Nutzung und zur Einrichtung der Seite finden Sie in der Dokumentation des Material-Theme, welches von MkDocs (dem statischen Seiten-Generator) genutzt wird.

Hier finden Sie Informationen zur Erweiterung der Funktionen der Webseite, unter anderem zu folgenden Themen:

• Anpassung der Navigation
• Einrichten eines Blogs
• Nutzbare Erweiterungen
• Anpassung einzelner Webseiten-Komponenten
• ...

Eine Dokumentation zur Nutzung der eingebauten Plugins finden Sie auf dieser Seite.

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:

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

Häufig gestellte Fragen und Probleme

Wo kann ich den Link für die Webseite meines Projekts finden?

Nach erfolgreichem Aufbau finden Sie Ihre veröffentlichte Seite unter: https://PROJEKT_NAME.usercontent.opencode.de

Alternativ, können können Sie den Link zu der Webseite Ihres Pojekts auch in Ihrem Projekt unter Einstellungen > Pages einsehen.

Wie kann ich eine GitLab-Page mit einem Passwort schützen?

Folgen Sie am Besten für das Erstellen einer passwort-geschützten GitLab-Page dieser Schritt-für-Schritt-Anleitung.