Comment j'ai ré-écrit le moteur de mon blog en quelques heures avec Claude Code

Comment j'ai ré-écrit le moteur de mon blog en quelques heures avec Claude Code

AIPerso

Il est 18h ce vendredi soir, et je suis devant une facture et des logs. On parle du Touilleur Express (ce blog). C'est un Wordpress, sur lequel j'ai mis quelques plugins, pas mal d'outils de défense et de caching, un petit CDN, et qui me coûte 50 euros par mois. Et ça m'agace de voir encore des spams dans les commentaires, malgré les outils que j'ai.

J'ouvre un terminal, je lance Claude Code. Auparavant, je récupère un dump MySQL de quelque 900 articles, 3 200 commentaires. La base pèse 26 MB. Pas mal pour un blog lancé fin 2003.

Voici le prompt dans son intégralité, que j'exécute en mode "Plan" afin de voir comment Claude Code va découper cette migration. 

Implémente un moteur en Go pour remplacer Wordpress en PHP. 
Conserve la base de données MySQL du blog.
Conserve les médias (images, documents).

La version minimum pour commencer doit permettre
- afficher une page d'accueil avec les 5 derniers articles publiés
- afficher le détail d'un article, ainsi que les commentaires associés

Choix technologiques :
- utilisation de Golang
- Gin web framework avec Templ
- Pas de moteur Javascript type React ou Vue coté client
- Un container Docker avec une base MySQL existante, que je te fournirai.

J'ai sauvegardé mon blog Wordpress PHP ainsi que toutes ses ressources dans un répertoire
que je peux ajouter si tu le souhaites.

Structure de la base de données :
- si tu penses qu'il est plutot souhaitabler de changer la structure,
- pour ne pas garder le format Wordpress, alors aide moi à créer une structure de tables simples et efficaces

Evolutions futures a prévoir :
- Gestion d'un HTTP ETag par article pour que le cache fonctionne correctement
- Création d'une interface d'administration/publication avec création de Draft, éditeur de texte riche.

Points de vigilance :
- les article au cours du temps ont évolué, et il sera peut-etre compliqué de garder la mise en page
- le blog est un blog technique avec parfois des bouts de code
- il y a plus de 20 ans d'articles de blog

J'aimerai aussi garder les différents prompts pour ce projet dans un répertoire "ai" localement.
Tu pourras aussi créer un fichier CLAUDE.md ensuite pour ce projet.

Enregistre dans un fichier ROADMAP.md les idées, les étapes. Ce fichier servira pour suivre l'avancement et pour garder une trace des idées ou des fonctionnalités.

Notez que je demande à Claude Code de me garder une trace des fonctionnalités, avec la gestion d'une Roadmap. C'est une astuce qui permet de garder différentes idées/fonctionnalités... sans tout implémenter directement.

Migration de la base de données

Je décide de demander à Claude Code d'analyser la base. Il note tout de suite qu'il y a beaucoup de tables techniques liées à des plugins Wordpress, dont je n'aurai pas besoin. J'envisage au début de lire les structures de Wordpress. Mais après quelques échanges avec Claude Code pour peser le pour et le contre, j'opte pour une migration vers de nouvelles tables, dans la même instance de base de données. Cela ne sert à rien de créer une autre base, et celle-ci ne fait "que" 26 Mb. 

Au passage, Claude Code est très bon pour faire du SQL et nettoyer toutes les données. 

Architecture technique simplifiée

Je sélectionne Golang 1.26 comme langage de développement. Typage fort, compilé, ultra-performant et ne nécessitant pas de machines puissantes. 

Côté framework web, je prends Gin Web Framework, templ, CSS+HTML simple.

Les images seront stockées sur Cellar S3, et directement accessible via une url HTTP. Il suffit que je configure un routeur dans l'application pour que les anciennes urls (en /wp-content/uploads/...) retournent un HTTP 301 avec la nouvelle adresse des images. C'est simple, et ça marche.

La partie publique du blog est codée en moins de 4 heures, revue de code+sécurité comprise. La partie admin demandera le double, nous verrons cela plus loin dans l'article

Développement des fonctionnalités

Je commence par une étape de planification des différentes fonctions. Je travaille en mode "plan" avec Claude Code pour décrire les différentes étapes, et surtout, je demande à tout documenter dans le fichier ROADMAP.md. 

A noter que vous pouvez demander à Claude Code de vous retrouver tous les prompts d'un projet : 

Retrouve tous les prompts de ce projet, et recopie-les dans un fichier ai/prompts.md, par ordre chronologique. 

