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¶

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.