Comment j'ai construit ce blog.

Je voulais un endroit à moi pour parler tech, actus, tests, mes projets, et un peu de sport et de jeu vidéo à côté. Voici comment il a été construit, sans rien cacher des détours.

01 · Le point de départ

L’idée de base était simple : un blog qui donne tout de suite l’impression d’arriver quelque part de technique, avec une envie de clin d’œil Iron Man / Jarvis pour l’ambiance.

Premier virage : le style HUD façon Iron Man, ça collait trop à ce que j’avais déjà fait sur otvt-dashboard. Deux projets qui se ressemblent, ce n’est pas ce que je voulais. J’ai gardé une structure en cards sombres sur fond chaud, en grille bento, avec une typo monospace et des sections numérotées façon dossier, et j’ai changé la palette pour du vert forêt, plus proche de ce que je voulais raconter (tech, mais aussi sport en extérieur).

02 · La stack

Astro, sans hésiter longtemps. Pour un blog éditorial avec des articles et des catégories, ses content collections génèrent une page par article à partir de fichiers Markdown, et il n’envoie quasiment aucun JavaScript par défaut. Pas besoin du rendu dynamique de Next.js ici.

Pour le contenu, j’ai choisi de rester en Markdown versionné dans le repo plutôt que de passer par un CMS externe comme Sanity. Je publie une à deux fois par semaine pour commencer : pas besoin d’une interface web pour ce rythme-là, et ça garde tout au même endroit, sans dépendance externe.

03 · De la maquette au code

Le design est parti d’un projet Claude Design, avec deux fichiers de maquette (la home et le gabarit d’article) construits avec le vocabulaire visuel qu’on avait retenu. Je l’ai importé directement dans Claude Code via DesignSync plutôt que de repartir d’un export HTML brut à reconstruire à la main.

Ensuite, tout a été retraduit en composants Astro avec des variables CSS pour les couleurs et les thèmes clair/sombre, plutôt que de garder les styles inline de la maquette — plus simple à maintenir sur la durée.

04 · Le bug que j’ai trouvé en le testant

Une fois le site monté, je l’ai fait tourner dans un vrai navigateur (headless, mais un vrai Chromium) pour vérifier que tout marchait, pas juste que ça compilait. Bien m’en a pris : la recherche d’articles s’affichait comme un bloc de texte brut, sans mise en forme.

La cause : Astro protège les styles d’un composant en leur ajoutant un attribut invisible au moment du build, mais le HTML généré dynamiquement en JavaScript — comme les résultats de recherche, injectés côté client — ne l’a jamais. Résultat, les styles ne s’appliquaient tout simplement pas. Il a suffi de marquer ces règles CSS comme globales pour que tout rentre dans l’ordre.

05 · SEO et statistiques

Sitemap et flux RSS générés automatiquement, meta Open Graph et Twitter Card sur chaque article, données structurées BlogPosting pour les moteurs de recherche, images optimisées. Pour les statistiques, direction Umami, auto-hébergé sur mon VPS plutôt qu’un service tiers.

06 · Contact

Un vrai formulaire plutôt qu’un simple lien mailto:, avec Resend pour l’envoi côté serveur — envoyer du mail directement depuis un VPS finit presque toujours en spam sans une configuration DNS soignée, autant passer par un service fait pour ça.

07 · La suite

Le blog tourne sur Astro avec un adaptateur Node, prêt à être déployé sur Coolify sur mon propre serveur. Le contenu va suivre au fil de l’eau — et une catégorie jeux vidéo est en préparation, en attendant une autorisation pour lier mes articles publiés ailleurs.