En bref : Créer un site vitrine avec Claude Code sans savoir coder est possible, à condition de changer de rôle : vous ne programmez pas, vous dirigez un agent qui programme. Le déroulé réel tient en quatre étapes. D'abord un brief et une arborescence, une page par service et par zone. Ensuite un fichier de consignes, le CLAUDE.md, qui fixe le ton, la charte et surtout les règles de référencement avant la première page. Puis la construction page par page, chacune vérifiée à l'écran et dans son code source. Enfin la mise en ligne sur votre propre nom de domaine, avec le code sauvegardé sur un compte qui vous appartient. La première page s'affiche en moins d'une heure. Le site complet, préparé pour Google, demande plutôt quelques jours, dont l'essentiel passe dans la préparation et les vérifications. Six erreurs techniques, détaillées plus bas, rendent un site généré par l'IA invisible pour Google.
Ce n'est pas une démonstration théorique. Le site que vous lisez est construit ainsi depuis sa migration des 18 et 19 mai 2026 : au 25 septembre 2026, 250 des 323 modifications enregistrées dans son dépôt ont été co-écrites avec Claude, et son plan de site compte 189 adresses. Si vous hésitez encore sur la voie à suivre, notre guide Créer son site internet avec l'IA : les 3 voies comparées compare cette méthode au générateur de site et à WordPress, sur le coût, la propriété et la visibilité.
Exemples illustratifs : le boulanger et le plombier cités dans ce tutoriel sont des cas types construits à partir des questions de dirigeants girondins, pas des témoignages clients. Les prix ont été vérifiés aux dates indiquées dans le texte.
Peut-on créer un site vitrine avec Claude Code sans savoir coder ?
En bref : Oui, et c'est même l'usage pour lequel Claude Code est le plus accessible à un non-développeur. Claude Code est un agent de code d'Anthropic : il lit et écrit les fichiers d'un projet sur votre ordinateur, lance les commandes nécessaires et vous montre le résultat. Vous lui décrivez une page en français, il propose un plan, vous le validez, il écrit le code et affiche un aperçu. Il faut un ordinateur récent, sous Windows 10 ou macOS 13 au minimum selon la documentation d'Anthropic, et un forfait payant : le forfait gratuit de Claude ne donne pas accès à Claude Code. Au 25 septembre 2026, Claude Pro est affiché à 20 dollars US par mois, ou 17 dollars en paiement annuel. Une application de bureau permet de l'utiliser sans passer par le terminal. Ce qu'il faut en revanche, c'est savoir précisément ce que l'on veut, et accepter de relire.
La différence avec un générateur de site est de taille. Un générateur vous propose des modèles et vous laisse remplir des cases. Claude Code part d'une page blanche et construit exactement ce que vous décrivez, ce qui est une liberté et un risque : une demande vague produit un site générique. Si le vocabulaire (agent, terminal, dépôt) vous paraît encore abstrait, notre guide Claude Code, c'est quoi ? part de zéro.
Votre rôle ressemble à celui d'un maître d'ouvrage sur un chantier. Vous ne posez pas les briques, mais vous décidez du plan, vous validez chaque étape et vous refusez ce qui ne correspond pas. Trois compétences suffisent : décrire clairement, vérifier méthodiquement, et savoir dire « non, recommence » sans hésiter.
Étape 1 : que préparer avant d'ouvrir Claude Code ?
En bref : Avant d'ouvrir Claude Code, préparez trois documents, parce que l'agent ne peut pas inventer votre entreprise. Le premier est un brief d'une page : votre activité, vos clients, ce qui vous distingue, le ton souhaité, vos couleurs et votre logo. Le deuxième est l'arborescence, c'est-à-dire la liste des pages du site. Pour un site vitrine de TPE, elle comprend en général l'accueil, une page par service, une page par zone d'intervention si vous en desservez plusieurs, une page à propos, une page contact et les mentions légales. Chaque page reçoit un mot-clé principal, par exemple « plombier Libourne » ou « boulangerie artisanale Mérignac », et ce mot-clé ne sert qu'une fois. Le troisième document rassemble les textes bruts et les photos, même provisoires : vos vrais tarifs, vos réalisations, vos horaires, les questions que vos clients posent au téléphone. C'est ce matériau qui distingue votre site de mille autres.
L'erreur la plus fréquente consiste à ouvrir l'outil et à demander « fais-moi un site pour ma boulangerie ». Le résultat sera propre, et interchangeable avec celui de n'importe quelle boulangerie de France. Google n'a aucune raison de le préférer, et vos clients non plus.
Prenons le cas d'un boulanger installé à Mérignac. Son arborescence tient en sept pages : accueil, pains au levain, viennoiseries et pâtisseries, commandes pour les entreprises, la boulangerie (histoire et équipe), contact et horaires, mentions légales. La page des commandes entreprises vise « commande viennoiseries entreprise Mérignac », une requête que le groupe de pages « nos produits » d'un site générique ne pourrait jamais porter.
Consacrez à cette préparation autant de temps qu'à la construction elle-même. C'est rentable : chaque information précise donnée à l'agent est une correction de moins ensuite.
Étape 2 : quelles consignes écrire pour que le SEO soit fait dès le départ ?
En bref : Les consignes s'écrivent dans un fichier nommé CLAUDE.md, placé à la racine du projet. Claude Code le lit au début de chaque session : c'est la mémoire permanente du chantier. La plupart des tutoriels l'utilisent pour la charte graphique. Il sert surtout à rendre le référencement automatique, en fixant une fois pour toutes les règles que l'agent appliquera à chaque page. Les consignes décisives sont techniques : publier le site en pages statiques pour que le texte figure dans le code HTML, donner à chaque page un titre et une meta description uniques, générer un sitemap et un fichier robots.txt, décrire l'entreprise en données structurées LocalBusiness, optimiser et décrire chaque image. D'autres sont éditoriales : un seul mot-clé principal par page, la zone d'intervention écrite en toutes lettres, jamais de chiffre inventé. Écrites avant la première page, ces règles évitent de corriger le site entier après coup.
Voici un modèle de départ, à adapter à votre activité. Il est volontairement court : un fichier de consignes se lit mieux quand chaque règle tient sur une ligne.
# Site vitrine Boulangerie Exemple, Mérignac
## Entreprise
Boulangerie artisanale au levain, 2 salariés, clients particuliers
et entreprises de Mérignac, Le Haillan et Saint-Médard-en-Jalles.
Ton : chaleureux, concret, vouvoiement. Couleurs : voir brief.md.
## Technique
- Next.js, publication en pages statiques (output: export).
- Aucun texte ne doit dépendre du JavaScript pour s'afficher.
- Images en AVIF ou WebP, largeur et hauteur toujours indiquées.
## Référencement (à appliquer à CHAQUE page)
- Titre unique de 50 à 60 caractères avec le service et la ville.
- Meta description unique de 140 à 155 caractères.
- Un seul H1 par page, qui reprend le mot-clé de la page.
- Mot-clé principal : voir arborescence.md, un par page, jamais deux fois.
- Texte alternatif descriptif sur chaque image.
- Données structurées LocalBusiness sur l'accueil et la page contact.
- Tenir à jour sitemap.xml et robots.txt à chaque nouvelle page.
## Interdits
- Ne jamais inventer un prix, un avis client ou un chiffre.
- Ne jamais ajouter de balise noindex sans me le demander.
- Toujours me présenter un plan avant de modifier plus d'un fichier.
Le fichier de fjdigital.fr fait aujourd'hui 244 lignes, et plusieurs de ses règles sont nées d'une erreur réelle. Le menu du site avait été réécrit différemment dans plusieurs pages, parce que rien n'interdisait à l'agent d'en créer un nouveau à chaque fois : une règle impose désormais un composant unique. Un fichier de consignes vivant s'enrichit ainsi à chaque surprise, et c'est ce qui rend l'agent plus fiable avec le temps.
Étape 3 : comment construire et vérifier les pages une par une ?
En bref : Construisez le site une page à la fois, dans l'ordre de l'arborescence, en commençant par l'accueil qui fixe le style de toutes les autres. Pour chaque page, le cycle est le même. Vous décrivez la page en précisant son mot-clé, ses sections et les textes à utiliser. Claude Code présente son plan, que vous lisez avant d'accepter. Il écrit le code et lance un aperçu local, que vous ouvrez dans votre navigateur. Vous vérifiez alors quatre points : l'affichage sur téléphone, la justesse des informations, le titre de l'onglet et la présence du texte dans le code source de la page. Enfin, vous enregistrez une version sur GitHub, qui sert de point de retour si la page suivante casse quelque chose. Ce cycle paraît lent les premières fois. Il devient rapide avec l'habitude, et il évite de découvrir dix erreurs le jour de la mise en ligne.
Le cycle de construction d'une page avec Claude Code
Nommez la page, son mot-clé, ses sections et collez les textes bruts. Exemple : page Pains au levain, mot-clé pain au levain Mérignac, sections gamme, fabrication, où nous trouver.
La relecture n'est pas une formalité. Le code écrit par une IA peut contenir des erreurs invisibles à l'écran : nous en avons trouvé une en septembre 2026 sur notre propre site, un script chargé de signaler nos nouvelles pages aux moteurs de recherche qui lisait un plan de site figé depuis août. Rien ne se voyait, mais les pages récentes n'étaient pas signalées. Notre article sur les limites et risques du vibe coding détaille les garde-fous à adopter.
N'oubliez pas les pages obligatoires. La loi pour la confiance dans l'économie numérique impose des mentions légales identifiant l'éditeur et l'hébergeur, et un formulaire de contact appelle une politique de confidentialité. Claude Code en rédige une première version, mais c'est à vous de fournir et de vérifier chaque information.
Étape 4 : comment mettre le site en ligne sur son propre nom de domaine ?
En bref : La mise en ligne repose sur trois éléments qui doivent tous vous appartenir. Le premier est le code, sauvegardé sur un compte GitHub à votre nom, pour pouvoir changer d'hébergeur ou de prestataire sans rien reconstruire. Le deuxième est l'hébergement : un site publié en pages statiques se loge chez la plupart des hébergeurs, souvent gratuitement pour une vitrine. Nous utilisons Firebase Hosting, dont l'offre Spark inclut, d'après la page de tarifs consultée le 14 septembre 2026, 10 Go de stockage, 360 Mo de transfert par jour, le domaine personnalisé et le certificat SSL. Le troisième est le nom de domaine, enregistré au nom de l'entreprise, par exemple 4,99 € HT à la création puis 7,79 € HT par an pour un .fr chez OVHcloud au 14 septembre 2026. Claude Code prépare la configuration et lance le déploiement. Il vous restera à ajouter chez votre registraire les enregistrements DNS indiqués par l'hébergeur, puis à attendre l'activation du HTTPS.
Sur fjdigital.fr, chaque mise en ligne suit la même commande depuis mai 2026 : compilation du site en pages statiques, envoi vers Firebase Hosting, purge du cache du réseau de diffusion, puis signalement des nouvelles adresses aux moteurs par le protocole IndexNow. Pour un premier site, la mise en ligne se déroule en quatre temps : création du projet chez l'hébergeur, déploiement lancé par l'agent sur une adresse provisoire, ajout du domaine personnalisé, puis vérification que l'adresse en HTTPS affiche bien le site. Notre guide sur l'hébergement d'une application sur Firebase détaille les offres Spark et Blaze et les questions de sécurité.
Un point de vigilance pour ceux qui remplacent un site existant : si les adresses de vos anciennes pages changent, chaque ancienne adresse doit rediriger vers la nouvelle page équivalente. Sans ces redirections, le référencement acquis par l'ancien site se perd. C'est le cas typique d'un plombier de Libourne qui quitte un vieux WordPress : la liste des anciennes adresses se prépare avant la bascule, pas après.
Quelles erreurs rendent un site généré par IA invisible pour Google ?
En bref : Six erreurs reviennent sur les sites générés par IA, et aucune ne se voit à l'écran. La première est un contenu qui n'apparaît qu'après exécution du JavaScript : Google recommande le rendu côté serveur ou le pré-rendu, parce que tous les robots n'exécutent pas le JavaScript. La deuxième est un titre identique sur toutes les pages, souvent le nom de l'entreprise, qui empêche chaque page de se positionner. La troisième est une balise noindex posée pendant les tests et oubliée à la mise en ligne, qui demande explicitement à Google de ne pas indexer. La quatrième est un sitemap jamais déclaré dans la Search Console. La cinquième concerne des images lourdes sans texte alternatif, qui ralentissent le site et restent muettes pour les moteurs. La sixième est une page unique pour tous les services, qui ne peut répondre à aucune recherche précise. Toutes se vérifient sans outil payant, en quelques minutes.
Mon site créé avec Claude Code est-il lisible par Google ?
Ces vérifications reprennent la documentation de Google Search Central sur le SEO JavaScript, les liens de titre, la balise noindex et les sitemaps. Elles ne remplacent pas le contenu : un texte précis, avec vos vrais services, vos prix et votre zone, reste ce qui fait la différence une fois le site lisible.
Deux idées reçues à écarter au passage. D'après la documentation Google sur les données structurées FAQ, consultée le 14 septembre 2026, les résultats enrichis FAQ ne sont plus affichés depuis le 7 mai 2026 : inutile de demander à l'agent une FAQ balisée dans ce but. Et la réactivité d'une page se mesure avec l'INP, qui a remplacé le FID dans les Core Web Vitals le 12 mars 2024.
Combien de temps et de budget prévoir ?
En bref : Pour un site vitrine de cinq à quinze pages, comptez deux à cinq jours de travail effectif si vous débutez, selon l'état de vos textes et photos. Ce temps se répartit à peu près ainsi dans notre pratique : un tiers pour le brief, l'arborescence et les textes, un tiers pour la construction des pages, un tiers pour les vérifications, la mise en ligne et la Search Console. Côté budget, trois postes sont à prévoir. L'abonnement Claude Pro, à 20 dollars US par mois au 25 septembre 2026, seulement pendant les mois de construction ou d'évolution. Le nom de domaine, soit quelques euros par an pour un .fr. L'hébergement, souvent gratuit pour un site statique de cette taille dans les quotas des offres d'entrée de gamme. Le vrai investissement est ailleurs : c'est le temps d'apprentissage, qui pèse surtout sur le premier projet et fond ensuite. Ajouter une page à un site existant prend ensuite quelques minutes.
Ce calcul appelle une précaution. Il ne compte pas la valeur de votre temps, qui est la variable décisive pour un dirigeant de TPE. Pour comparer honnêtement avec un site confié à une agence ou construit sur une plateforme, notre comparatif des trois voies détaille le coût sur trois ans, prix de renouvellement compris.
Pour réduire la courbe d'apprentissage, deux options existent : l'autoformation, avec la documentation d'Anthropic et beaucoup d'essais, ou une formation courte construite sur votre propre projet. Si vous êtes salarié ou dirigeant, notre guide sur le financement d'une formation IA en Nouvelle-Aquitaine détaille les prises en charge possibles par un OPCO ou un fonds d'assurance formation.
Comment se former pour construire son site avec Claude Code à Bordeaux ?
En bref : FJ Digital, organisme de formation certifié Qualiopi, propose une formation de deux jours, soit 14 heures, qui suit exactement le déroulé de ce tutoriel sur le vrai site de chaque participant. Le premier jour, vous cadrez votre arborescence et vos mots-clés locaux, installez Claude Code, rédigez le CLAUDE.md de votre site à partir d'un modèle, construisez vos pages et mettez une première version en ligne sur votre nom de domaine. Le second jour est consacré à la visibilité : balises, sitemap, vitesse mesurée avec PageSpeed Insights, données structurées LocalBusiness, Google Search Console et fiche Google Business Profile reliée au site. La session se déroule en présentiel à Bordeaux ou à distance, au tarif de 2 400 € HT pour le groupe de 1 à 4 stagiaires, finançable selon votre statut. Elle ne promet aucune position dans Google : elle livre un site en ligne, lisible et relié aux outils de Google.
Créer son site internet sur mesure avec l'IA : deux jours pour repartir avec votre site vitrine en ligne sur votre domaine, construit avec Claude Code et préparé pour Google. Aucune ligne de code à écrire, vous restez propriétaire du code source. Formation dispensée par un organisme certifié Qualiopi. Voir le programme et demander un devis
Si vous voulez d'abord maîtriser l'outil pour d'autres usages que le site, comme l'automatisation de tâches ou la création d'outils internes, la formation Maîtriser Claude Code couvre les agents, les plugins et les connexions MCP. Et si votre besoin ressemble davantage à une application qu'à une vitrine, notre comparatif Lovable, Bolt, Cursor et Claude Code vous aidera à choisir l'outil.
Ce qu'il faut retenir
En bref : Créer un site vitrine avec Claude Code sans savoir coder est réaliste en 2026, à condition de traiter l'agent comme un exécutant à diriger, pas comme une baguette magique. Le déroulé réel suit quatre étapes : préparer un brief, une arborescence et des textes qui décrivent votre vraie entreprise ; écrire dans le fichier CLAUDE.md les consignes de référencement avant la première page ; construire et vérifier chaque page, jusque dans son code source ; mettre en ligne sur un nom de domaine et un compte GitHub qui vous appartiennent. Les six erreurs qui rendent un site invisible (contenu en JavaScript, titres identiques, noindex oublié, sitemap non déclaré, images lourdes, page unique) se détectent en quelques minutes sans outil payant. Aucune méthode ne garantit une position dans Google, mais un site bien construit lève le premier obstacle : être lu. Le reste tient à la qualité et à la précision de vos contenus.
Pour aller plus loin, la formation pour créer son site internet sur mesure avec l'IA accompagne ce déroulé sur votre propre site, à Bordeaux ou à distance, et notre équipe répond à vos questions sur la page contact.
Sources consultées le 25 septembre 2026 (date d'origine précisée quand elle diffère) :
- Anthropic : installation et configuration requise de Claude Code, forfaits et tarifs de Claude
- Google Search Central : bases du SEO JavaScript, liens de titre, bloquer l'indexation avec noindex, créer et envoyer un sitemap
- web.dev : l'INP devient une Core Web Vital le 12 mars 2024
- Tarifs consultés le 14 septembre 2026 : Firebase, offre Spark, OVHcloud, domaine .fr
Questions fréquentes
