David Merki Retour au blog
Claude Code

Comment j'ai construit un site multilingue avec Claude Code

Retour d'expérience : construire un site Hugo en 6 langues avec Claude Code. Ce que l'IA rend possible, et ce qu'elle ne remplace pas.

Comment j'ai construit un site multilingue avec Claude Code

Le contexte

Je suis apprenti développeur de business numérique au CHUV, à Sion. Mon métier, c’est de comprendre les besoins business et de trouver les bonnes solutions techniques. Pas de coder 8 heures par jour dans un IDE.

Quand j’ai voulu créer mon site portfolio, j’avais deux options : un template WordPress, ou quelque chose de vraiment sur mesure. J’ai pris la deuxième, avec Claude Code comme partenaire technique.

Le point le plus important de cet article tient en une phrase : ça n’aurait jamais fonctionné sans mes connaissances en informatique.

Ce que j’ai dû maîtriser AVANT de toucher à l’IA

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

  • DNS et noms de domaine : comprendre comment davidmerki.ch pointe vers un serveur, les enregistrements A, CNAME, la propagation
  • Hébergement web : CloudPanel, SSH, SCP, permissions de fichiers, certificats SSL
  • Sécurité : HTTPS, headers de sécurité, protection contre les injections, bonnes pratiques OWASP
  • Protection des données : la LPD (loi suisse) et le RGPD européen, et ce que ça implique concrètement pour un formulaire de contact, un cookie analytics ou un calendrier
  • Architecture web : la différence entre un site statique et dynamique, pourquoi Hugo, comment fonctionne un build, un deploy

Sans ces bases, j’aurais pu demander à Claude de générer du code parfait techniquement, et publier quand même un site non sécurisé, non conforme, ou impossible à maintenir.

Pourquoi Hugo + Claude Code

Hugo est un générateur de sites statiques ultra-rapide. Pas de base de données, pas de serveur PHP complexe, des temps de chargement quasi instantanés. En revanche, la courbe d’apprentissage est raide si on ne connaît pas les Go templates.

Claude Code m’a aidé à franchir cette courbe. Mon workflow ressemble à ça :

  1. Je décris le résultat voulu, en français, dans mes mots
  2. Claude analyse le code existant et propose une approche
  3. Je valide l’approche, parce que je comprends l’architecture
  4. Claude implémente le code complet
  5. Je teste et je vérifie que tout est correct : sécurité, accessibilité, performance
  6. On itère jusqu’à ce que ce soit propre

L’étape 3 est la clé. Si je ne comprenais pas ce que Claude me propose, je ne pourrais pas valider. Et c’est là que la plupart des gens se plantent.

6 langues, dont 2 RTL

Le site gère 6 langues : français, allemand, arabe, russe, chinois et hébreu. L’arabe et l’hébreu s’écrivent de droite à gauche (RTL), ce qui chamboule toute la mise en page.

Pour les traductions, j’ai créé avec Claude un script Python qui lit le Markdown source en français, préserve le front matter YAML et le HTML, traduit via l’API DeepL (avec Google Translate en secours) et protège un glossaire de 52 termes, surtout des noms propres et des acronymes.

Le résultat : ~57 fichiers Markdown traduits automatiquement. Mais là encore, il a fallu que je comprenne comment fonctionnent les API de traduction, les quotas, les fallbacks et le système i18n de Hugo pour que tout s’assemble correctement.

Le système de réservation

Le plus gros morceau, c’est un système de réservation complet intégré au site statique.

  • Calendrier interactif avec navigation mois par mois
  • Créneaux de 30 minutes, du lundi au vendredi, de 9h à 19h
  • Synchronisation avec mon calendrier Outlook (parsing ICS + RRULE)
  • Validation des formulaires en temps réel
  • ~900 lignes de JavaScript

Claude Code a généré l’ensemble, backend PHP compris. Mais c’est moi qui ai dû configurer le CORS, sécuriser l’endpoint avec un token, déployer le PHP sur CloudPanel et vérifier que le parsing ICS gère bien les fuseaux horaires suisses.

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’intelligence artificielle au quotidien. Surtout deux outils :

  • Claude (Anthropic) pour tous mes projets techniques. Claude Code en CLI pour le développement, Claude en conversation pour la réflexion et l’architecture. C’est mon outil principal.
  • Euria pour le reste : rédaction, recherches, questions du quotidien. C’est une IA européenne, un plus pour le respect des données.

Chaque outil a ses forces. Je n’ai pas de loyauté aveugle, je prends ce qui marche le mieux selon la situation.

Ce que j’aurais fait différemment

  1. Commencer par le mobile. J’ai designé desktop d’abord et adapté ensuite ; l’inverse aurait été plus efficace.
  2. Limiter les animations. 12 modules, c’est trop. Quatre ou cinq bien choisis auraient suffi.
  3. Structurer les traductions dès le début. J’ai ajouté les langues après coup, ce qui a créé des bugs.
  4. Mettre en place un CLAUDE.md dès le jour 1. Ce fichier de configuration pour Claude Code change tout.

Ce que j’en retiens

L’IA accélère énormément le travail technique. Fini les heures de documentation, de Stack Overflow et de debugging syntaxique. C’est un outil fantastique.

Mais elle ne remplace pas la compréhension. L’IA n’a pas de conscience ni de vue d’ensemble. Elle ne sait pas que ton certificat SSL expire dans 3 jours, que ton formulaire de contact n’est pas conforme à la LPD, ou que ton hébergement n’a aucun backup.

Il faut un humain qui comprend l’informatique derrière. Quelqu’un capable de descendre dans le détail quand c’est nécessaire, curieux, qui veut comprendre le “pourquoi” et pas juste le “comment”.

C’est ça, mon métier de développeur de business numérique : garder la vision d’ensemble tout en plongeant dans la technique quand il le faut.


Vous cherchez quelqu’un qui comprend à la fois le business et la technique ? Réservez une consultation gratuite pour en discuter.

Un projet en tête ? Discutons-en.

Prendre rendez-vous (gratuit)
Continuer la lecture

Lire aussi