› A behind-the-scenes look at my blog

Les coulisses de ce jardin numérique — la stack, le workflow d’écriture et l’hébergement. Inspiré de la démarche d’Emma Goto.

La stack

• Astro — générateur de site statique. Tout le site est en HTML pur, rapide.
• Collections de contenu — une seule collection notes : chaque fichier Markdown ajouté devient automatiquement une page.
• Typographie — Atkinson Hyperlegible pour le corps de texte (très lisible), Playfair Display pour les titres.
• Palette — crème et or, héritée de mon ancien thème.
• Hébergement — mon VPS Hetzner via Coolify, déployé automatiquement à chaque git push via un webhook Forgejo.

Le workflow d’écriture : zéro friction

L’idée d’un jardin numérique, c’est de pouvoir publier sans effort. Sinon on abandonne. Mon système, calqué sur celui d’Emma :

1. Capture dans Obsidian. J’ai un dossier dédié dans mon vault. Un template Templater remplit automatiquement le frontmatter (title, created), et le plugin « update modified date » met à jour updated à chaque modification.
2. Le plugin « coup de balai ». Le plugin obsidian-push-folder copie en un clic tout le dossier de notes vers src/content/notes/ de ce projet.
3. Le push Git. git add . && git commit && git push — et le webhook Forgejo déclenche Coolify qui s’occupe du déploiement.

À noter : le plugin écrase src/content/notes/ à chaque sync. Ce dossier est « possédé » par Obsidian — je ne l’édite jamais à la main.

Des univers visuels distincts

Tout le contenu vit dans une seule collection, mais selon ses tags une note adopte un univers différent :

• Taguée livre → une review en mise en page « livre ouvert » (double page, reliure, washi tape). Rubrique Livres.
• Taguée série ou film → un univers cinéma : thème sombre « salle de projection », cadre pellicule, mur de posters. Rubrique Séries & Films.
• Taguée ia, dev, outils, vibe-coding… → univers terminal : fond sombre, accents verts, cards façon fenêtre CLI. Rubrique Lab.
• Avec des coordonnées lat / lng → un point sur la carte des voyages.

La carte des voyages

La carte utilise Leaflet et les tuiles OpenStreetMap : open source, données ouvertes, aucun compte ni token API — cohérent avec l’idée d’autonomie numérique. C’est la seule page du site qui charge une vraie librairie JavaScript.

Le menu

La navigation est un tiroir : un bouton ouvre un panneau avec une carte par rubrique (icône, couleur, description). Ouverture / fermeture en JavaScript vanilla.

Markdown aujourd’hui, MDX plus tard

Pour l’instant, tout est en Markdown pur (.md), le format natif d’Obsidian. Le jour où une note aura besoin d’un composant interactif, j’ajouterai une collection articles en .mdx, dans un dossier séparé géré directement dans l’éditeur de code — sans casser le workflow Obsidian.