Comment créer un site internet avec Claude Code et le publier sur Google

Ce que vous allez apprendre :

• préparer un projet pour que Claude Code produise un bon résultat du premier coup ;
• générer le site en local, le vérifier et le faire corriger ;
• envoyer le code sur GitHub et le publier sur Vercel ;
• connecter votre nom de domaine (DNS) ;
• recevoir les demandes de devis par email avec Resend ;
• rendre le site visible sur Google (indexation, sitemap, pages légales).

Les 10 étapes pour créer un site avec Claude Code en un coup d’œil

Ce dont vous avez besoin pour créer un site avec Claude Code

Tout est gratuit pour démarrer, sauf le nom de domaine si vous n’en avez pas :

• Pour installer Claude Code, suivez la documentation officielle d’Anthropic, qui est à jour pour Mac, Windows et Linux.
• Pour Visual Studio Code, choisissez simplement la version de votre système (Windows, Mac ou Linux).
• Pour le nom de domaine, j’utilise Hostinger. Le site était auparavant sur un hébergement WordPress chez eux. J’ai arrêté l’hébergement mais gardé le domaine. Si vous achetez un domaine ou un hébergement, vous pouvez bénéficier d’environ 20 % de réduction avec mon lien Hostinger.

Étape 1 : trouver l’inspiration visuelle avant de créer son site avec Claude Code

Avant de demander quoi que ce soit à Claude Code, choisissez le design vers lequel vous voulez aller. Deux sources très pratiques :

• Dribbble : allez dans Explore, puis Web design, et choisissez le style qui vous plaît. Enregistrez des captures d’écran.
• Envato : ce sont surtout des thèmes WordPress, mais c’est une excellente source d’inspiration, en particulier pour les plombiers, artisans et entreprises locales. Dans le menu, allez dans Web, puis Thèmes ou Modèles de site web, et enregistrez celui qui vous plaît.

Vous donnerez ensuite cette capture (ou un lien) à Claude Code dans le dossier du projet. On s’inspire d’une structure et d’une ambiance. On ne copie ni les textes, ni les images, ni le code d’un autre. C’est valable aussi pour un template payant : sa licence interdit en général de le redistribuer.

Étape 2 : préparer le dossier du projet Claude Code (la partie la plus importante)

Ce que vous préparez avant détermine la qualité du résultat. Créez un dossier sur votre ordinateur (le mien s’appelle plombier-lannilis) et placez-y quatre éléments :

• Les images du site, dans un sous-dossier public/images. Nommez-les clairement : hero.jpg, service-depannage.jpg, devanture.jpg… Si les noms sont vagues, Claude Code ne saura pas quelle image placer où.
• Le logo et le favicon.
• Le contenu et la structure de chaque page, dans un dossier content/ : textes, informations de l’entreprise, questions fréquentes. Je fais la même chose pour chaque page (accueil, électricien, chauffagiste…). Cette étape ressemble beaucoup à la rédaction d’un cahier des charges de refonte de site internet : plus il est précis, meilleur est le résultat.
• L’inspiration : la capture ou le lien trouvé à l’étape 1, dans un dossier inspiration/.

Où trouver des photos au début

Les vraies photos de l’entreprise sont toujours préférables, et vous pourrez les remplacer quand le client vous les envoie. En attendant, Unsplash propose des photos libres de droit : cherchez votre catégorie (plomberie, par exemple), sélectionnez quelques photos, citez l’auteur (c’est un artiste qui a pris chaque photo, et c’est la bonne pratique), renommez-les et rangez-les dans le dossier.

Les tailles d’images à prévoir

Demandez à Claude Code les dimensions dont il a besoin pour chaque emplacement. Dans mon cas, j’avais envoyé la photo de la devanture en 500 x 500 px : trop petit. Il fallait du 1000 x 1000 px. Autant le prévoir dès le début.

Étape 3 : créer le site en local avec Claude Code