Afin de vous montrer comment je travaille, voici les différents prompts que j'ai utilisés. Ils vous montreront comment je travaille et vous donnerons, j'espère des idées pour prompter : 



## Session 2 — 7 mars 2026, 17h35 — Analyse du site WordPress et planification

> Je souhaite que tu visites l'ancien blog sur Wordpress qui est en ligne sur le site https://touilleur-express.fr/. Que peux-tu me proposer comme fonctionalité à développer pour compléter cette migration ? Je ne souhaite pas migrer la fonction "Mots clés" ou "Commentaires récents" qui sont sur la page d'accueil.

> Peux-tu préparer dans le répertoire ai un plan découpé avec les différentes taches, sous la forme de fichier markdown ? J'utiliserai ce répertoire pour suivre les fonctionnalités à implémenter. Réflechis à ne pas tout mettre dans un seul fichier, propose une organisation en gardant la priorité de migration.

> Commençons par fixer le slug, pour s'assurer de ne pas casser le SEO. Pour cela tu peux comparer avec les 10 articles publiés sur le site, et vérifier que ton systeme fonctionne correctement. Ajoute des tests unitaires. Vérifie dans la base de données s'il y a des cas particuliers (slug tres long, avec des accents, caracteres spéciaux par exemple).

> Je souhaite maintenant implémenter l'affichage des pages statiques. Prépare un plan, met à jour les fichiers de suivi dans "ai/" et assure-toi que les pages statiques s'affichent correctement avec les memes Slugs que le site en ligne historique.

> Je souhaite mettre en place la navigation générale du site avec les liens vers les 2 pages statiques. Peux-tu d'abord analyser le site historique avec Browser MCP ? Propose-moi différentes options. J'aimerai traiter le header et le footer du site.

> Peux-tu me montrer avec des maquettes SVG les 3 options du header et les 3 options du footer afin que je décide ensuite ?

> Pour le header : Option C. Pour que les icones des réseaux sociaux soient réalistes, regarde sí tu peux utiliser une solution gratuite similaire à Font awesome, mais sinon trouve des icones simples, et stocke ces icones dans le projet. Pour le footer : option B sans les icones de réseaux sociaux car ils seront deja dans le header.

> Implémente la pagination

> J'ai copié le fichier Makefile à partir d'un autre projet. Peux-tu le corriger et le faire fonctionner pour compiler, créer le binaire, les tests, etc.

> J'ai aussi copié le fichier .ai.toml pour "air". Met le à jour pour ce projet, pour que "air" fonctionne. Met ensuite à jour CLAUDE.md pour documenter les nouvelles commandes du Makefile et la commande "air".

> Rajoute un fichier de license pour ce projet, de type Licence Commons Creative. Les gens peuvent utiliser le code, le modifier, mais doivent me citer comme auteur initial du projet. Pas d'utilisation commerciale.

> Ajoute cette information dans un fichier README.md pour les personnes qui trouveront le projet sur ma page Github.

> Es-tu capable d'implémenter 2 fonctions en parrallele ?
> - Navigation prev/next article
> - Création d'une page de Catégories des articles

> Sur Wordpress, chaque article a une image "mise en avant". Est-ce que tu as importé cette information dans la base ?

> Oui je souhaite que tu migres tout et que tu utilises une URL relative (et pas absolue)

> Ajoute dans la ROADMAP.md ceci :
> - affiche une petite vignette de l'article sur la page d'accueil du site
> - affiche l'image thumbnail principal sur la page d'un article, comme sur l'ancien site Wordpress (bandeau hero)
> - implemente un systeme responsive pour que le site s'affiche sur mobile et tablette correctement

> option B car je ne publie pas très frequemment (choix du design des thumbnails)

> C'est parfait. Peux-tu retirer le texte "Par Nicolas Martignole" ? Je suis le seul auteur du blog. Et peux-tu mettre la date en Français ?

> Peux-tu charger la page https://touilleur-express.fr/2024/10/24/poser-sa-demission/ et comparer l'affichage des images dans l'article avec la page actuelle du nouveau moteur ? Que remarques-tu ?

> Oui effectue la migration vers des URLS relatives.

> Analyse un article et retire ce qui vient de l'ancien moteur Wordpress.

> Ne fait pas de migration pour l'instant. J'ai besoin d'abord de voir des exemples d'articles de l'ancien blog, sur le nouveau moteur. Il est important de ne pas perdre des informations de mise en page de l'ancien site.

