{"id":3010,"date":"2026-10-28T16:43:44","date_gmt":"2026-10-28T15:43:44","guid":{"rendered":"https:\/\/procyb.fr\/?p=3010"},"modified":"2026-10-28T16:43:44","modified_gmt":"2026-10-28T15:43:44","slug":"une-homepage-auto-hebergee-pour-centraliser-mon-homelab","status":"publish","type":"post","link":"https:\/\/procyb.fr\/index.php\/2026\/10\/28\/une-homepage-auto-hebergee-pour-centraliser-mon-homelab\/","title":{"rendered":"Une homepage auto-h\u00e9berg\u00e9e pour centraliser mon homelab"},"content":{"rendered":"\n\n
\n
RETOUR D\u2019EXP\u00c9RIENCE \u00b7 AUTO-H\u00c9BERGEMENT<\/span><\/div>

Dans un homelab, les services s\u2019accumulent vite : interfaces de virtualisation, stockage, applications web, outils d\u2019administration\u2026 Chaque \u00e9quipement poss\u00e8de son adresse et parfois son port particulier. Les favoris du navigateur rendent service, mais ils ne donnent ni vue d\u2019ensemble ni indication sur la disponibilit\u00e9 des applications.<\/p><\/div>

J\u2019ai donc mis en place une homepage auto-h\u00e9berg\u00e9e, accessible sur mon r\u00e9seau local et \u00e0 distance via VPN. Le point de d\u00e9part \u00e9tait simple : retrouver tous mes acc\u00e8s sur une seule page. Le projet a ensuite \u00e9volu\u00e9 vers un petit tableau de bord, avec une biblioth\u00e8que de favoris web, des historiques de configuration et un suivi r\u00e9seau.<\/p>

01 \u00b7 CENTRALISER<\/span>Mes services, au m\u00eame endroit<\/strong>

Des acc\u00e8s organis\u00e9s et modifiables depuis la page.<\/p><\/div>

02 \u00b7 RETROUVER<\/span>Mes favoris, sur mes appareils<\/strong>

Une biblioth\u00e8que commune, h\u00e9berg\u00e9e sur la VM.<\/p><\/div>

03 \u00b7 OBSERVER<\/span>Un aper\u00e7u du r\u00e9seau<\/strong>

Disponibilit\u00e9, trafic de la VM et tests \u00e0 la demande.<\/p><\/div><\/div>\n

01 \/ LES ACC\u00c8S<\/span><\/span><\/div>

Un point d\u2019entr\u00e9e commun \u00e0 mes appareils<\/h2>\n

La page principale rassemble les services sous forme de tuiles, class\u00e9es par cat\u00e9gories. Chaque acc\u00e8s poss\u00e8de son nom, une description, une adresse et un logo. Une recherche et des filtres \u00e9vitent de parcourir toute la page pour retrouver un outil.<\/p>\n

L\u2019une des am\u00e9liorations les plus utiles concerne l\u2019administration des liens. Au d\u00e9part, une page statique suffisait, mais ajouter une tuile en modifiant le code devenait peu pratique. Les acc\u00e8s se g\u00e8rent d\u00e9sormais depuis l\u2019interface : ajout, modification, d\u00e9placement, changement de cat\u00e9gorie ou suppression.<\/p>\n

Ces changements sont enregistr\u00e9s sur la VM. Je retrouve donc la m\u00eame liste depuis un autre ordinateur, sans recopier un fichier de configuration sur chaque poste. Une actualisation permet de r\u00e9cup\u00e9rer les modifications r\u00e9alis\u00e9es ailleurs.<\/p>\n<\/section>

02 \/ LE D\u00c9PLOIEMENT<\/span><\/span><\/div>

Une architecture adapt\u00e9e \u00e0 ce besoin<\/h2>
Debian<\/span>Docker Compose<\/span>Python<\/span>HTML \/ CSS \/ JavaScript<\/span>JSON<\/span><\/div>\n

La homepage fonctionne sur une VM Debian avec Docker Compose. Les pages utilisent HTML, CSS et JavaScript ; un serveur Python fournit les API et enregistre les donn\u00e9es dans des fichiers JSON.<\/p>\n

Cette organisation s\u00e9pare le programme de ses donn\u00e9es persistantes. Les liens, les favoris et leurs historiques sont conserv\u00e9s dans un dossier d\u00e9di\u00e9, mont\u00e9 dans le conteneur. Le remplacement d\u2019une page ou l\u2019\u00e9volution du serveur ne n\u00e9cessite donc pas de reconstruire manuellement la configuration personnelle.<\/p>\n

Pour ce projet, aucune base de donn\u00e9es s\u00e9par\u00e9e n\u2019est n\u00e9cessaire. Cela facilite la lecture des donn\u00e9es et leur sauvegarde. En contrepartie, il s\u2019agit d\u2019un outil personnel : cette architecture et ses possibilit\u00e9s d\u2019acc\u00e8s ne sont pas celles d\u2019un portail destin\u00e9 \u00e0 de nombreux utilisateurs ind\u00e9pendants.<\/p>\n<\/section>

03 \/ LA DISPONIBILIT\u00c9<\/span><\/span><\/div>

Voir si un service est accessible<\/h2>\n

Chaque tuile peut afficher un voyant de disponibilit\u00e9. Les contr\u00f4les partent de la VM : le r\u00e9sultat d\u00e9crit donc ce qu\u2019elle peut joindre depuis son r\u00e9seau.<\/p>\n

\u25cf VERT<\/span>Port accessible<\/strong>

La connexion TCP au port de l\u2019application r\u00e9ussit.<\/p><\/div>

\u25cf ROUGE<\/span>Connexion impossible<\/strong>

Le port ne r\u00e9pond pas ou le nom ne se r\u00e9sout pas.<\/p><\/div>

\u25cf GRIS<\/span>\u00c9tat non v\u00e9rifi\u00e9<\/strong>

Aucune mesure suffisamment r\u00e9cente n\u2019est disponible.<\/p><\/div><\/div>\n

Cette distinction \u00e9vite une confusion fr\u00e9quente : une machine peut ne pas r\u00e9pondre au ping tout en h\u00e9bergeant un service accessible. \u00c0 l\u2019inverse, une r\u00e9ponse au ping ne garantit pas que l\u2019application fonctionne.<\/p>\n