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 diese wie folgt an:

Seitentitel festlegen

Projekt-URL und -Name angeben

Logo und Favicon einbinden

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:

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:

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.