> Commençons par garder aligncenter/alignright/alignleft. Je te propose de regarder les anciennes pages sur l'ancien site afin de comprendre comment ce style était utilisé.

> Efface de la base les commentaires gutenberg comme `<!-- wp:xxx -->`

> Retire `class="wp-block-heading"` des balises de header

> Retire pour les list de type UL les class supplementaires de wordpress, comme `class="wp-block-list"`

> Retire des blockquote la class `class="wp-block-quote"`

---

## Session 3 — 7 mars 2026, 18h41 — Exploration du skill frontend-design

> Quel est sur la marketplace la skill ou le plugin Claude Code qui permet de travailler sur le design (HTML/CSS) pour améliorer l'aspect d'un site ?

---

## Session 4 — 7 mars 2026, 20h51 — Sitemap et ETag

> Ajoute dans la roadmap la possibilité de créer un sitemap.xml

> J'aimerai réflechir à une fonctionnalité de cache HTTP qui utilise un ETag. Cela veut dire que chaque page d'article aurait un ETag calculé par rapport au payload de la page. Est-ce que la date de dernière modification d'un article est enregistrée ? Celle-ci pourrait servir à calculer rapidement un payload, sans charger tout l'article, et en évitant de retourner la page Web, lorsqu'elle n'a pas été changée. Il faudrait supporter l'entete "If-None-Match" dans la Request et "ETag" dans la reponse.

---

## Session 5 — 7 mars 2026, 20h59 — Implémentation ETag

> Implement the following plan: Cache HTTP ETag pour les articles et pages (...)

> Quelle strategie de cache peut-on proposer pour la page d'accueil du site ? Il y a peu de publication, on peut envisager de mettre en cache la page d'accueil.

> Oui implemente cela, ajoute un test, met a jour la roadmap, et git commit

---

## Session 6 — 7 mars 2026, 21h09 — Configuration DB et déploiement Clever Cloud

> Implemente la configuration de la connexion vers la base de données avec des variables d'environnement.

> commit et push sur clever

> Make sure to execute "templ generate" before doing a git push, else the generated templates won't be available on Clever-cloud. Please note that we cannot execute templ on the remote clever cloud host.

> Never execute database migration in production.

---

## Session 7 — 7 mars 2026, 21h49 — Debug production

> Improve the code to output at startup the DB configuration (hide the password) to understand how the application got a connection to the database.

