Dashy Docker : ton dashboard homelab ultra-personnalisable avec widgets

# intermediaire # auto-hebergement # docker # dashboard # homelab
Brandon Visca
Date de publication:

💡 TL;DR

  • C’est quoi ? Un dashboard homelab dynamique avec widgets intégrés (météo, bourse, monitoring, statuts services) et une interface web de configuration
  • Pourquoi ? Parce qu’un simple tableau de liens ne suffit plus quand tu veux voir la température de ton NAS, le cours du Bitcoin et l’état de tes conteneurs en un coup d’œil
  • Comment ? Un conteneur Docker, un fichier conf.yml ou l’éditeur visuel intégré, et tu as une page d’accueil vivante pour tout ton homelab

Un tableau de liens, c’est bien. Un tableau de liens vivant, c’est mieux.

Tu as déjà monté un Homer Dashboard ou un équivalent statique. Tu as tes jolies icônes, tes groupes de services, tout est bien rangé. Mais à force, tu te retrouves à ouvrir cinq onglets supplémentaires rien que pour vérifier :

Dashy résout ce problème en ajoutant des widgets directement sur ta page d’accueil. Pas dans une autre appli. Pas dans un onglet caché. Directement à côté de tes liens Plex, Nextcloud et Portainer. C’est le dashboard homelab qui passe au niveau supérieur.

Table des matières

Table des matières

Qu’est-ce que Dashy et pourquoi l’installer avec Docker ?

Dashy est un tableau de bord auto-hébergé créé par Alicia Sykes, distribué sous licence MIT. Le projet est hébergé sur GitHub sous le nom Lissy93/dashy et compte aujourd’hui plus de 18 000 étoiles. Ce n’est pas rien.

Contrairement à un dashboard purement statique, Dashy embarque un backend Node.js léger, une interface Vue.js réactive et un système de widgets très complet. Tu peux tout configurer via un fichier YAML (conf.yml) ou directement depuis l’interface web, modification en temps réel incluse.

Ce qui le distingue :

Dashy vs Homer : quand choisir l’un ou l’autre ?

Si tu hésites avec Homer Dashboard, voici la règle simple : Homer est une page d’accueil statique et légère. Dashy est un cockpit interactif. Si tu as 40 services et un Raspberry Pi 3, Homer est probablement plus sage. Si tu as un serveur avec un peu de marge et que tu veux des widgets visuels, Dashy est fait pour toi.

CritèreHomerDashy
PoidsUltra-léger (~1 Mo)Plus lourd (Node.js + Vue.js)
WidgetsAucunMétéo, bourse, monitoring, etc.
ConfigurationYAML manuelYAML + éditeur visuel
Statuts servicesPing simplePing + vérification de port + uptime
Personnalisation CSSOuiOui + thèmes préfaits
AuthentificationNon nativeBasique, Keycloak, headers
Idéal pourPage d’accueil minimalisteDashboard central interactif

Prérequis

Avant de commencer, il te faut :

Dashy Docker : installation avec Docker Compose

La méthode la plus propre et la plus simple reste Docker Compose. Tu crées un dossier dédié, un fichier compose.yml, et c’est parti.

Crée un répertoire pour Dashy :

mkdir -p ~/docker/dashy && cd ~/docker/dashy

Crée le fichier compose.yml :

services:
  dashy:
    image: lissy93/dashy:latest
    container_name: dashy
    restart: unless-stopped
    ports:
      - "8080:80"
    volumes:
      - ./conf.yml:/app/public/conf.yml
    environment:
      - NODE_ENV=production
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost"]
      interval: 1m
      timeout: 10s
      retries: 3

Lance le conteneur :

docker compose up -d

Attends une dizaine de secondes que le build interne se termine (Dashy compile le frontend au premier démarrage), puis ouvre http://IP_DU_SERVEUR:8080 dans ton navigateur.

Pourquoi monter conf.yml en volume ? Parce que toute la configuration de Dashy vit dans ce fichier. Si tu ne le montes pas en volume persistant, tu perds tout à chaque redémarrage du conteneur. C’est la règle d’or.

Configuration de base avec conf.yml

Dashy se configure principalement via un fichier YAML. Voici un exemple minimal et fonctionnel pour démarrer :