1. Ouvrez Visual Studio Code, puis Fichier > Ouvrir un dossier, et sélectionnez votre dossier de projet.
2. Ouvrez un terminal : Terminal > Nouveau terminal.
3. Tapez claude pour lancer Claude Code, puis acceptez la confiance du dossier (réponse « Yes »).
4. Pour choisir le modèle, tapez /model. J’utilise Sonnet 5.5 au quotidien. Opus est le plus performant, au prix d’une consommation plus élevée.
5. Collez le prompt ci-dessous et lancez-le.

Prompt 1 : création du site

C’est le prompt le plus important : il génère la page d’accueil, l’architecture du site, le formulaire de devis et les pages provisoires. Il est fourni dans le document des 5 prompts à télécharger. Remplacez tout ce qui est entre crochets, comme [NOM_ENTREPRISE], par vos informations (nom, métier, villes, couleurs du logo, téléphone, email), puis collez-le dans Claude Code.

Claude Code travaille ensuite quelques minutes. Il vous propose en général sa palette et son architecture avant de coder, puis il construit la page section par section.

Pour voir le résultat en local, lancez la commande qu’il vous indique (en général npm run dev) et ouvrez l’adresse affichée dans le navigateur.

Étape 4 : vérifier le site créé avec Claude Code et demander les retouches

Passez la page en revue, section par section. Voici ce que j’ai contrôlé sur mon site :

• Le hero : le titre, les boutons d’appel et de devis.
• Les services : les liens fonctionnent-ils et pré-sélectionnent-ils la prestation dans le formulaire ?
• L’appel à l’action, la FAQ, la zone d’intervention : textes et liens.
• Le formulaire : simplifiez-le si besoin pour limiter la friction (moins de champs, plus de conversions).
• Les horaires et l’adresse, ainsi que la carte, chargée au clic.
• Les couleurs : les teintes marron ou noires de mes fonds ne correspondaient pas au logo, je les ai fait remplacer par une image d’arrière-plan.
• Le titre du H1 : un mot-clé générique comme « dans le Pays des Abers » n’est pas ce que les gens tapent. Il faut mettre les villes.
• Le logo : un défaut d’affichage à corriger.

Regardez aussi le site en version mobile. Dans Safari, activez Réglages > Avancé > Afficher les fonctionnalités pour les développeurs web, puis utilisez le mode de conception adaptative du menu Développement. Dans Chrome, ouvrez les outils de développement et activez la vue appareil.

Prompt 2 : retouches, photos et informations réelles

Une fois vos remarques notées, regroupez-les dans un seul message avec le prompt 2 du document à télécharger. Il intègre les photos, les informations réelles (adresse, horaires, présentation de l’entreprise) et les corrections du H1, du logo, des fonds et du formulaire.

Claude Code applique les corrections, récupère les images (d’où l’importance de bien les nommer) et vous répond. Rechargez la page pour vérifier.

Étape 5 : compléter les pages métiers et intégrer les vrais avis Google

Souvent, le site comporte plusieurs pages métiers. Dans mon cas : plombier (l’accueil), électricien et chauffagiste. Claude Code avait créé deux pages provisoires qui reprenaient l’accueil, sans les photos. Pour les finaliser :

1. Mettez dans le dossier content/ le texte de chaque page, et dans public/images/ les photos nécessaires (par exemple celle de la devanture en 1000 x 1000 px pour la section À propos).
2. Copiez vos avis Google (nom, note, date, texte) pour les intégrer en dur. C’est beaucoup plus simple que de brancher l’API Google (Place ID, projet Cloud, facturation, clé), qui est une usine à gaz pour un site vitrine. Pour en obtenir davantage, voyez comment récolter plus d’avis clients.

Prompt 3 : pages métiers complètes et avis Google

Le prompt 3 du document à télécharger supprime l’API Google, crée le fichier des avis, remplace les pages provisoires par des pages métiers complètes avec leur SEO local, leur FAQ et leur JSON-LD, puis lance un build de vérification.

Étape 6 : envoyer le site créé avec Claude Code sur GitHub

