David Merki Retour au blog
Claude Code

Comment j'ai construit un site multilingue avec Claude Code

Retour d'expérience : un site Hugo en 6 langues construit avec Claude Code, ce que l'IA a fait et ce qu'il a fallu savoir pour le reste.

Comment j'ai construit un site multilingue avec Claude Code

Le contexte

Je suis en dernière année de CFC de développeur de business numérique, en formation duale au CHUV et à l’EPSIC, à Lausanne. Mon métier consiste à comprendre ce dont une entreprise a besoin et à trouver la technique qui y répond. Le code n’en est qu’une partie.

Pour mon site portfolio, j’avais le choix entre un template WordPress et un site construit de zéro. J’ai pris la deuxième option, avec Claude Code pour la partie technique.

S’il ne fallait retenir qu’une chose de cet article : sans mes bases en informatique, ça n’aurait pas marché.

Ce que j’ai dû apprendre avant de toucher à l’IA

Avant de demander quoi que ce soit à Claude Code, j’avais passé des mois à apprendre :

  • les DNS et noms de domaine : comment davidmerki.ch pointe vers un serveur, les enregistrements A et CNAME, la propagation ;
  • l’hébergement : CloudPanel, SSH, SCP, permissions de fichiers, certificats SSL ;
  • la sécurité : HTTPS, en-têtes de sécurité, protection contre les injections, recommandations OWASP ;
  • la protection des données : la LPD suisse et le RGPD européen, et ce qu’elles impliquent pour un formulaire de contact, un cookie d’analytics ou un calendrier ;
  • l’architecture web : site statique ou dynamique, pourquoi Hugo, ce que sont un build et un déploiement.

Sans ça, j’aurais pu obtenir de Claude un code impeccable et publier quand même un site mal sécurisé, non conforme ou impossible à maintenir.

Pourquoi Hugo et Claude Code

Hugo est un générateur de sites statiques très rapide. Pas de base de données, pas de PHP à maintenir pour les pages, et des temps de chargement quasi nuls. Par contre, les templates Go demandent un temps d’adaptation.

Claude Code m’a fait gagner ce temps-là. Mon fonctionnement ressemble à ceci :

  1. Je décris le résultat voulu, en français, avec mes mots.
  2. Claude lit le code existant et propose une approche.
  3. Je valide l’approche, parce que je comprends l’architecture.
  4. Claude écrit le code.
  5. Je teste : sécurité, accessibilité, performance.
  6. On recommence jusqu’à ce que ce soit propre.

Tout repose sur l’étape 3. Si je ne comprenais pas ce que Claude propose, je ne pourrais rien valider, et c’est souvent là que les projets dérapent.

6 langues, dont 2 de droite à gauche

Le site existe en français, allemand, arabe, russe, chinois et hébreu. L’arabe et l’hébreu s’écrivent de droite à gauche (RTL), ce qui oblige à revoir toute la mise en page.

Pour les traductions, j’ai écrit avec Claude un script Python. Il lit le Markdown source en français, laisse intacts le front matter YAML et le HTML, traduit avec l’API DeepL (Google Translate prend le relais si besoin) et protège un glossaire de 52 termes, surtout des noms propres et des acronymes.

Environ 57 fichiers Markdown ont été traduits de cette façon. Pour que tout tienne ensemble, j’ai quand même dû comprendre les API de traduction, leurs quotas, le passage de l’une à l’autre et le système i18n de Hugo.

Le système de réservation

Le plus gros morceau : un système de réservation complet sur un site statique. Un calendrier qu’on parcourt mois par mois, des créneaux de 30 minutes du lundi au vendredi entre 9h et 19h, une synchronisation avec mon calendrier Outlook (lecture du fichier ICS et des règles de récurrence RRULE) et une validation des champs pendant la saisie. Le tout fait environ 900 lignes de JavaScript.

Claude Code a tout écrit, backend PHP compris. C’est moi qui ai configuré le CORS, protégé l’endpoint par un token, déployé le PHP sur CloudPanel et vérifié que les fuseaux horaires suisses étaient bien gérés.

Les chiffres

Métrique Valeur
Fichiers total ~420
Templates HTML 91
Composants (partials) 23
Langues 6
Lignes JS (booking) ~900
Temps de build Hugo ~14s

Les outils que j’utilise

Je ne m’en cache pas : j’utilise l’IA tous les jours, surtout deux outils.

Claude, d’Anthropic, pour tout ce qui est technique : Claude Code en ligne de commande pour développer, et Claude en conversation pour réfléchir à l’architecture. C’est mon outil principal.

Euria pour le reste : rédaction, recherches, questions du quotidien. C’est l’IA d’Infomaniak, une entreprise suisse basée à Genève, ce qui me rassure sur l’endroit où vont mes données.

Je ne suis fidèle à aucun des deux. J’utilise celui qui fait le mieux le travail du moment.

Ce que j’aurais fait différemment

  1. Commencer par le mobile. J’ai conçu pour l’ordinateur puis adapté ; l’inverse aurait été plus simple.
  2. Limiter les animations. 12 modules, c’est trop. Quatre ou cinq bien choisis auraient suffi.
  3. Prévoir les traductions dès le départ. J’ai ajouté les langues après coup, et ça a créé des bugs.
  4. Écrire un fichier CLAUDE.md dès le premier jour. Il donne à Claude Code le contexte du projet et ses règles, et je me suis demandé après coup pourquoi j’avais attendu.

Ce que j’en retiens

L’IA m’a fait gagner beaucoup de temps sur la technique : moins de documentation à fouiller, moins de recherches sur Stack Overflow, moins d’erreurs de syntaxe à traquer.

Elle ne comprend pas le projet à ma place pour autant. Elle n’a pas de vue d’ensemble. Elle ne sait pas que votre certificat SSL expire dans trois jours, que votre formulaire de contact n’est pas conforme à la LPD ou que votre hébergement n’a aucune sauvegarde.

Il faut quelqu’un qui connaît l’informatique derrière, qui accepte de descendre dans le détail quand il le faut et qui veut savoir pourquoi les choses marchent. C’est ce que j’aime dans le métier de développeur de business numérique : garder le projet en tête tout en mettant les mains dans le code.


Vous avez un projet de site ou d’automatisation ? Réservez une consultation gratuite pour en parler.

Un projet en tête ? On en parle.

Réserver 30 min gratuites
Continuer la lecture

Lire aussi