pageInfo:
  title: Mon Homelab
  description: Tableau de bord central de mes services
  navLinks:
    - title: GitHub
      path: https://github.com
    - title: Documentation
      path: https://dashy.to/docs

appConfig:
  theme: adventure
  layout: auto
  iconSize: medium
  language: fr
  auth:
    enableGuestAccess: true

sections:
  - name: Média
    icon: "fas fa-film"
    items:
      - title: Plex
        description: Serveur multimédia
        icon: "hl-plex"
        url: http://192.168.1.10:32400
        target: sametab
        statusCheck: true
        statusCheckInterval: 60

      - title: Jellyfin
        description: Alternative open source à Plex
        icon: "hl-jellyfin"
        url: http://192.168.1.10:8096
        target: sametab
        statusCheck: true

  - name: Administration
    icon: "fas fa-server"
    items:
      - title: Portainer
        description: Gestion des conteneurs Docker
        icon: "hl-portainer"
        url: http://192.168.1.10:9000
        target: sametab
        statusCheck: true

      - title: Nextcloud
        description: Cloud personnel
        icon: "hl-nextcloud"
        url: http://192.168.1.10:8080
        target: sametab
        statusCheck: true

Les points essentiels à retenir :

Les widgets : le cœur de Dashy

C’est ici que Dashy distance tous les dashboards statiques. Tu peux insérer des widgets directement dans tes sections, à côté de tes liens.

Widget météo

Affiche la météo actuelle et les prévisions pour une ville donnée :

sections:
  - name: Informations
    icon: "fas fa-cloud-sun"
    widgets:
      - type: weather
        options:
          city: Paris
          units: metric
          apiKey: TA_CLE_OPENWEATHERMAP

Tu dois créer une clé API gratuite sur OpenWeatherMap. Le widget affiche la température, l’humidité et une icône météo animée.

Widget bourse et crypto

Pour suivre le cours de tes actions ou cryptos en direct :

      - type: stock-price
        options:
          symbols:
            - BTC-USD
            - ETH-USD
            - AAPL
          chart: true

Les données proviennent de Yahoo Finance. Pas besoin de clé API.

Widget monitoring système

Dashy propose un widget qui récupère les métriques du système hôte via une petite API. Pour cela, tu dois d’abord installer l’agent système de Dashy sur ton serveur ou utiliser un endpoint compatible.

      - type: system-info
        options:
          hostname: true
          uptime: true
          cpu: true
          memory: true
          os: true

Si tu utilises déjà Netdata pour monitorer ton infrastructure, tu peux aussi intégrer un widget iframe pointant vers ton dashboard Netdata. Ce n’est pas aussi élégant qu’un widget natif, mais ça fonctionne parfaitement.

Widget horloge et date

Simple mais efficace, surtout quand tu gères des serveurs dans plusieurs fuseaux horaires :

      - type: clock
        options:
          timeZone: Europe/Paris
          format: 24
          showDate: true

Widget RSS / News

Pour afficher les derniers articles d’un flux RSS directement sur ton dashboard :

      - type: rss-feed
        options:
          rssUrl: https://www.cert.ssi.gouv.fr/alerte/feed/
          limit: 5

Pratique pour suivre les alertes de sécurité ou les actualités tech sans quitter ton homelab.

Widget recherche

Ajoute une barre de recherche qui peut interroger plusieurs moteurs ou ton propre système :

      - type: search
        options:
          searchEngines:
            - name: Google
              url: https://www.google.com/search?q=
            - name: Reddit
              url: https://www.reddit.com/search/?q=

Les statuts des services : ton NOC personnel

Le système de statuts de Dashy est plus évolué qu’un simple ping. Tu peux configurer :

Exemple avancé :

      - title: Uptime Kuma
        url: http://192.168.1.10:3001
        statusCheck: true
        statusCheckUrl: http://192.168.1.10:3001/api/status-page
        statusCheckInterval: 120
        statusCheckAllowInsecure: false

Sur le dashboard, chaque service affiche une pastille colorée :

Si tu as Uptime Kuma déjà en place pour l’historique et les alertes, les statuts Dashy servent de complément visuel immédiat. Tu ouvres ton dashboard, tu vois en un coup d’œil ce qui est up et ce qui est down. Pas besoin de naviguer dans une autre interface.

