In diesem Beitrag zeige ich dir, wie du das Homer-Dashboard installieren und konfigurieren kannst auf dem Raspberry Pi. Homer ist eine Open-Source-Anwendung für personalisierte Dashboards, die auf deinem Raspberry Pi (oder einem anderen Home-Server) mit Docker installiert und konfiguriert werden kann. Die Nutzung eines Home-Servers bietet viele Vorteile, darunter die zentrale Verwaltung und Überwachung deiner selbst gehosteten Dienste, erhöhte Datensicherheit und volle Kontrolle über deine Anwendungen und Daten. Mit Homer kannst du all diese Vorteile in einem übersichtlichen Dashboard vereinen und dein Heimnetzwerk optimal organisieren.
Voraussetzungen Für ein Homer-Dashboard:
- Raspberry Pi (oder anderer Server)
- Docker
- Portainer
Homer-Dashboard installieren
Das installieren ist der einfache Part, dafür gehen wir auf unsere Portainer Website, Navigieren zu Stacks in unserem Environment und klicken auf New Stack.
Dort vergeben wir zuerst mal ein Namen und Fügen dann folgenden Code in den Webeditor ein.
version: "2"
services:
homer:
image: b4bz/homer:latest
container_name: homer
ports:
- 1234:8080
volumes:
- /data/homer/config:/www/config
volumes:
config:
Den Port könnt ihr nach eurer Wahl anpassen (der vordere ist für die Host Seite, der hintere für den Container bleibt so wie er ist). Den Pfad zu den Persistenten Daten könnt ihr auch ändern/anpassen.
Danach drücken wir auf “Deploy the Stack”, warten kurz, und danach sollte das Homer Dashboard auch schon installiert sein.
Unter <strong>http://<IP-Adresse-des-Servers>:1234</strong> können wir das Dashboard nun erreichen.
Kommen wir zum (anfänglich etwas komplizierteren) konfigurieren des Dashboards.
Dazu öffnen wir die config.yaml Datei auf dem Server, welche sich in dem zuvor eingestellten Speicherplatz befindet. In meinem Fall lautet der Pfad “/data/homer/config/config.yml”. Öffnen können wir sie z.B. über SSH in der Console mit dem Befehl “nano /data/homer/config/config.yml”
Hier sollten wir folgendes sehen:
---
# Homepage configuration
# See https://fontawesome.com/v5/search for icons options
# Optional: Use external configuration file.
# Using this will ignore remaining config in this file
# externalConfig: https://example.com/server-luci/config.yaml
title: "App dashboard"
subtitle: "Homer"
# documentTitle: "Welcome" # Customize the browser tab text
logo: "assets/logo.png"
# Alternatively a fa icon can be provided:
# icon: "fas fa-skull-crossbones"
header: true # Set to false to hide the header
# Optional: Different hotkey for search, defaults to "/"
# hotkey:
# search: "Shift"
footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example).
# You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity.
# Optional: Proxy / hosting option
proxy:
useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level.
# Set the default layout and color scheme
defaults:
layout: columns # Either 'columns', or 'list'
colorTheme: auto # One of 'auto', 'light', or 'dark'
# Optional theming
theme: default # 'default' or one of the themes available in 'src/assets/themes'.
# Optional custom stylesheet
# Will load custom CSS files. Especially useful for custom icon sets.
# stylesheet:
# - "assets/custom.css"
# Here is the exhaustive list of customization parameters
# However all value are optional and will fallback to default if not set.
# if you want to change only some of the colors, feel free to remove all unused key.
colors:
light:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#f5f5f5"
card-background: "#ffffff"
text: "#363636"
text-header: "#424242"
text-title: "#303030"
text-subtitle: "#424242"
card-shadow: rgba(0, 0, 0, 0.1)
link: "#3273dc"
link-hover: "#363636"
background-image: "assets/your/light/bg.png"
dark:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#131313"
card-background: "#2b2b2b"
text: "#eaeaea"
text-header: "#ffffff"
text-title: "#fafafa"
text-subtitle: "#f5f5f5"
card-shadow: rgba(0, 0, 0, 0.4)
link: "#3273dc"
link-hover: "#ffdd57"
background-image: "assets/your/dark/bg.png"
# Optional message
message:
# url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
# mapping: # allows to map fields from the remote format to the one expected by Homer
# title: 'id' # use value from field 'id' as title
# content: 'value' # value from field 'value' as content
# refreshInterval: 10000 # Optional: time interval to refresh message
#
# Real example using chucknorris.io for showing Chuck Norris facts as messages:
# url: https://api.chucknorris.io/jokes/random
# mapping:
# title: 'id'
# content: 'value'
# refreshInterval: 10000
style: "is-warning"
title: "Optional message!"
icon: "fa fa-exclamation-triangle"
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
- name: "Link 1"
icon: "fab fa-github"
url: "https://github.com/bastienwirtz/homer"
target: "_blank" # optional html tag target attribute
- name: "link 2"
icon: "fas fa-book"
url: "https://github.com/bastienwirtz/homer"
# this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file
# see url field and assets/page.yml used in this example:
- name: "Second Page"
icon: "fas fa-file-alt"
url: "#page2"
# Services
# First level array represents a group.
# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:
- name: "Application"
icon: "fas fa-code-branch"
# A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
# logo: "path/to/logo"
items:
- name: "Awesome app"
logo: "assets/tools/sample.png"
# Alternatively a fa icon can be provided:
# icon: "fab fa-jenkins"
subtitle: "Bookmark example"
tag: "app"
keywords: "self hosted reddit" # optional keyword used for searching purpose
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optional html tag target attribute
- name: "Another one"
logo: "assets/tools/sample2.png"
subtitle: "Another application"
tag: "app"
# Optional tagstyle
tagstyle: "is-success"
url: "#"
- name: "Other group"
icon: "fas fa-heartbeat"
items:
- name: "Pi-hole"
logo: "assets/tools/sample.png"
# subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
tag: "other"
url: "http://192.168.0.151/admin"
type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
target: "_blank" # optional html a tag target attribute
# class: "green" # optional custom CSS class for card, useful with custom stylesheet
# background: red # optional color for card to set color directly without custom stylesheet
Hier könnt ihr im Oberen Teil einige Anpassungen vornehmen wie den Titel der Seite ändern, Header/Footer ein/ausschalten und benennen, Farben ändern, die Anzahl der Spalten anpassen oder das Theme ändern. ich benutze das Catpucchin Theme welches ganz unten auf dieser Seite zu finden ist.
Die eigentlichen Links passt ihr weiter unten unter #Services an hier würde ich empfehlen ein leeres Template zu erstellen welches dann für jeden neuen Service benutzt werden kann z.B.:
- name: ""
logo: “”
subtitle: ""
tag: "app"
keywords: ""
url: ""
#target: "_blank" # optional html tag target attribute
Target habe ich hier auskommentiert, soll der Service in einem neuen Tab geöffnet werden entfernen wir einfach das #.
Wenn ihr eure config.yml Datei angepasst habt könnte Homer am ende zum Beispiel so aussehen:
Die config.yml zu meinem Dashboard habe ich zum besseren Verständnis hier nochmal vollständig angehängt:
---
title: "Dashboard"
subtitle: “Max Dashboard”
icon: "fas fa-brands fa-servicestack"
stylesheet:
- 'assets/cat.css'
header: false # Set to false to hide the header
footer: false #'<p>Max Dashboard</p>' # set false if you want to hide it.
columns: “4”
connectivityCheck: true
defaults:
layout: columns # Either 'columns', or 'list'
colorTheme: auto # One of 'auto', 'light', or ‘dark’
theme: default
colors:
light:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#f5f5f5"
card-background: "#ffffff"
text: "#363636"
text-header: "#424242"
text-title: "#303030"
text-subtitle: "#424242"
card-shadow: rgba(0, 0, 0, 0.1)
link: "#3273dc"
link-hover: "#363636"
background-image: "assets/your/light/bg.png"
dark:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#131313"
card-background: "#2b2b2b"
text: "#eaeaea"
text-header: "#ffffff"
text-title: "#fafafa"
text-subtitle: "#f5f5f5"
card-shadow: rgba(0, 0, 0, 0.4)
link: "#3273dc"
link-hover: "#ffdd57"
background-image: "assets/your/dark/bg.png"
services:
- name: "Raspberry Pi"
icon: "fas fa-brands fa-raspberry-pi"
items:
- name: "Pi-Hole"
logo: "assets/pihole.png"
subtitle: "DNS/DHCP-Server"
apikey: "*************************"
type: "PiHole"
tag: "self-hosted"
keywords: "self hosted DNS" # optional keyword used for searching purpose
url: "https://pihole.*****.de/admin/"
target: "_blank" # optional html tag target attribute
- name: "Portainer"
logo: "assets/portainer.png"
subtitle: "Raspberry"
tag: "self-hosted"
type: "Portainer"
url: "https://portainer.*****.de/"
- name: "Shell Box"
logo: "assets/shell.png"
subtitle: "Raspberry Web SSH"
tag: "self-hosted"
keywords: "SSH,shell,console,bash" # optional keyword used for searching purpose
url: "https://sshbox.*****.de"
target: "_blank" # optional html tag target attribute
- name: "Storage"
logo: "assets/files.png"
subtitle: "Raspberry"
tag: "self-hosted"
keywords: "Datein,Files,Storage" # optional keyword used for searching purpose
url: "https://files.*****.de"
target: "_blank" # optional html tag target attribute
- name: "Surface Go"
icon: "fas fa-brands fa-windows"
items:
- name: "Pi-Hole"
logo: "assets/pihole.png"
subtitle: "DNS-Server"
apikey: "************************"
type: "PiHole"
tag: "self-hosted"
keywords: "self hosted DNS" # optional keyword used for searching purpose
url: "https://xpihole.*****.de/admin/"
target: "_blank"
- name: "Portainer"
logo: "assets/portainer.png"
subtitle: "Surface"
tag: "self-hosted"
url: "https://xportainer.*****.de"
- name: "Shell Box"
logo: "assets/shell.png"
subtitle: "Surface Web SSH"
tag: "self-hosted"
keywords: "SSH,shell,console,bash" # optional keyword used for searching purpose
url: "https://xsshbox.*****.de"
- name: "Storage"
logo: "assets/files.png"
subtitle: "Surface"
tag: "self-hosted"
keywords: "Datein,Files,Storage" # optional keyword used for searching purpose
url: "https://xfiles.*****.de"
- name: "Services"
icon: "fas fa-brands fa-servicestack"
items:
# - name: "Homarr"
# logo: "assets/homar.png"
# subtitle: "Dashboard"
# tag: "self-hosted"
# url: "https://dash.*****.de"
- name: "Trilium"
logo: "assets/trilium.webp"
subtitle: "Notizbuch"
tag: "self-hosted"
url: "https://notes.*****.de"
- name: "Plex"
logo: "assets/Plex.png"
subtitle: "Streaming"
tag: "self-hosted"
url: "https://plex.*****.de"
- name: "Jellyfin"
logo: "assets/jelly.png"
subtitle: "Streaming"
tag: "self-hosted"
url: "https://jelly.*****.de/web/"
- name: "Wordpress"
logo: "assets/wp.png"
subtitle: "Website"
tag: "self-hosted"
url: "https://wp.*****.de"
- name : ""
#icon: "fas fa-solid fa-cloud2"
items:
- name: "Weather"
locationId: "******"
apikey: "***************************"
units: "metric"
background: "circle"
type: "OpenWeather"
- name: "Whatsapp"
logo: "assets/whatsapp.png"
subtitle: "Web"
tag: "web"
url: "https://web.whatsapp.com"
- name: "Gmail"
logo: "assets/gmail.png"
subtitle: "E-Mail"
tag: "web"
url: "https://mail.google.com/mail/u/0/#inbox"
- name: "Cloudflare"
logo: "assets/Cloudflare.png"
subtitle: "Zero Trust Network"
tag: "web"
keywords: "cloudflare,hosting,DNS,E-Mail,Mail" # optional keyword used for searching purpose
url: "https://one.dash.cloudflare.com/"
- name: "LAN Links"
logo: "assets/lan.png"
#icon: "fas fa-solid fa-network-wired"
subtitle: "Local"
url: “#lan”Dein personalisiertes Dashboard auf dem Raspberry Pi
Mit dieser Anleitung hast du nun die grundlegenden Schritte zur Installation und Konfiguration von Homer auf deinem Raspberry Pi mit Docker kennengelernt. Durch die Verwendung von Portainer wird der Prozess erheblich vereinfacht und bietet dir eine benutzerfreundliche Oberfläche zur Verwaltung deiner Container. Die Konfigurationsmöglichkeiten von Homer sind vielfältig und ermöglichen es dir, dein Dashboard ganz nach deinen Bedürfnissen anzupassen. Mit ein wenig Experimentierfreude kannst du dein eigenes, maßgeschneidertes Dashboard erstellen und so den Überblick über deine selbst gehosteten Dienste behalten. Viel Spaß beim Ausprobieren und Anpassen!
