Heimdall - Dashboard web

https://heimdall.site/

Je n'ai jamais été un grand fan des favoris du navigateur et, de fait, je n'en ai presque aucun. Et, assez logiquement, je n'affiche presque jamais la barre des favoris.

Je ne visite régulièrement que quelques sites et l'historique de mon navigateur s'en souvient ; sinon, un célèbre moteur de recherche s'en souvient pour moi.

Cela dit, je ne suis pas contre une page d'accueil personnalisée et Heimdall me convient très bien pour le moment.

Heimdall est une application web que vous pouvez auto-héberger (et c'est un jeu d'enfant avec Docker) sur votre ordinateur.

Voici la démo officielle :

Vous allez définir le look&feel de votre page d'accueil en indiquant les liens auxquels vous voulez un accès immédiat et, pour les autres, vous les classerez dans des dossiers. Rien de compliqué.

Mais cela vous donne une manière bien plus agréable d'accéder à vos sites que la gestion dépassée des favoris. C'est peut-être une des choses qui n'ont pas changé depuis trente ans.

Créer votre dashboard​

Créez un dossier de test et placez-vous dedans :

$ mkdir ~/tools/dashboard && cd $_

Dans ce dossier, créez un fichier appelé compose.yaml avec le contenu suivant (voir la page officielle Docker Hub pour la dernière version) :

# cspell:disable
name: tools

services:
  heimdall:
    image: lscr.io/linuxserver/heimdall:latest
    container_name: heimdall
    environment:
      - PUID=${USER_ID:-1000}?
      - PGID=${GROUP_ID:-1000}?
      - TZ=Europe/Brussels
    volumes:
      - ./config:/config
    ports:
      - 80:80?
      - 443:443
    restart: unless-stopped

Lancer le dashboard​

Une fois le fichier compose.yaml créé, lancez simplement cette commande : USER_ID=$(id -u) GROUP_ID=$(id -g) docker compose up --build --detach.

Cette commande va définir nos deux variables USER_ID et GROUP_ID, les initialiser avec vos propres valeurs puis démarrer le container.

Premier lancement​

Une fois la commande docker compose up --build --detach lancée, le container est déjà créé, c'est-à-dire que vous pouvez déjà aller sur http://localhost pour voir le résultat.

http://localhost

Amusons-nous : cliquez sur le dernier bouton en bas à droite (l'icône des paramètres) et, sous Appearance, chargeons une nouvelle image de fond.

http://localhost

C'est beaucoup plus sympa, non ?

Sauvegarder la configuration sur le disque​

Avez-vous remarqué que, dans le fichier compose.yaml, il y a une section appelée volumes avec la configuration suivante ?

volumes:
  - ./config:/config?

Cela signifie que le dossier config de Heimdall sera stocké sur votre disque, dans un dossier appelé config lui aussi. C'est le mécanisme des volumes en action.

Je peux le vérifier en lançant ls -alh sur mon host :

Permissions Size User       Group      Date Modified    Name
drwxr-xr-x     - christophe christophe 2025-01-26 10:36 config
.rw-r--r--   284 christophe christophe 2025-01-26 10:36 compose.yaml▋

Et donc, tout ce que je ferai dans Heimdall sera sauvegardé sur mon ordinateur. Autrement dit, si je dois arrêter et supprimer le container Docker, il me suffira de le relancer pour retrouver tous mes réglages.

Ajouter quelques liens​

Je vous suggère, avant d'ajouter de nouveaux liens, de cliquer d'abord sur l'icône Tags (la cinquième icône en bas à droite) parce que vous allez organiser vos liens avec des tags et qu'il faut donc créer les tags d'abord.

http://localhost

Ajoutez autant de tags que vous voulez. Pour ce tutoriel, je n'en crée qu'un.

Quand c'est fini, cliquez sur le bouton Cancel en haut à droite ou sur le quatrième bouton en bas à droite (appelé Application list).

Créez une nouvelle application. Vous pouvez choisir entre un Application type et un Website. Dans mon usage actuel, je choisis toujours Website. Je remplis ensuite l'URL et je clique sur Go.

Heimdall va extraire le favicon en différentes tailles. Je clique sur celle que je veux.

http://localhost

Heimdall a automatiquement rempli quelques propriétés dans la partie basse de l'écran. Je vais retirer Home dashboard de la zone Tags et taper Docker à la place, c'est-à-dire le tag que j'ai créé précédemment.

http://localhost

Après sauvegarde, j'obtiens ma nouvelle page d'accueil :

http://localhost

On voit que les tags sont représentés comme des dossiers. Si je clique dessus, j'entre dans le dossier et je vois toutes les applications portant ce tag.

Je peux aussi ajouter des applications qui apparaîtront directement sur la page d'accueil (comme des raccourcis sur votre bureau). Pour cela, créez une nouvelle application et gardez Home dashboard dans la liste des tags.

Explorons cette fonctionnalité Application Type :

http://localhost

C'est juste une sorte de snippet. Si je sélectionne Bitwarden là-dedans, Heimdall va faire quelques initialisations de base : il va remplir le champ Application name et l'icône. Bon, pourquoi pas.

Je fais pointer l'URL vers https://vault.bitwarden.com/#/login et je garde Home dashboard comme tag.

http://localhost

Voici le dashboard que j'utilise au travail. Comme c'est très facile d'ajouter de nouveaux éléments, je le modifie dès que je travaille sur un nouveau projet.

http://localhost

Plus de personnalisations​

En cliquant sur la dernière icône en bas à droite, vous pouvez personnaliser encore quelques éléments dans Heimdall. Vous pouvez afficher par ex. un moteur de recherche, ce qui est pratique.

Vous pouvez personnaliser le CSS et ajouter du JS aussi.

Pour aller plus loin​

Visitez le site officiel https://heimdall.site/ pour les mises à jour et la documentation.

Deux autres applications auto-hébergées que je fais tourner à côté de Heimdall : Uptime Kuma, pour savoir quand un de ces liens est hors service, et Memos pour la prise de notes.

Trouvez l'inspiration en cherchant dashboard heimdall homepage dans Google Images.