Thèmes et personnalisation visuelle

Dashy embarque une douzaine de thèmes prêts à l’emploi. Tu changes de thème dans l’éditeur visuel ou directement dans le YAML :

appConfig:
  theme: adventure

Les thèmes disponibles incluent callisto, night, minimal-light, adventure, nord, matrix, cyberpunk, lissy, et bien d’autres. Chaque thème modifie les couleurs, les polices, les arrondis et les effets visuels.

Tu peux aussi créer ton propre thème en surchargeant les variables CSS. Dans appConfig :

  customCss: |
    :root {
      --primary: #ff6b6b;
      --background: #1a1a2e;
      --card-background: #16213e;
    }

L’éditeur visuel te permet de prévisualiser les changements en temps réel. C’est addictif, ne m’en veux pas si tu passes ta soirée dessus.

Sécurité et exposition sur Internet

Par défaut, Dashy n’a pas d’authentification. Si tu l’exposes sur Internet, configure au minimum l’un des trois modes d’auth disponibles.

Authentification basique

Dans le YAML :

appConfig:
  auth:
    enableGuestAccess: false
    users:
      - user: admin
        hash: MON_HASH_BCRYPT
        type: admin

Le hash doit être un bcrypt. Tu peux le générer avec la commande fournie dans la documentation officielle de Dashy.

Derrière un reverse proxy

Si tu utilises Traefik ou Nginx Proxy Manager, configure Dashy pour écouter en local et laisse ton reverse proxy gérer le HTTPS. C’est le setup recommandé pour un homelab sécurisé.

Exemple avec Traefik (labels Docker) :

    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.dashy.rule=Host(`dashy.tondomaine.com`)"
      - "traefik.http.routers.dashy.tls=true"
      - "traefik.http.routers.dashy.tls.certresolver=letsencrypt"
      - "traefik.http.services.dashy.loadbalancer.server.port=80"

N’oublie pas de désactiver le port mapping direct (ports: - "8080:80") si tu passes par Traefik, pour éviter l’exposition directe.

Mise à jour et sauvegarde

Dashy évolue régulièrement. Pour mettre à jour sans perdre ta configuration :

cd ~/docker/dashy

# Sauvegarde
cp conf.yml conf.yml.$(date +%Y%m%d).bak

# Mise à jour
docker compose pull
docker compose up -d

Le conteneur recompilera le frontend au premier démarrage. Cela peut prendre 30 à 60 secondes. Sois patient.

Pour sauvegarder ta config à long terme, versionne ton conf.yml dans Git ou dans ton système de backup habituel. C’est un fichier texte de quelques kilo-octets, il ne coûte rien à conserver.

Débogage et pièges courants

Le dashboard reste blanc au démarrage Dashy compile le frontend au premier lancement. Attends 30 à 60 secondes. Vérifie les logs avec docker logs dashy.

Les widgets météo ne fonctionnent pas Vérifie ta clé API OpenWeatherMap. Le plan gratuit est limité à 1000 appels par jour, ce qui largement suffit pour un usage personnel.

Les statuts des services affichent tous le rouge Assure-toi que les conteneurs Dashy peuvent joindre les IPs et ports de tes services. Si tes services tournent dans des réseaux Docker isolés, Dashy doit soit être sur le même réseau, soit utiliser les IPs publiques de l’hôte.

La personnalisation CSS ne s’applique pas Le champ customCss doit être une chaîne multiligne YAML avec le pipe (|). Une simple ligne ne fonctionnera pas.

Conclusion

Dashy transforme ton homelab d’une simple collection de liens en un cockpit de pilotage véritablement utile. Entre les widgets de monitoring, les statuts en temps réel et la personnalisation poussée, c’est l’outil qu’il te faut si tu dépasses le stade du dashboard statique.

Il demande un peu plus de ressources qu’une page HTML brute, mais il en rend le double en fonctionnalités. Monte-le en Docker, sauvegarde ton conf.yml, et tu auras un tableau de bord qui grandit avec ton infrastructure sans jamais te demander où en est ton serveur.

Share
Next
Tsdproxy Docker : reverse proxy automatique Tailscale pour conteneurs