Le site est prêt en local. Pour le publier, on le stocke d’abord sur GitHub, que Vercel utilisera ensuite.

1. Créez un compte sur github.com si vous n’en avez pas.
2. Cliquez sur + en haut à droite, puis New repository.
3. Donnez un nom au dépôt, sans accent ni espace (par exemple societe-mailloux).
4. Choisissez Private (privé).
5. Cliquez sur Create repository, puis copiez l’adresse du dépôt (elle se termine par .git).

Prompt 4 : envoyer le code sur GitHub

Le prompt 4 du document à télécharger vérifie le .gitignore et l’absence de clé secrète, lance un build, fait le premier commit et envoie le code sur la branche main de votre dépôt. Il suffit d’y remplacer l’adresse du dépôt.

Si GitHub demande une connexion, Claude Code vous indique quoi faire (une fenêtre du navigateur s’ouvre en général). Rechargez ensuite la page du dépôt : vos fichiers doivent y apparaître.

Étape 7 : publier le site sur Vercel

1. Créez un compte sur vercel.com. Connectez-vous avec GitHub : la connexion se fait automatiquement.
2. Cliquez sur Add New > Project.
3. Sélectionnez votre dépôt GitHub. Si besoin, autorisez-le avec Install.
4. Cliquez sur Import. Vérifiez que le preset est bien Astro.
5. Ouvrez Environment Variables : c’est là qu’on place les variables du formulaire. Pour l’instant, ajoutez CONTACT_TO_EMAIL : l’adresse où vous voulez recevoir les devis (par exemple contact@votre-domaine.fr).
6. Cliquez sur Deploy et attendez une à deux minutes.

Le site est maintenant en ligne sur une adresse en .vercel.app. Tout ce qui suit, c’est le brancher à votre vrai nom de domaine et à l’envoi des mails.

Étape 8 : recevoir les devis par mail avec Resend

Le formulaire de devis a besoin d’un service pour envoyer les messages. J’utilise Resend, gratuit jusqu’à 3 000 mails par mois.

1. Créez un compte sur resend.com.
2. Clé API : menu API Keys, puis Create API Key. Donnez-lui le nom du projet et la permission Sending access. Copiez la clé immédiatement (elle commence par re_ et ne s’affiche qu’une fois), et gardez-la dans un endroit sûr. Ne la montrez jamais, ne la mettez jamais dans le code.
3. Domaine : menu Domains, puis Add Domain. Saisissez le domaine du site, sans www et sans adresse mail (par exemple votre-domaine.fr).
4. Resend affiche une liste d’enregistrements DNS à ajouter (type, nom, valeur).

Ajouter les enregistrements DNS chez Hostinger

1. Sur Hostinger, allez dans Domaines, cliquez sur Gérer pour votre domaine, puis ouvrez la zone DNS.
2. Ajoutez, un par un, les enregistrements demandés par Resend : le type, le nom et la valeur sont recopiés à l’identique. Le TTL peut rester par défaut.
3. Retournez dans Resend et cliquez sur Verify DNS Records. Au bout de quelques minutes (parfois un peu plus), le domaine passe à Verified.

Les enregistrements DNS sont des informations publiques : il n’y a aucun risque à les afficher. Ne touchez pas aux lignes existantes (notamment MX et TXT) sinon vos adresses email risquent de ne plus fonctionner. Resend ajoute ses lignes sur des noms à part.

Ajouter les variables sur Vercel

Retournez dans votre projet Vercel, puis Settings > Environment Variables, et ajoutez :

L’adresse d’envoi et l’adresse de réception peuvent être de domaines différents : seule l’adresse d’envoi doit appartenir à un domaine vérifié dans Resend.

Allez ensuite dans Deployments, cliquez sur les trois points du dernier déploiement, puis Redeploy pour que les variables soient prises en compte.

Étape 9 : connecter votre nom de domaine à Vercel

