Conception de legleau.org — Baie Serveur 19'', Skeuomorphisme & Homelab

La conception de legleau.org est née d’un double constat : la standardisation monotone du web moderne et la volonté de matérialiser visuellement une infrastructure auto-hébergée.

Aujourd’hui, la grande majorité des sites web et portfolios se ressemblent : fonds blancs aseptisés, typographies minimalistes sans relief, coins légèrement arrondis et esthétique Flat Design généralisée. Si ce style épuré répond aux impératifs d’industrialisation des grandes entreprises de la tech, il évacue toute sensation de texture, de poids et de physicalité.

Pour mon espace personnel, j’ai voulu emprunter un chemin diamétralement opposé : concevoir un site web qui ne donne pas l’impression de flotter dans un cloud abstrait, mais qui revendique fièrement son ancrage matériel dans un véritable châssis de baie serveur 19 pouces (Server Rack), propulsé par mon propre cluster local Proxmox VE.

Cet article détaille la genèse de cette démarche : nos partis pris artistiques skeuomorphiques inspirés d’équipements réels des années 70 à nos jours, l’architecture logicielle articulée autour d’Astro.js et d’Obsidian, ainsi que la cartographie complète des conteneurs et flux réseau faisant tourner l’infrastructure.

1. Direction Artistique : La Baie Serveur 19’’ & le Skeuomorphisme

Le parti pris central de legleau.org repose sur une immersion matérielle totale : la page web n’est pas un document abstrait, c’est une baie de brassage 19 pouces. Chaque section, menu, visualiseur ou formulaire s’insère dans ce rack métallique comme une unité physique standardisée (Rack Unit ou “U”).

Les Fondements Physiques du Réalisme Matériel

Pour que l’illusion d’une baie d’acier fonctionne à l’écran, le design doit se plier aux lois rigoureuses de l’optique et de la physique de la matière :

