Eigenes Dashboard mit Homepage und Docker realisieren 2024

Homepage, die in meinen Augen aktuell beste Lösung zur Realisierung Deines eigenen Dashboards. Habe in einer einfachen schnellen Konfiguration mittels YAML Dein eigenes Dashboard erstellt und angelegt.

mkdir homepage

Gehe in den Ordner homepage und lege den Ordner config mit an.

cd homepage
mkdir config

1.1 Finde Deine PUID und PGID herraus

Deine PUID und Deine PGID können relevant sein, wenn Du den Container nicht als root ausführen möchtest. Dann benötigt Homepage dafür die PUID und PGID des Nutzers, welcher diesen ausführen soll. Gebe dazu einfach id ein und merke Dir die Zahl hinter UID und GID.

id

1.2 Docker Compose Datei anlegen

Erstelle in diesem Ordner eine Docker Compose Datei.

nano docker-compose.yml

Du kannst nun von hier Dir die Basis Docker Compose Daten kopieren und mit einem Rechtsklick einfügen.

version: "3.3"
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - 3000:3000
    volumes:
      - /home/webseite/homepage/config:/app/config # Make sure your local config directory exists
      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
    environment:
      PUID: $PUID
      PGID: $PGID

Du erstellst einen Service homepage, welcher aus dem Image Homepage gebaut wird. Dieser ist über den Port 3000 erreichbar. Hier kannst Du den Port auch ändern, wenn Du möchtest, dann aber nur die Linke Zahl nicht die Rechte. Diese muss auf 3000 stehen bleiben, da sie für die interne Containerkommunikation ist.

Das env_file ist eine Datei .env, in welcher wir später unsere einzelnen Variablen speichern. Das Volumen ist dort, wo Deine Daten gespeichert werden sollen, in meinem Falle ist das unter /home/pi/homepage/config . Den Ordner config legen wir gleich auch noch im Ordner homepage an. Das andere Volumen ist optional, falls Du auch die Daten aus dem aktuellen Docker auslesen möchtest. Wir lassen uns die Möglichkeit offen und schauen, ob wir das noch verwenden können.

2. .env Datei erstellen

Speicher und schließe zunächst mit Strg + S und Strg + X die docker-compose.yml Datei. Im Anschluss legst Du eine neue Datei an, in der Du nun alle Variablen anlegst und verwaltest.

nano .env

Auf diese Datei verweisen wir auch in der docker-compose.yml Datei, und geben somit an, wo der Container seine Variablen herbekommen soll.

In dieser Datei legst Du zunächst einmal die Variable PUID und PGID an. Diesen beiden weißt Du im Anschluss die jeweilige Nummer zu, welche Du zuvor mit dem Befehl id ausgelesen hast. Zum Beispiel:

PUID=1000
PGID=1000

Auch diese Datei speicherst und schließt Du mti einem Strg + S und Strg + X.

Ist dies getan, kannst Du das erste Mal Deinen Homepage-Container starten. Das geht so:

docker compose up -d

Zu Beginn muss das Docker Image natürlich noch heruntergeladen werden, was einen Moment dauern kann. Gib jetzt die IP-Adresse und den Port in den Browser ein und Du solltest das Homepage-Dashboard angezeigt bekommen. Achte darauf http:// zu nutzen.

3. Konfiguration

Gehe jetzt in den config-Ordner. Hier drin werden alle yaml-Dateien gepseichert, welche für die Funktionen und das Design Deiner Homepage zuständig sind.

Zu den einzelnen yaml-Dateien, gibt es ebenfalls eine Dokumentation, welche Du hier einsehen kannst:

• Settings
• Bookmarks
• Services
• Service Widgets
• Kubernetes
• Docker
• Custom CSS & JS

Welche Yaml-Datei ist wofür?

Bookmarks

Bookmarks bietet Dir die Möglichkeit nur Links auf Deiner Homepage zu hinterlegen ohne die Funktionen eines Services.

- Webseite:
    - Frederic Kohl:
        - abbr: FK
          href: https://kohlfrederic.de/

- Developer:
    - Github:
        - abbr: GH
          href: https://github.com/

Docker und Kubernetes

In dieser YAML-Datei kannst Du alle Deinen Docker Instanzen, welche Du betreibst, auflisten, um sie später bei Deinen Containern als Quelle angeben zu können. Somit können auch hier wieder alle Instanzen an einem Ort gepflegt werden. Das Gleiche gilt für Deine Kubernetes-YAML-Datei.

Services

Liste hier unter anderem Deine Nextcloud und viele viele weitere Services auf, mit einem Service Widget erweitert werden können. Über das Widget kannst Du im Anschluss zum Beispiel bei Deiner FRITZ!Box Status, Laufzeit, empfangene und gesendete Informationen auslesen. Welche Widgets es noch gibt, siehst Du hier.

# Gruppe
- FRITZ!Box:
    - FRITZ!Box:
        icon: avmfritzbox.png
        href: http://fritz.box/
        siteMonitor: http://fritz.box/
        widget:
          type: fritzbox
          url: http://fritz.box
          fields: ["connectionStatus", "uptime", "down", "up"]

Settings

Setze, hier bestimme allgemeine Parameter / Einstellungen für Deine Homepage. Welche Du alle hier einstellen kannst, kannst Du auch hier nochmal nach lesen. Ich habe zu Beispiel hier meine Provider hinterlegt, das Design und die Sprache angepasst. Auch kannst Du zum Beispiel angeben, wie mit Fehlermeldungen auf Deiner Homepage umgegangen werden soll. Mithilfe der Provider hast Du die Möglichkeit zu Beispiel API-Keys und weitere Werte an einem zentralen Ort zu verwalten.

providers:
  openweathermap: ''
#  weatherapi: weatherapiapikey

theme: light

hideErrors: true
language: de

Widgets

Datum, Wetter, Auslastung Deines Hosts und viele weitere Informationen kannst Du in dieser Yaml-Datei pflegen, welche im Anschluss oben im Header angezeigt werden. Welche Möglichkeiten Du hast, kannst Du auch unter diesem Punkt einsehen.

- resources:
    cpu: true
    memory: true
    disk: /
    cputemp: true
    uptime: true
    units: celcius # only used by cpu temp
    refresh: 3000 # optional, in ms

- datetime:
    locale: de
    text_size: xl
    # 13:37
    format:
      timeStyle: short
      dateStyle: short
      hourCycle: h23

- openweathermap:
    #label: #optional
    latitude: #xxxxx
    longitude: #xxxxx
    units: metric # or imperial
    provider: openweathermap
    #apiKey: youropenweathermapkey # required only if not using provider, this >
    cache: 5 # Time in minutes to cache API responses, to stay within limits

Titelbild von Homepage