1. Dans votre projet Vercel, ouvrez Settings > Domains.
2. Cliquez sur Add (ou Add Existing) et tapez votre nom de domaine. Ajoutez aussi la version avec www.
3. Vercel affiche les enregistrements DNS à créer. En général : un enregistrement A sur @ avec la valeur indiquée par Vercel, et un enregistrement CNAME sur www avec la valeur indiquée par Vercel.
4. Retournez dans la zone DNS de Hostinger et ajoutez-les. Utilisez toujours les valeurs affichées par Vercel, elles peuvent changer.
5. S’il existe déjà un ALIAS sur @ ou un CNAME sur www créé par Hostinger (hébergement ou page de parking), supprimez-les : ils entrent en conflit. Hostinger affiche alors une erreur du type « RRset … ALIAS must not be used with A on the same name ».
6. Dans Vercel, cliquez sur Refresh. Au bout de quelques minutes (parfois une ou deux heures), les domaines passent en Valid Configuration.

Choisir le domaine principal (très important pour le SEO)

Décidez si votre adresse officielle est avec ou sans www, et faites rediriger l’autre vers elle en redirection permanente (308). Dans mon cas, le domaine principal est la version sans www, et www redirige vers elle.

Si Vercel ne vous laisse pas enregistrer (bouton Save grisé), c’est qu’un domaine redirige déjà vers l’autre. Faites d’abord Edit sur le domaine principal, choisissez Connect to an environment (Production), enregistrez, puis revenez sur l’autre domaine pour choisir Redirect to Another Domain, 308 Permanent Redirect, vers le domaine principal.

Vous remplacez un ancien site WordPress par ce nouveau site codé ? Gardez les mêmes URLs quand c’est possible, et prévoyez un plan de redirection pour les autres, comme je l’explique dans mon guide sur la refonte de site internet sans perdre son référencement.

Tester

Ouvrez votre site sur votre nom de domaine. Remplissez le formulaire de devis avec votre adresse : le mail doit arriver à l’adresse de réception (regardez aussi les spams la première fois). Si rien n’arrive, regardez dans Resend, menus Emails ou Logs : ils indiquent si le message est parti ou s’il y a une erreur.

Étape 10 : rendre votre site créé avec Claude Code visible sur Google

Pendant le développement, Claude Code a mis le site en noindex pour que Google ne l’indexe pas trop tôt. Il faut maintenant le passer en production : retirer le noindex, générer le sitemap, corriger les URLs et ajouter les pages légales.

Avant, récupérez vos informations légales. Pour une entreprise française, vous les trouvez sur l’Annuaire des entreprises (annuaire-entreprises.data.gouv.fr) : dénomination, forme juridique, SIRET, adresse du siège, capital, TVA, dirigeant.

Prompt 5 : mise en production (indexation, sitemap, pages légales)

Le prompt 5 du document à télécharger retire le noindex, active le sitemap et les balises canoniques, rédige les mentions légales et la politique de confidentialité à partir de la fiche officielle de l’entreprise, puis pousse le tout sur GitHub.

Une fois le prompt appliqué et le site redéployé, vérifiez en ligne : votre-domaine.fr/robots.txt doit autoriser l’indexation et indiquer le sitemap, et le sitemap (en général /sitemap-index.xml) doit lister vos pages.

Soumettre le site à Google

1. Ouvrez la Google Search Console et ajoutez votre site en propriété de type Domaine. La vérification se fait par un enregistrement TXT dans la zone DNS, dans Hostinger.
2. Dans le menu Sitemaps, saisissez l’adresse de votre sitemap et validez.
3. Avec l’outil Inspection d’URL, demandez l’indexation de votre page d’accueil.
4. Rattachez votre fiche d’établissement Google à l’adresse du site. Si elle n’est pas encore optimisée, voici comment optimiser sa fiche Google My Business.

L’indexation peut prendre de quelques jours à quelques semaines. Le référencement local se travaille ensuite : fiche Google complète, avis, pages dédiées par ville, contenus utiles. C’est le cœur d’une stratégie de référencement local efficace pour un artisan.