1. La Source Lumineuse Virtuelle Zénithale : L’éclairage de la page est simulé comme provenant du plafond d’une salle serveur. Tous les éléments respectent scrupuleusement cette orientation : les arêtes supérieures des plaques métalliques accrochent des liserés clairs spéculaires (rgba(255, 255, 255, 0.9)), tandis que leurs parties inférieures projettent des ombres portées douces vers le bas.
2. L’Empilement d’Ombres (Shadow Stack) : Aucun élément en relief n’est conçu avec une simple ombre plate. Chaque tôle, vis ou bouton superpose au minimum 4 niveaux d’ombres combinées : une ombre de contact très dense marquant l’ancrage au châssis, une ombre d’ambiance diffuse simulant la profondeur, un biseau interne lumineux (inset) sur l’arête supérieure et une ombre creusée sur la courbure opposée.
3. La Fidélité des Matériaux : Le châssis combine plusieurs textures physiques distinctes :
   • L’acier galvanisé et l’aluminium brossé des montants verticaux et des obturateurs de rack, obtenus par de subtils dégradés linéaires à quinze pour cent de variation de luminance.
   • Le plastique ABS vieilli et jauni aux UV des équipements des années 80 (#dcd4c3 / #c3bba8).
   • Le verre minéral teinté et l’acrylique, intégrant des reflets en biseau et des trames de balayage cathodique.

Anatomie du Châssis : Montants, Rails & Vis Cruciformes

Le conteneur global du site (RackEnclosure) est structuré comme un rack informatique industriel :

• Le Chapeau Supérieur (Toit du Rack) : Une traverse d’acier robuste dotée de quatre fentes d’aération horizontales encastrées et de capuchons d’angle renforcés.
• Les Montants Verticaux (Rails 19’’) : Deux rails latéraux texturés simulant l’acier avec un dégradé métallique à haute brillance, perforés à intervalles réguliers par les découpes carrées caractéristiques destinées aux écrous-cages.
• Les Vis de Fixation Métalliques : Chaque panneau inséré dans la baie est solidement maintenu à ses quatre coins par des vis d’acier chromées, usinées en CSS pur avec une empreinte cruciforme Philips à 45 degrés et une ombre portée circulaire.
• Le Socle Technique (Base Plinth) : Un pied lesté assurant l’ancrage spatial du rack sur le faux plancher technique du datacenter.

Explicitation des Métaphores & Inspirations Matérielles

Chaque composant d’interface du site a été conçu comme une pièce matérielle authentique, inspirée d’appareils de mesure, de périphériques informatiques vintage ou d’équipements de réseau réels :

1. Le Bac à Disquettes 3.5’’ Vintage & Cartouches 80s (FloppyRackPanel)

Plutôt que d’utiliser un carrousel horizontal impersonnel inspiré des plateformes de streaming contemporaines, la navigation parmi les articles du laboratoire prend la forme d’un bac de rangement pour disquettes 3.5 pouces et cartouches de jeu des années 80.

• Inspiration & Boîtier Monobloc : Châssis moulé en plastique ABS rétro jauni par le temps, encadré par des bandes décoratives vintage aux couleurs primaires 80s (jaune ocre, vert sauge, bleu ardoise) avec un effet d’optique 2.5D décalé entre l’avant et le fond du bac.
• Origami 3D Réaliste : Chaque article est encapsulé dans une disquette modélisée en 3D (preserve-3d) avec son chanfrein caractéristique à 45 degrés dans le coin supérieur droit, son encoche de protection en écriture décalée, son étiquette papier à bordures franches et son volet de protection métallique coulissant gravé « LIRE → ».
• Mécanique de Défilement Tactile : Les disquettes reposent dans le bac avec un angle d’inclinaison de 40 degrés (rotateY(-40deg)). Deux gros boutons poussoirs physiques latéraux à flèches ambre phosphorescentes sont directement collés au bloc pour faire défiler la sélection avec une translation compensatoire fluide.

2. L’Oscilloscope Hewlett-Packard HP-1740A (OscilloscopeTelemetryPanel)

Pour la télémétrie matérielle et le monitoring des métriques du cluster, le composant s’inspire directement de l’illustre oscilloscope analogique Hewlett-Packard HP-1740A des années 70-80.

• Façade Bicolore & Sérigraphie Industrielle : Châssis métallique beige clair mat avec sérigraphie technique fine noire, logo Hewlett-Packard estampé et témoin lumineux d’alimentation générale vert.
• Tube Cathodique Phosphorescent (CRT) : Un écran vert profond cerclé d’un cadre noir concave, surmonté d’un graticule de mesure (quadrillage millimétrique) et animé en temps réel par un tracé sinusoïdal oscillant sur Canvas HTML5 avec effet de rémanence de phosphore (glow vert).
• Contrôles Physiques Potentiométriques : Trois boutons rotatifs cylindriques en relief avec repère rouge permettant d’ajuster l’intensité, la base de temps et l’éclairage de la grille par pas de 45 degrés au clic.
• Console LCD de Métrologie : Un cadran numérique à cristaux liquides restituant en direct la puissance consommée par l’onduleur (UPS via Home Assistant), le débit entrant/sortant du pare-feu OPNsense et les jauges de charge CPU des 3 nœuds Proxmox.

3. Le Commutateur Réseau 2U & Embases Keystone RJ45 (ServiceSwitch2u)

Sur la page d’accueil, l’accès aux services auto-hébergés (Immich, Jellyfin, Nextcloud…) est matérialisé par un switch réseau manageable de 2U de hauteur.

• Ports RJ45 et Obturateurs Keystone : Le rack expose une série de ports modulaires. Les connecteurs non attribués affichent un obturateur vierge (EmptyPort) rappelant fidèlement les caches plastiques clipsés dans les baies réelles.
• Rétroéclairage “Vitrail” : Au survol d’un port configuré, l’icône du service s’anime et projette un halo rétroéclairé diffus reprenant très exactement les couleurs dominantes du logo d’origine.
• Diodes LED Rectangulaires d’Activité : Chaque port dispose d’un module inférieur à deux LEDs rectangulaires piloté par le statut réel du conteneur récupéré via Uptime Kuma (vert fixe + clignotement pour le trafic réseau nominal, ambre pour la maintenance ou la mise en attente, rouge éteint pour un service hors ligne).

4. Le Graphe Git sur Circuit Imprimé PCB (PcbGitGraph)

Pour retracer l’historique des commits et l’évolution des projets, le diagramme Git conventionnel est réinventé sous la forme d’une véritable carte électronique à circuit imprimé (PCB).

• Composants Électroniques Traversants : Chaque commit Git est incarné par un composant physique monté en surface ou traversant :
  • Diodes LED colorées et condensateurs électrolytiques cylindriques avec marquage sérigraphié 10µF.
  • Résistances carbone avec leurs bagues de code couleur normalisées.
  • Transistors bipolaires à boîtier TO-92 pour les embranchements (branches split) et fusions (merges).
  • Puces intégrées DIP à pattes latérales avec encoche de détrompage pour le Pin 1.
• Pistes de Cuivre & Vias : Les liaisons entre commits empruntent des pistes de cuivre découpées à 45 degrés avec dégradé or/cuivre (#b87333 / #d4af37), traversant des vias métallisés soudés. Une impulsion lumineuse blanche voyage continuellement le long des pistes actives pour symboliser le flux d’informations.
• Nappe IDE 40 Broches en S : Les différentes plaques de circuit imprimé réparties dans la baie sont interconnectées par des connecteurs IDE noirs et de véritables nappes grises texturées à 40 fils, reconnaissables à leur liseré rouge d’identification.

5. La Chambre d’Impression 3D Core-XY style Bambu Lab X1C (Printer3dRackPanel)

Intégrer la visualisation d’objets tridimensionnels exigeait un réceptacle à la hauteur : une chambre d’impression fermée de nouvelle génération encastrée dans un châssis métallique.

• Enceinte Thermique & Porte Vitrée : Chambre sombre éclairée par une réglette LED supérieure haute intensité, porte vitrée avec reflets biseautés et plateau d’impression PEI texturé sérigraphié.
• Moteur Three.js Multi-formats : Rendu interactif WebGL permettant la manipulation orbitale et le zoom de pièces CAO aux formats .3MF, .STL et .GLB.
• Console Latérale Bambu OS & Commandes Mécaniques : Un écran tactile LCD affichant la température de buse et de plateau, permettant d’activer/désactiver sélectivement chaque sous-ensemble du maillage (meshes), épaulé par une plaque rivetée d’interrupteurs à levier métallique (mode filaire, mode couleur, éclairage) et un bouton poussoir industriel rouge de réinitialisation de vue.

6. Le Moniteur CRT BIOS Rétro (BiosCrtPanel)

Pour les sections de présentation système, le composant reproduit l’expérience d’un tube cathodique des années 90 affichant un écran AMIBIOS / Award BIOS.

• Tube Bombé & Lignes de Balayage : Écran à ratio 4/3 avec reflet spéculaire de verre incurvé, trame de balayage horizontale (scanlines) et filtre SVG de bruit thermique simulant le scintillement du canon à électrons.
• Interface Console Bleue : Typographie monospace blanche sur fond bleu cobalt intense (#000088), cadres en caractères ASCII étendus (┌──┐) et barre inférieure de touches de fonctions interactives (F1 pour le laboratoire, F2 pour le parcours, F3 pour le contact).

7. La Gestion Physique des Pannes : Alarmes & Disjoncteurs

Même les erreurs HTTP 404 et 500 abandonnent les pages blanches d’erreur pour s’incarner dans des incidents physiques d’infrastructure :

• Page 404 (Error404Panel) — Alarme Incendie Industrielle : Un gyrophare rouge d’urgence dôme en verre et cage métallique fixé sur rail de sécurité. Le composant projette un balayage lumineux rouge à 360 degrés sur l’ensemble de l’écran et des parois 3D du datacenter en pur CSS, sans le moindre son agressif mais avec une urgence visuelle immédiate.
• Page 500 (Error500Panel) — Disjoncteur PDU Sauté : Un module d’alimentation industrielle 400V triphasé dont le disjoncteur thermique a basculé vers le bas à la suite d’un court-circuit interne. Le composant met en scène des fusibles en verre claqués, des gerbes d’étincelles blanches animées et un bouton mécanique “RÉARMER LE DISJONCTEUR” qui relève le levier vers le haut, allume la lumière générale de manière stable et fait clignoter la diode LOAD en vert avant de recharger la page.

8. Le Tiroir KVM & la Plaque Constructeur (Navbar)

La barre de navigation supérieure est modélisée comme un tiroir KVM console (Keyboard-Video-Mouse) rétractable :

• Plaque Constructeur “Y.L.G Systems” : Plaque d’aluminium rivetée réagissant à l’approche de la souris par un halo lumineux suiveur, et produisant un éclat lumineux diamant en étoile (lens flare à 4 branches) au clic.
• Boutons Mécaniques KVM : Touches physiques rectangulaires avec témoin LED ambre au survol et LED verte incandescente sur la section en cours de consultation.
• Sticker Réglementaire DEEE / CE Décollé : Une étiquette mat industrielle dont le coin inférieur droit est corné et projette une ombre décollée réaliste, que l’utilisateur peut presser d’un clic pour la “recoller” définitivement (état conservé dans le localStorage).

2. La Stack Web : Astro.js & l’Écosystème Obsidian

Concilier une telle débauche de reliefs skeuomorphiques et d’effets visuels avec des temps de chargement ultra-véloces représentait un défi d’ingénierie logicielle. Choisir un CMS traditionnel (type WordPress) ou une Single Page Application lourde (comme Next.js avec hydratation globale) aurait alourdi la page de centaines de kilo-octets de JavaScript superflus.

C’est pourquoi le choix s’est naturellement porté sur le framework Astro.js, adossé à un flux de rédaction décentralisé dans Obsidian.

flowchart LR
    subgraph Redaction["1. Rédaction & Garden"]
        Obs["Obsidian Vault<br/>(Fichiers Markdown)"]
        Wikilinks["Wikilinks [[...]]<br/>Callouts > [!NOTE]"]
        Obs --> Wikilinks
    end

    subgraph Build["2. Compilateur Astro"]
        Zod["Validation Schémas Zod<br/>(Content Collections)"]
        Splitter["ArticleSectionSplitter<br/>(Découpage en Racks 19'')"]
        Islands["Architecture en Îlots<br/>(Zéro JS par défaut)"]
        Wikilinks --> Zod --> Splitter --> Islands
    end

    subgraph Production["3. Déploiement Statique"]
        Nginx["Serveur NginxPlus<br/>(Fichiers HTML/CSS/Assets)"]
        Client["Visiteurs & Famille<br/>(Temps de chargement < 50ms)"]
        Islands --> Nginx --> Client
    end

    classDef red fill:#1e293b,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef build fill:#0f172a,stroke:#10b981,stroke-width:2px,color:#fff;
    classDef prod fill:#1e1b4b,stroke:#8b5cf6,stroke-width:2px,color:#fff;
    class Redaction red;
    class Build build;
    class Production prod;

Pourquoi Astro.js ?

1. L’Architecture en Îlots (Islands Architecture) : Par défaut, Astro compile l’intégralité du balisage en HTML et CSS statiques stricts, éliminant tout JavaScript côté client. Le texte de mes articles, les structures de la baie et les grilles de ventilation ne coûtent aucun cycle processeur au navigateur de l’utilisateur. Seuls les composants nécessitant une interactivité poussée (le canvas Three.js de l’imprimante 3D, l’oscilloscope de télémétrie ou le polling du switch réseau) sont hydratés chirurgicalement (client:load ou scripts autonomes).
2. Performances Pures & Rendu Statique (SSG) : Le site étant pré-généré sous forme de fichiers HTML statiques, il peut être servi instantanément par un serveur web Nginx optimisé, sans nécessiter d’interpréteur Node.js ou de base de données en production. Les temps de réponse s’expriment en millisecondes.
3. Sécurisation par Schéma Zod (Collections de Contenu) : Astro intègre une validation stricte du frontmatter via Zod (src/content.config.ts). Chaque article rédigé doit respecter scrupuleusement la structure typée (titre, date, description, catégorie, tags, couleur d’accentuation). Si une note incomplète tente d’être publiée, le compilateur bloque la génération avant toute mise en ligne défaillante.
4. Liberté Stylistique Absolue : Contrairement aux systèmes de templates imposés, Astro laisse le développeur maître de son arbre DOM. L’implémentation des ombres physiques, des variables CSS de tôle et des règles Tailwind s’effectue sans aucun conflit d’héritage de styles.

Le Pont avec Obsidian & le Découpage Automatique en Racks

La rédaction s’effectue localement dans l’application de prise de notes Obsidian, sans quitter le confort des fichiers Markdown. Un module sur-mesure développé pour le site (ArticleSectionSplitter.astro) assure la traduction automatique du balisage textuel en composants de baie serveur :

• Séparateurs et Spacers Physiques : Lorsqu’un simple séparateur Markdown --- est rencontré, il est automatiquement converti en un panneau d’obturation métallique de 1U (Spacer1u). Un double séparateur génère un obturateur double de 2U (Spacer2u).
• Découpage des Sections en Panneaux 19’’ : Chaque titre de section (##) clôture le module en cours et instancie un nouveau panneau de rack indépendant (ArticleSectionPanel) doté de ses vis de fixation et de sa propre hiérarchie typographique gravée.
• Callouts Stylisés en Plaques d’Aluminium Rivetées : Les avertissements Obsidian (> [!NOTE], > [!TIP], > [!WARNING]) sont interceptés par une regex et convertis en véritables plaques constructeur métalliques rivetées aux 4 coins, arborant une étiquette papier pastel imprimée avec une texture de grain fibreux.

3. L’Infrastructure Auto-hébergée & Cartographie des Conteneurs

Le site legleau.org n’est pas hébergé sur une instance cloud anonyme : il tourne chez moi, au cœur de mon propre réseau local, orchestré par un hyperviseur Proxmox VE réparti sur trois machines physiques dédiées.

Chaque fonction (routage, sécurité, reverse proxy, forge logicielle, bases de données, applications multimédias et télémétrie) est cloisonnée dans son propre conteneur LXC (Linux Containers) ou sa machine virtuelle QEMU, garantissant une isolation stricte des privilèges et une résilience optimale.

Topologie du Réseau & Inventaire des Conteneurs Proxmox

Voici la cartographie synoptique complète de tous les conteneurs et machines virtuelles concourant au fonctionnement du site et de ses services associés :

flowchart TB
    %% STYLES PERSONNALISES
    classDef wan fill:#0284c7,stroke:#0369a1,stroke-width:2px,color:#fff;
    classDef routerNode fill:#0f172a,stroke:#38bdf8,stroke-width:2px,color:#f8fafc;
    classDef oldNode fill:#1e293b,stroke:#34d399,stroke-width:2px,color:#f8fafc;
    classDef dellNode fill:#1e1b4b,stroke:#a78bfa,stroke-width:2px,color:#f8fafc;
    classDef lxc fill:#334155,stroke:#64748b,stroke-width:1px,color:#fff;
    classDef vm fill:#475569,stroke:#94a3b8,stroke-width:2px,color:#fff;

    %% PERIMETRE EXTERIEUR CLOUDFLARE
    subgraph WAN["☁️ PÉRIMÈTRE EXTERNE (EDGE & WAN)"]
        User["🌐 Visiteurs & Proches"]
        CF["🛡️ Cloudflare Edge<br/>(DNS Anycast, SSL, DDoS, Worker 500 Failover)"]
        User -->|"HTTPS (Port 443)"| CF
    end

    %% NOEUD PROXMOX ROUTER
    subgraph NodeRouter["🖥️ NŒUD PROXMOX 1 : 'router' (Réseau, Sécurité, Proxy)"]
        OPN["🛡️ VM 254 : OPNsense-Core<br/>(Pare-feu, Passerelle NAT, IDS/IPS)"]:::vm
        NPM["🔀 LXC 104 : npmplus (Nginx Proxy Manager)<br/>• Terminaison SSL & Reverse Proxy<br/>• API Status /api/badge/:id<br/>• Hébergement Statique legleau.org"]:::lxc
        CFDDNS["🔄 LXC 111 : cloudflare-ddns<br/>(Mise à jour IP WAN Dynamique)"]:::lxc
        KUMA["📊 LXC 124 : uptimekuma<br/>(Sondes Santé Services & Génération Badges)"]:::lxc
        ADG["🚫 LXC 103 : adguard<br/>(DNS Local & Filtrage)"]:::lxc

        CF -->|"Trafic WAN chiffré"| OPN
        OPN -->|"Routage LAN"| NPM
        CFDDNS -.->|"API Sync IP"| CF
        KUMA -->|"Surveillance HTTP/TCP"| NPM
    end

    %% NOEUD PROXMOX OLD
    subgraph NodeOld["🖥️ NŒUD PROXMOX 2 : 'old' (Développement, Données, Multimédia)"]
        GITEA["🐙 LXC 119 : gitea<br/>(Dépôt Git & CI/CD Actions Runner)"]:::lxc
        PG["🗄️ LXC 114 : postgresql<br/>(Base de Données Relationnelle)"]:::lxc
        DOCK["🐳 LXC 117 : dockage<br/>(Gestionnaire Conteneurs Docker)"]:::lxc
        
        %% Services connectés au Switch 2U
        JELLY["🎬 LXC 105 : jellyfin<br/>(Serveur Streaming Multimédia)"]:::lxc
        IMMI["📸 LXC 118 : immich<br/>(Sauvegarde & Galerie Photos IA)"]:::lxc
        NEXT["📁 LXC 126 : alpine-nextcloud<br/>(Stockage Fichiers Cloud)"]:::lxc

        GITEA -->|"Build Astro & Sync Rsync"| NPM
        JELLY -.->|"Sondé par"| KUMA
        IMMI -.->|"Sondé par"| KUMA
        NEXT -.->|"Sondé par"| KUMA
        NPM -->|"Proxy Pass"| JELLY
        NPM -->|"Proxy Pass"| IMMI
        NPM -->|"Proxy Pass"| NEXT
    end

    %% NOEUD PROXMOX DELL990
    subgraph NodeDell["🖥️ NŒUD PROXMOX 3 : 'dell990' (IoT, Utilitaires & Télémétrie)"]
        HAOS["⚡ VM 150 : haos-16.3 (Home Assistant)<br/>(Télémétrie Onduleur UPS Watts/Volts)"]:::vm
        OCTO["🖨️ LXC 133 : octoprint<br/>(Contrôleur Impression 3D)"]:::lxc
        EXCALI["📐 LXC 102 : excalidraw<br/>(Tableau Blanc Numérique)"]:::lxc

        HAOS -.->|"Métriques Watts"| NPM
        OCTO -.->|"Sondé par"| KUMA
        NPM -->|"Proxy Pass"| EXCALI
    end

    class WAN wan;
    class NodeRouter routerNode;
    class NodeOld oldNode;
    class NodeDell dellNode;

Description Détaillée des Éléments de l’Infrastructure

1. Le Nœud router (4 vCPU, 29.2 Go RAM) — La Forteresse Réseau

C’est la porte d’entrée de toute l’infrastructure :

• VM 254 (OPNsense-Core) : Pare-feu open source sous FreeBSD gérant le routage NAT, l’isolation des VLANs, le blocage des attaques et la distribution des adresses IP.
• LXC 104 (npmplus - Nginx Proxy Manager Plus) : Le pivot de distribution du site. Il reçoit les requêtes HTTPS provenant d’Internet via Cloudflare, applique les règles de sécurité, héberge les artéfacts HTML compilés de legleau.org et réécrit les chemins d’API internes (notamment /api/badge/:id/status qui proxifie les statuts d’Uptime Kuma).
• LXC 111 (cloudflare-ddns) : Un micro-service qui vérifie en continu l’adresse IP publique de la connexion fibre domestique et met à jour automatiquement les enregistrements DNS de legleau.org auprès de Cloudflare.
• LXC 124 (uptimekuma) : L’agrégateur de statut du homelab. Il envoie des requêtes HTTP et TCP périodiques à tous les conteneurs du réseau local pour mesurer leur disponibilité et leur temps de réponse, alimentant dynamiquement les LEDs du switch 2U sur la page d’accueil.
• LXC 103 (adguard) : Résolveur DNS interne avec blocage des traceurs et publicités au niveau du réseau domestique.

2. Le Nœud old (6 vCPU, 25 Go RAM) — Le Cœur Applicatif & CI/CD

Ce serveur héberge la forge logicielle et les services multimédias :

• LXC 119 (gitea) : Instance locale de Gitea hébergeant l’intégralité du code source du site web et les notes Markdown. Il embarque un exécuteur d’automatisation (Gitea Actions Runner) chargé de compiler le site Astro et de synchroniser les fichiers statiques vers Nginx.
• LXC 114 (postgresql) : Base de données SQL assurant la persistance des métadonnées pour Gitea, Immich et Nextcloud.
• LXC 117 (dockage) : Interface de gestion de conteneurs Docker pour les démonstrateurs légers.
• Services Partagés (Switch 2U) :
  • LXC 105 (jellyfin) : Diffusion multimédia pour la famille.
  • LXC 118 (immich) : Sauvegarde mobile de photos haute résolution avec reconnaissance faciale par apprentissage profond.
  • LXC 126 (alpine-nextcloud) : Stockage souverain de documents personnels.

3. Le Nœud dell990 (4 vCPU, 12.5 Go RAM) — Télémétrie & Projets

Dédié à la domotique et aux périphériques d’atelier :

• VM 150 (haos-16.3 - Home Assistant) : Centrale domotique connectée en USB à l’onduleur (UPS) protégeant le rack. Elle relève en temps réel la consommation électrique en Watts et la tension en Volts, fournissant la matière première affichée sur l’oscilloscope HP du site.
• LXC 133 (octoprint) : Serveur de pilotage d’impression 3D pour la fabrication des pièces mécaniques du homelab.
• LXC 102 (excalidraw) : Serveur de schématisation collaboratif accessible depuis le tableau de bord.

Le Cycle de Vie CI/CD : Du Commit au Déploiement Statique

Le déploiement de nouvelles fonctionnalités ou d’articles de blog s’exécute de manière 100 % automatisée et souveraine, sans dépendre de services tiers tels que GitHub Actions ou Vercel :

sequenceDiagram
    autonumber
    actor Admin as Administrateur (Obsidian / IDE)
    participant Git as LXC 119 (Gitea)
    participant Runner as Gitea Actions Runner
    participant Nginx as LXC 104 (NginxPlus)
    participant CF as Cloudflare Edge CDN

    Admin->>Git: git push origin main (Notes Markdown / Code Astro)
    Git->>Runner: Déclenchement du Webhook de Build
    Note over Runner: 1. npm install --frozen-lockfile<br/>2. astro check (Validation Zod)<br/>3. astro build (Génération HTML Statique)
    Runner->>Nginx: Synchronisation rsync SSH vers /var/www/legleau.org/
    Nginx-->>Git: Déploiement validé (Status 0 OK)
    Admin->>CF: Purge automatique du cache CDN Cloudflare
    Note over CF: Le nouveau contenu est instantanément disponible mondialement

1. Rédaction & Push : Une nouvelle note rédigée dans Obsidian ou une modification CSS sur le rack est validée par un simple git commit et poussée vers le dépôt gitea.
2. Déclenchement du Runner : Le serveur Gitea détecte l’événement et active un conteneur dédié léger.
3. Compilation Astro & Contrôle Zod : L’exécuteur télécharge les dépendances, valide la conformité du frontmatter via les schémas Zod et génère l’arborescence HTML statique dans le dossier /dist.
4. Synchronisation Découplée : En cas de succès de la compilation, les fichiers sont transférés par tunnel sécurisé rsync directement dans le dossier racine servi par Nginx (npmplus).
5. Mise à Jour Instantanée : Le site est actualisé en production en moins de trente secondes, sans la moindre coupure de service ni redémarrage de conteneur.

La Supervision en Temps Réel : Comment les LEDs Clignotent

Le clignotement des diodes LED sur le switch 2U de l’accueil illustre parfaitement la complémentarité entre site statique et micro-services locaux :

1. En arrière-plan, le conteneur LXC 124 (uptimekuma) interroge périodiquement les endpoints de santé de Jellyfin, Immich et Nextcloud.
2. Lorsqu’un internaute visite la page d’accueil de legleau.org, le navigateur charge le HTML statique ultra-léger généré par Astro.
3. Un script asynchrone non-bloquant interroge le chemin interne /api/badge/:kumaId/status.
4. Le reverse proxy Nginx (npmplus) intercepte cette requête et la relaye au conteneur Uptime Kuma sur le réseau virtuel Proxmox, évitant tout problème de CORS.
5. À réception de la réponse, le script modifie dynamiquement la classe CSS de la LED :
   • Si le service répond up : la diode s’illumine en vert et déclenche une animation CSS de clignotement simulant le transit de paquets réseau.
   • Si le service est indisponible (down) : la diode passe au rouge vif et désactive le lien d’accès.

4. Bilan & Perspectives : Redonner du Sens à la Matière

Concevoir legleau.org comme une baie serveur 19 pouces skeuomorphique adossée à un cluster Proxmox personnel a permis de réconcilier deux mondes que le web moderne tend trop souvent à séparer : l’exigence esthétique et la rigueur d’ingénierie système.

Loin d’une simple posture nostalgique, le skeuomorphisme redonne du poids, de l’émotion et de l’intelligibilité à des concepts réseaux souvent perçus comme austères ou invisibles. Savoir que chaque clic sur un commutateur ou chaque défilement de disquette fait écho à de véritables conteneurs LXC tournant sur des processeurs physiques dans mon salon apporte une satisfaction rare à l’ère du tout-cloud.

Évolutions Prévues sur la Baie

Le rack continue d’évoluer au fil de mes expérimentations :

• Intégration d’un Visualiseur Cartographique 3D : Un module de rack dédié à la restitution de tracés GPS et de tuiles vectorielles auto-hébergées pour le projet Kaymap.
• Console NOC Élargie : Enrichissement de l’oscilloscope avec des métriques de température ambiante des nœuds mesurées par capteurs ESP32 / Zigbee.
• Failover Global par Cloudflare Worker : Déploiement d’un script en bordure de réseau capable de servir le panneau de disjoncteur 500 réarmable directement depuis le cache CDN mondial si une coupure électrique venait à éteindre le homelab physique.

La baie reste allumée, les ventilateurs tournent, et les voyants clignotent : bienvenue dans mon infrastructure.