> There is an error in prod, related to the name of the DB. (logs d'erreur Clever Cloud)

---

## Session 8 — 8 mars 2026, 09h27 — Nouvelle base de production

> Inspect docker mysql database, what is the current DB size ?

> I created a new empty Database in production. Can you check if you have write access to this remote DB ?

> Can you import only the new DB tables from the local docker DB to this remote Database ?

> What are the old wp_* tables on the local docker DB ?

> Delete text_2020_* locally and the wordpress plugin tables. Keep only the core WP tables.

---

## Session 9 — 8 mars 2026, 09h39 — Stockage S3 Cellar

> I want to use Clever Cloud S3 that is link with this project. Check with "clever cli" if you can list the adds-on for this app.

> Can you try to visit on the Web the touilleur-s3 S3 storage and load with an https url, one image ? I am trying to understand how the gotouilleur application could access the images that are now stored on touilleur-s3.

> Go for solution 2 with gin redirect

> I see errors if the image file contains "french accent". Suggest a fix.

---

## Session 10 — 8 mars 2026, 10h05 — Debug articles vides (shortcodes WordPress)

> New problem: some old articles were using Wordpress plugins and are not displayed correctly (empty page). What can I do ? Should we migrate some data locally ?

> On Wordpress, how the different version of an articles are stored ?

---

## Session 11 — 8 mars 2026, 12h17 — Audit de sécurité

> I want to run a security audit on the current version. One risk is a malicious comment that would create a link to other web sites. Can you first check if the current code is safe ? XSS, escaping, etc.

> Yes implement this, with a sub-agent, add tests, and create a commit, then push to Clever. Do not ask for approval, just do the fix. In parrallel, I will keep this main session to scan the current database and check for malicious comments.

> Delete all comments that are not approved. Do the same for the production DB on Clever cloud.

---

## Session 12 — 8 mars 2026, 12h43 — Amélioration des commentaires

> J'aimerai améliorer l'affichage des commentaires, en prenant en compte les retours à la ligne. En examinant la base de données, vois-tu une idée ou un moyen d'améliorer la mise en page, de mettre des paragraphes ?

---

## Session 13 — 8 mars 2026, 12h46 — Audit d'affichage de 180 articles

> Implement the plan: Améliorer l'affichage des commentaires (retours à la ligne / paragraphes)

> Parcours en local les articles, regarde si tu vois des bugs d'affichage, créé une liste de problemes/idées à améliorer. Tu peux tenter de regarder les 180 pages. J'attache plus d'importances aux articles publiés depuis 2014.

> Démarre les corrections. Si tu modifies la base de données en local, modifie aussi la base de données en production. Controle tes modifications en rechargant les articles ensuite.

> Ignore Q11 (won't fix for now) et ajoute Q9 dans la roadmap. Pour Q9 il faudra que l'on trouve un systeme d'affichage du code source syntaxique, pour que le code Java/Scala des articles du blog s'affiche en coloration syntaxique.

> Pourquoi l'image ne s'affiche pas ? (debug URL avec accents unicode)

> J'aimerai évaluer l'intéret de créer un flux RSS. En 2026, comment cela se passe-t-il ? Quelle est l'utilité ? Que faut-il coder ?

> Oui implémente cela (flux RSS)

> Ajoute dans le footer sur la page d'accueil un lien vers /feed pour montrer l'existence du flux RSS au visiteur.

---

## Session 14 — 8 mars 2026, 14h00 — Favicon

> Peux-tu créer un favicon et l'ajouter sur le template ? Utilise le style et les couleurs du site. J'imagine une tasse de café clair sur un fond sombre couleur café ou chocolat par exemple.

> L'image n'est pas mal, mais peut-on avoir un degradé de couleur pour le fond ?

> J'aimerai que la tasse de café soit affichée devant la coupelle.

> Make the coffee more like an oval and not a rect

> Remove the SVG favicon and use the new ICO file I added in the folder static instead

---

## Session 15 — 8 mars 2026, 14h20 — Sitemap et robots.txt

> Est-ce que le sitemap.xml est codé ? Existe-t-il dans la ROADMAP ?

> J'aimerai comprendre en 2026 comment créer un bon sitemap.xml, le mettre en cache avec un TTL de 1h par exemple.

> Implemente la version avec le cache en memoire

> Je ne pense pas que la date dans lastmod soit correcte. Un article de 2012 a une date 'lastmod' à 2026.

> Ignore la tache 17 (le site marche tres bien sur mobile et tablette)

> Vois-tu d'autres fonctions à ajouter sur le site public ?

> Ajoute le robots.txt, la page 404 simple et l'open graph/meta tags

> Comment puis-je tester la fonction "open graph / meta tags" ?

---

## Session 16 — 8 mars 2026, 15h08 — Administration sécurisée (2FA)

> Implemente une page d'administration sécurisée. Pour s'assurer que l'accès est sécurisé, j'aimerai une solution à 2 facteurs d'authentification. La page sera accessible sur /admin_touilleur et ne doit pas etre visible dans le sitemap ou le robots.txt, elle doit rester cachée. La page doit prendre un mot de passe et avoir un systeme de double authentification. Le mot de passe ne doit pas etre stocké dans la base de données. Il faut aussi un systeme de rate limite afin d'éviter le brute force.

---

## Session 17 — 8 mars 2026, 15h19 — Implémentation admin 2FA

> Implement the following plan: Page d'administration sécurisée avec 2FA (TOTP) (...)

> Comment le tester ? Que faut-il que je configure en local pour commencer ?

> Comment le déployer sur Clever-cloud ? Est-ce que je dois copier les 3 variables d'environnement ?

> Peux-tu copier de .envrc vers clever cloud les 3 nouvelles variables d'environnement de securité ? Utilise la CLI de clever.

> Augmente la taille du texte sur la page /admin_touilleur, le formulaire de saisie est trop petit.

> Je souhaite maintenant travailler sur le dashboard d'administration.
> Liste des fonctions à voir :
> - Créer un article
> - Modifier un article
> - Publier, dépublier, publier à une date précise
> - Gérer les catégories (CRUD)
> - Gérer les tags (CRUD)
> - Uploader une image vers Cellar
>
> L'éditeur d'article doit permettre la saisie avec un minimum de texte riche (headers, italique, bold, couleur, paragraphe, liste, blockquote pour citation, ajout de liens vers des sites webs en référence). Idéalement il doit aussi permettre le drag-and-drop d'une image.

---

## Session 18 — 8 mars 2026, 17h12 — Dashboard admin complet

> Implement the following plan: Dashboard d'administration GoTouilleur (Phase 1a: layout + stats, Phase 1b: Article CRUD + TinyMCE, Phase 2: Image upload S3, Phase 3: Categories)

> Ajoute un bouton "Enregistrer" en haut a droite sur la page d'édition

> Lorsque j'affecte une Catégorie à un Article, il faut retirer la Catégorie "Non classé".

> Sur un article, je veux avoir des tags "clickable". Si le lecteur clique sur le tag "AI", il doit être redirigé vers une liste avec tous les articles pour ce Tag, avec pagination.

> I think I will archive the "tags" system and not use it at all. I will rely only on categories. For the old articles, keep the tags for each articles. But do not display the tags anywhere on the public/reader site.

> Code une fonction de "sanitize/simplify" pour l'upload des images, pour simplifier le nom des fichiers images stockés sur Cellar. Supprimer les espaces, remplacer les caractères accentués, tout mettre en minuscule, et éviter d'avoir un nom de fichier qui fait plus de 100 caracteres.

---

## Session 19 — 8 mars 2026, 18h37 — Gestionnaire de médias

> Je souhaite ajouter un gestionnaire de médias, type image, dans l'administration. Ce gestionnaire doit permettre de :
> - voir les images sur le stockage Cellar S3
> - effacer un fichier
> - uploader une nouvelle image par glissé-déposé vers Cellar
> - proposer une fonction pour créer automatiquement les différents formats nécessaire pour le site.

---

## Session 20 — 8 mars 2026, 18h47 — Implémentation médiathèque

> Implement the following plan: Gestionnaire de medias admin (visualiser, uploader, supprimer, redimensionner)

> Now implement a "preview" button to see a draft article, as it will be rendered on the web site.

> Add a new gin handler to display the images and check that it works with article thumbnail.

> How does the upload for thumbnail work in the admin ? Is it from the article form or from the Mediatheque ?

> Yes please. And if the user upload directly, make sure to generate the correct image (variants) for the uploaded image.

---

## Session 21 — 8 mars 2026, 20h27 — Optimisation images

> On the edit article page, does TinyMCE is able to ask for an image size ? Here is the issue: what if I upload a 1600x1000 image, but only want to display a 800x500 image ? The issue is that the file is very big. How can I handle a specific and optimized page ? Can we post-process the article when the user clicks on Save ?

> Yes implement this

---

## Session 22 — 8 mars 2026, 20h57 — Redirections et legacy WordPress

> Can you search in the prod logs, using "clever cli" for calls to "wp-json/oembed/..."

> Qu'est-ce qui est le plus recommandé ? 410 Gone ? Toutes les urls qui commencent par /wp-json ou /wp-admin devraient ainsi etre marquées.

> Pour ce qui est /tag/* que devons-nous faire ? Regarde les commits récents, on a retiré les tags.

> Je vois aussi des URLS comme "/tag/recrutement/feed" avec /feed apres un tag. Que conseilles-tu ?

> Bloque aussi /administrator /wp-admin/* /admin.php /adminfuns/php en retournant 410 Gone

---

## Session 23 — 8 mars 2026, 21h10 — Index MySQL

> Regarding the MySQL database, can you suggest to create indexes to speed-up queries ? You can use Grafana stats.

> Yes, apply on localhost and on the remote clever cloud mysql database.

---

C'est très loin du Vibe coding. 

Vous pouvez suivre comment je découpe par petites tâches, je mélange de temps en temps entre l'anglais et le français, mais l'essentiel est là. 

Le bilan et les idées que je souhaite implémenter

Le code est facile à relire, à vérifier, et il y a 15 fichiers de tests unitaires, que j'exécute à chaque git commit. Je n'ai pas encore codé la partie "commentaires" au moment de la publication de cet article. 

J'envisage de rajouter quelques idées et de mettre en oeuvre un Agent avec un modèle d'Anthropic, ainsi qu'un générateur d'images avec FAL.ai

  • recherche intelligente avec un Agent
  • génération d'images/thumbnail pour les anciens articles
  • prompt pour discuter et créer une réponse dans le style du blog "le Touilleur Express"
  • préparation pour rédiger un livre, nettoyer les articles

Conclusion

Ce projet a pris 12 heures, ce qui n'est pas grand-chose pour coder un clone de Wordpress. 

Et vous lisez le premier article complètement écrit sur ce nouveau blog :) 

PS:

Quelques images pour vous montrer le futur outil de génération d'entête du blog : 

Modèle nano-banana-2

Modèle gpt-image-1.5

Modèle grok-imagine-image :

Modèle flux-2-pro :

 

 

 

Commentaires (0)

Aucun commentaire pour le moment.