1. Le déclic / le besoin de départ
L'étincelle. Vendredi soir 29 mai 2026, dîner entre amis. Je reparle de ce que je fais avec l'IA — et comme j'avais déjà raconté la même chose au déjeuner le midi, je me dis qu'il est temps d'avoir un endroit unique où tout montrer plutôt que de le réexpliquer à chaque fois. Samedi matin, je lance le site. De fil en aiguille, les idées s'enchaînent et passent en prod presque aussitôt : journal, lexique, tags, recherche, dark mode, page Veille IA, bot… un beau bébé sorti en ~2 jours.
Côté besoin de fond : le site avait déjà un journal riche — 43 entrées — mais peu de contenu evergreen. Or un journal, ça vit dans l'instant et ça date vite. Il me manquait du contenu qui fait autorité dans la durée : lisible par un humain pressé, et citable par les LLM (le fameux GEO, Generative Engine Optimization — être référencé par les IA quand elles répondent).
Deux moteurs derrière, assumés :
- Centraliser mes notes IA dans un endroit unique, propre, qui ne se perd pas dans des favoris et des captures d'écran.
- Avoir une vitrine publique à mon nom, partageable — et au passage, prouver qu'un non-développeur peut livrer et faire vivre un site complet avec Claude Code.
Cible affichée : marchands / dirigeants qui captent vite, sans exclure les débutants.
2. L'idée → le cadrage (décisions, alternatives écartées)
Le choix de stack a été tranché tôt, et en partie sur conseil de l'IA quand j'ai décrit le besoin. Trois principes non négociables :
- Simplicité / zéro build. Pas de toolchain, pas de
npm, pas d'étape de compilation à maintenir. J'ouvre un.html, ça marche. - Gratuit + hébergement simple. GitHub Pages : pas de serveur, déploiement au push (~1 min). Écarté : Vercel/Netlify (superflus ici), un VPS (trop lourd).
- Pas de framework. Écarté : React / Next / Astro / un générateur statique — overkill et dette de maintenance pour un non-dev.
Les décisions structurantes de cette session, et ce qu'on a écarté à chaque fois :
- Guides evergreen — 1 page = 1 grande question, 3 niveaux (« En 30 s » → corps visuel → « Pour aller plus loin »), pour une URL qui fait autorité par question. Écarté : des pages séparées débutant/avancé, qui diluent l'autorité.
- Visuels et logos codés en HTML/CSS/SVG inline — zéro image lourde, zéro dépendance. Écarté : des librairies de graphes, des fichiers de logos officiels.
- Cluster sur la landing (Comprendre / Outiller / Méthode / Décider) — autorité thématique. Écarté : multiplier les sections de nav.
- Dark mode par tokens CSS (
[data-theme]) + toggle Auto/Clair/Sombre, fond anthracite chaud, pour garder l'ADN visuel. Écarté : un gris neutre froid ou un noir pur. - Anti-FOUC : un script inline dans le
<head>(~3 lignes, le seul JS bloquant toléré), pour éviter le flash de thème au chargement. - Faits vérifiés, jamais de versions de modèles qui périment — pour rester evergreen.
- Favicon / logo maison inspiré de Claude, intégré à ma direction artistique, pour une cohérence visuelle globale.
3. Le « vibe coding » : comment ça s'est construit, étape par étape
Outil principal : Claude Code, en terminal et sur le web/app, qui écrit, modifie et committe directement dans le repo. Ma boucle : aperçu visuel dans le navigateur → je redemande des ajustements → re-rendu, jusqu'à ce que ça me plaise.
- Lecture du repo + cadrage des conventions (gabarits, tags, cache-busting).
- Lancement de
/guides/avec le Guide #1 (IA/LLM) et ses 3 visuels codés. - Production par batchs : guides #2→#4, puis #5→#11, puis #12, puis #13→#15 (orientés SEO/GEO).
- Clustering de la landing en 4 familles.
- Micro-optimisations SEO (entité auteur
@id,HowTo). - Refonte header/footer (réseaux, contact LinkedIn + mail,
SiteNavigationElement). - Dark mode : démo sur l'accueil → validation → propagation sur 72 pages → finitions.
- Lexique : ajout des 9 grands acteurs IA.
4. La stack + les outils
- Claude Code — l'agent de construction (rédaction + code + commits).
- HTML / CSS / JS vanilla — zéro framework, un seul
style.css(~750 lignes). - GitHub — versionnage + source de vérité.
- GitHub Pages — hébergement + déploiement auto à chaque push (~1 min). Un
.nojekyllpour servir le statique tel quel. - schema.org JSON-LD (
TechArticle,FAQPage,HowTo,BreadcrumbList,SiteNavigationElement,Person) +llms.txt/llms-full.txt— la couche GEO.
5. Les galères (ce qui a cassé et comment on a réglé)
- Le flash de thème (FOUC). Au chargement, la page clignotait en clair avant de passer en sombre. → Réglé par un script inline de ~3 lignes dans le
<head>, le seul JS bloquant que je tolère, qui applique le thème avant le premier rendu. - Le cache iOS têtu. Safari/iOS gardait l'ancien CSS/JS. → Cache-busting discipliné (
?v=…) à chaque modif d'asset. - Deux sessions en parallèle sur
main. Plusieurs sessions poussaient sur la même branche → risque de collision. → Resync systématique (fetch+ ff/rebase) avant chaque push, et scripts idempotents. - Ne jamais toucher au coffre. Règle dure :
coffre.js/vault.json(AES) intouchables. Le dark mode a été volontairement non appliqué au coffre pour ne pas risquer de le casser. Respecté.
6. Temps passé (réel) et tokens / coût
- 3 jours calendaires : 30 mai → 1ᵉʳ juin 2026.
- ~70 commits sur la période (dont une bonne partie pour cette session : guides, lexique, dark mode, nav/footer).
- Découpé en plusieurs sessions courtes dans la journée.
- Temps assis réel : l'essentiel le samedi (30 mai), plusieurs heures effectives — et encore, en parallèle d'un autre projet (nom de code « Cobra »). Le reste s'est étalé en sessions courtes le dimanche et le lundi.
- Coût : aucun au token — tout via l'abonnement Claude, pas d'API. Pour ce cas, on parle temps, pas coût.
7. Ce que ça illustre
- Pas besoin de framework pour livrer. Du HTML/CSS/JS vanilla + GitHub Pages suffisent à tenir un site de 70+ pages, propre, rapide, avec dark mode et une couche GEO sérieuse.
- L'IA déplace le goulot d'étranglement. Le travail n'est plus « savoir coder », c'est décider et vérifier. Claude Code fait la frappe ; moi je fais les choix.
- L'honnêteté est une feature. Assumer un socle préexistant, des ordres de grandeur plutôt que de faux chiffres, des claims prudents sur les sujets sensibles (GEO = champ émergent) → ça rend le tout crédible et citable.