Site codé avec Claude Code ou WordPress : que choisir pour son site internet

Créer un site avec Claude Code n’est pas la bonne réponse dans tous les cas. Voici les différences concrètes pour choisir selon votre projet :

Pour un site qui doit être modifié régulièrement par son propriétaire, mieux vaut rester sur WordPress, avec une maintenance WordPress pour garder le site sécurisé. Vous pouvez aussi connecter Claude Code à WordPress : j’explique comment dans mon tutoriel pour connecter Claude Code à WordPress.

Les erreurs à éviter quand on crée un site avec Claude Code

• Des images mal nommées ou trop petites : Claude Code ne sait pas où les placer, ou les étire. Nommez-les par emplacement et vérifiez les tailles.
• Brancher l’API Google pour les avis quand trois avis recopiés suffisent : c’est lourd, payant au-delà d’un quota et plein de pièges.
• Garder un ALIAS ou un ancien CNAME d’hébergement dans la zone DNS : le domaine ne se connecte pas.
• Oublier de redéployer après avoir ajouté une variable d’environnement.
• Laisser le noindex en production, ou au contraire l’enlever trop tôt.
• Afficher une clé API, un mot de passe ou un fichier .env dans une vidéo, une capture ou un dépôt public. Si cela arrive, supprimez la clé et recréez-en une immédiatement.
• Copier le texte ou les images d’un autre site : on s’inspire de la structure, on rédige ses propres contenus.
• Afficher des avis sans honnêteté : recopiez-les à l’identique, indiquez leur provenance (Google), n’inventez ni note moyenne ni nombre d’avis.

Questions fréquentes sur la création d’un site avec Claude Code

Peut-on créer un site avec Claude Code sans savoir coder ?

Oui, à condition de bien préparer le projet (inspiration, images nommées, contenus, prompt précis) et de vérifier le résultat. Vous n’écrivez pas le code, mais vous devez savoir ce que vous voulez et relire.

Pourquoi Astro plutôt que WordPress ?

Astro produit un site statique : il est très rapide, simple à héberger et se déploie sur Vercel sans réglage particulier. Il n’y a ni plugin à mettre à jour, ni base de données à sécuriser. En contrepartie, le client ne modifie pas ses pages dans une interface graphique : les contenus se changent dans des fichiers de données, avec l’aide de Claude Code.

Combien coûte la création d’un site avec Claude Code ?

GitHub, Vercel et Resend ont des offres gratuites suffisantes pour un site vitrine. Il faut compter un nom de domaine (quelques euros par an) et un abonnement Claude pour utiliser Claude Code. Pour comparer avec une création classique, vous pouvez utiliser mon outil pour estimer le prix de votre site internet.

Que faire pour modifier le site après sa mise en ligne ?

Vous modifiez le site avec Claude Code, il fait git push, et Vercel redéploie automatiquement en moins d’une minute.

Mes clients peuvent-ils modifier eux-mêmes leur site ?

Pas dans une interface comme WordPress. Pour un client autonome, WordPress ou Elementor reste adapté. Pour un site vitrine qui bouge peu et qui doit être rapide, le code est un excellent choix.

Conclusion : créer son site avec Claude Code demande surtout de la préparation

Vous savez maintenant créer un site avec Claude Code, le publier sur Vercel, le brancher à un nom de domaine, recevoir les devis par mail et le soumettre à Google. L’essentiel du résultat tient à la préparation : une bonne inspiration, des images bien nommées, des contenus prêts et des prompts précis.

Si vous voulez que je prenne en charge la création de votre site vitrine, sa refonte ou son référencement local, vous pouvez demander un devis à l’agence Web Armor.

Pas encore récupéré les prompts ? Téléchargez le document des 5 prompts avec le formulaire en haut de cette page et gardez-le sous la main pour votre prochain site.

Vous voulez la même méthode avec WordPress ou Elementor ? Dites-le en commentaire de la vidéo.