Le kit, en détail
Créer et publier son site avec Claude Code
Voici exactement ce que vous achetez : le site de départ tel qu’il est livré, le sommaire de chaque module, la liste des fichiers et un extrait de la configuration Claude Code. 2 modules se lisent en entier gratuitement.
Version 1.0.0, mise à jour le 27 septembre 2026. Claude Code (abonnement ou crédits Anthropic) non inclus.
Démonstration
Le projet de départ, en fonctionnement.
C’est le site livré dans le kit, avant toute personnalisation, avec le contenu d’une activité fictive (Atelier Rayon). Vous le remplacez par le vôtre en suivant le guide. Naviguez dedans, testez-le sur votre téléphone : ouvrir la démonstration en plein écran.
Sommaire détaillé
10 modules, de l’installation au dépannage.
Les intitulés ci-dessous sont les vraies sections de chaque module.
- 00
Bienvenue
Ce que vous allez construire, ce qu'il vous faut et comment utiliser ce kit.
- Ce que contient le kit
- Ce qu'il faut avant de commencer
- Ce que ce kit ne fait pas
- Comment suivre le guide
- Quelques mots de vocabulaire
- 01
Installer les prérequis
Installer un éditeur, Node.js, Git et Claude Code, puis ouvrir un terminal dans le bon dossier.
- Le terminal en cinq lignes
- Installer un éditeur de texte : Visual Studio Code
- Installer Node.js
- Installer Git
- Avoir un compte qui donne accès à Claude Code
- Installer Claude Code
- Ouvrir un terminal dans le dossier mon-site
- Premier lancement de Claude Code
- 02
Définir votre activité
Remplir la fiche activité que Claude Code utilisera comme seule source pour écrire votre site.
- Pourquoi une fiche plutôt qu'une conversation
- Ouvrir la fiche
- Remplir section par section
- Rassembler les informations légales
- Relire la fiche
- 03
Personnaliser avec Claude Code
Transformer le site d'exemple en votre site avec /personnaliser, puis l'ajuster par petites demandes sans perdre le contrôle.
- Enregistrer l'état de départ avec Git
- Lancer Claude Code
- Lancer la personnalisation
- Relire les changements
- Enregistrer une version satisfaisante
- Ajuster par petites demandes
- Changer les couleurs et les polices
- Remplacer les images par vos photos
- Ajouter une page
- Revenir en arrière
- 04
Contrôler le résultat
Lancer la vérification automatique, lire le rapport, tester le site en local et sur téléphone, puis faire la relecture humaine.
- Lancer la vérification automatique
- Lire le rapport
- Regarder le site en local
- Tester l'affichage sur téléphone
- Tester au clavier
- Faire la relecture humaine
- Ce que la vérification automatique ne garantit pas
- 05
Publier votre site
Mettre le site en ligne avec Netlify Drop ou une alternative, relier votre nom de domaine, activer HTTPS et publier les mises à jour.
- Avant de choisir : ce qui est gratuit et ce qui est payant
- Étapes : publication avec Netlify Drop
- Préparer le dossier à envoyer
- Créer un compte et déposer le site
- Donner un nom lisible et compléter les mentions légales
- Activer le formulaire de contact (Netlify uniquement)
- Relier votre nom de domaine
- HTTPS
- Mettre à jour le site ensuite
- Alternatives
- 06
Faire évoluer le site
Ajouter des pages et des articles, déclarer le site à Google Search Console et mettre en place des sauvegardes.
- La routine de mise à jour
- Ajouter une page
- Ajouter des articles ou des actualités
- Déclarer le site à Google Search Console
- Sauvegarder votre travail
- Entretien annuel
- 07
Dépannage
Les problèmes les plus courants, avec pour chacun le symptôme, la cause et la solution.
- Étapes générales
- Problèmes courants
- « claude » introuvable ou « command not found »
- Problème de PATH sous Windows
- Node absent ou trop ancien
- npm bloqué par la politique d'exécution PowerShell
- Le port 4321 est déjà utilisé
- Site publié sans mise en forme (sans CSS) ou sans images
- Le formulaire de contact n'envoie rien
- Claude Code modifie trop de choses
- 08
Annexe : demandes types à Claude Code
Des demandes concrètes pour les besoins courants, chacune avec son contexte, sa formulation et ce qu'il faut vérifier ensuite.
- Règles d'or d'une bonne demande
- Étapes : les demandes types
- Première personnalisation
- Changer une information partout
- Raccourcir ou clarifier un texte
- Ajouter un service
- Changer les couleurs
- Changer la police
- Remplacer une illustration par une photo
- Ajouter une page
- 09
Annexe : checklist de publication
La liste de contrôle à cocher avant chaque mise en ligne, du contenu aux mentions légales.
- Vérification automatique
- Contenu
- Coordonnées
- Navigation et affichage
- Mentions légales
- Formulaire (si vous l'avez gardé)
- Publication
- Après la mise en ligne
Les fichiers
Un dossier prêt à ouvrir avec Claude Code.
Le téléchargement contient le projet mon-site (le site, la fiche à remplir, les exemples, les outils de vérification et d’aperçu, la configuration Claude Code) et le guide complet en Markdown, lisible hors ligne.
kit-site-claude-code-v1.0.0/
├── guide/
│ ├── 00-bienvenue.md
│ ├── 01-installer-les-prerequis.md
│ ├── 02-definir-votre-activite.md
│ ├── 03-personnaliser-avec-claude-code.md
│ ├── 04-controler-le-resultat.md
│ ├── 05-publier-votre-site.md
│ ├── 06-faire-evoluer-le-site.md
│ ├── 07-depannage.md
│ ├── annexe-checklist-publication.md
│ └── annexe-demandes-types.md
└── mon-site/
├── .claude/
│ ├── commands/
│ │ ├── changer-style.md
│ │ ├── nouvelle-page.md
│ │ ├── personnaliser.md
│ │ ├── preparer-publication.md
│ │ └── verifier.md
│ └── settings.json
├── contenu/
│ ├── exemples/
│ │ ├── artisan-menuisier.md
│ │ ├── coach-independante.md
│ │ └── commerce-local.md
│ └── activite.md
├── outils/
│ ├── apercu.mjs
│ └── verifier.mjs
├── site/
│ ├── assets/
│ │ ├── images/
│ │ │ ├── icone-conseil.svg
│ │ │ ├── icone-entretien.svg
│ │ │ ├── icone-reparation.svg
│ │ │ ├── illustration-accueil.svg
│ │ │ └── illustration-atelier.svg
│ │ ├── favicon.svg
│ │ ├── main.js
│ │ └── style.css
│ ├── 404.html
│ ├── a-propos.html
│ ├── contact.html
│ ├── index.html
│ ├── mentions-legales.html
│ └── services.html
├── CLAUDE.md
├── LISEZ-MOI.md
└── package.jsonExtrait
Le CLAUDE.md du projet
Claude Code lit ce fichier à chaque session. Il lui donne les règles du projet : ne rien inventer, garder le site simple, vérifier après chaque modification. Début du fichier :
# Instructions pour Claude Code : site vitrine statique ## But du projet Site vitrine d'une petite entreprise ou d'un indépendant, en HTML, CSS et JavaScript statiques, publié tel quel (Netlify Drop, Cloudflare Pages, GitHub Pages). La personne qui travaille avec vous n'est généralement pas développeuse : répondez-lui en français, en la vouvoyant, et expliquez simplement ce que vous faites, sans jargon. Le site livré au départ est un exemple fictif (« Atelier Rayon », vélos à Nantes). Il doit être entièrement remplacé par les informations de la fiche `contenu/activite.md`. ## Structure - `contenu/activite.md` : la fiche d'activité remplie par l'utilisateur. Seule source d'information sur son activité. - `contenu/exemples/` : fiches d'exemples fictives. Ne jamais les utiliser comme source pour le site de l'utilisateur. - `site/` : le site publié. Pages `index.html`, `services.html`, `a-propos.html`, `contact.html`, `mentions-legales.html`, `404.html`. - `site/assets/style.css` : toutes les couleurs, polices et arrondis sont des variables dans le bloc `:root` en tête de fichier. - `site/assets/main.js` : menu mobile et année du pied de page. Garder ce script minimal. - `site/assets/images/` : illustrations SVG. Leurs couleurs sont écrites dans les fichiers SVG eux-mêmes. - `outils/verifier.mjs` : vérification avant publication. `outils/apercu.mjs` : aperçu local. ## Règles de contenu 1. Lisez `contenu/activite.md` avant toute personnalisation ou tout ajout de contenu. 2. N'inventez jamais : avis clients, témoignages, notes, chiffres (clients, années d'expérience, délais, pourcentages), diplômes, certifications, labels, assurances, prix, partenaires, adresses. Si une information utile n'est pas dans la fiche, écrivez à sa place `À COMPLÉTER` (dans `<span class="a-completer">À COMPLÉTER</span>` en HTML) et signalez-le dans votre résumé. 3. Vous pouvez reformuler, structurer et raccourcir ce que dit la fiche, mais sans ajouter de promesse ni de fait nouveau. Pas de superlatifs non justifiés (« le meilleur », « n°1 »), pas d'urgence artificielle. 4. Respectez les consignes de la section 11 de la fiche (vouvoiement, mots à éviter...). 5. Mentions légales : reportez uniquement les informations de la section 9 de la fiche. Gardez `À COMPLÉTER` pour tout le reste. Ne supprimez pas l'encadré d'avertissement tant qu'il reste des zones à compléter. `mentions-legales.html` contient deux blocs d'éditeur, `data-bloc="entreprise"` et `data-bloc="association"` : gardez celui qui correspond au champ « Forme » de la fiche et supprimez l'autre, avec ses commentaires `BLOC` et `FIN DU BLOC`. Si la forme n'est pas indiquée, déduisez-la de la partie remplie (A ou B) ou de la forme juridique ; s'il reste un doute, gardez les deux blocs et demandez à l'utilisateur. Une association n'a ni capital, ni RCS : n'ajoutez pas ces lignes. 6. Formulaire : si la fiche indique « non » en section 10, supprimez le `<form>` de `contact.html` et gardez un lien `mailto:`, puis supprimez dans `mentions-legales.html` la ligne sur les messages du formulaire stockés par Netlify. Si « oui », gardez le formulaire Netlify tel quel (attributs `data-netlify`, `netlify-honeypot`, champ caché `form-name`) et cette ligne. 7. Supprimez le bandeau `<p class="bandeau-exemple" data-exemple>` de toutes les pages dès que le contenu est personnalisé. […]
Questions fréquentes
Avant d’acheter
Faut-il savoir coder ?
Non. Le kit s’adresse à des débutants motivés : il explique ce qu’est un terminal, comment installer les outils et comment formuler vos demandes à Claude Code. Il faut en revanche accepter de suivre des étapes précises, de lire ce que Claude modifie et de vérifier le résultat. Le kit ne fait pas le travail à votre place.
Claude Code est-il inclus dans le prix ?
Non. Le kit coûte 49 €, en paiement unique. Claude Code est un outil d’Anthropic qui demande un abonnement Claude payant ou des crédits d’API, facturés séparément par Anthropic. Consultez leurs tarifs à jour avant d’acheter le kit. Lors de nos tests, une personnalisation complète du site a demandé 8 à 10 minutes de travail à Claude Code, soit environ 4 à 6 dollars au tarif à l’usage : avec un abonnement individuel, cela consomme une part notable de vos limites d’usage. AI First n’est pas affilié à Anthropic.
Y a-t-il d’autres frais à prévoir ?
Le guide présente des hébergeurs qui proposent une offre gratuite pour un site statique comme celui du kit. Un nom de domaine personnalisé (votre-activite.fr) est optionnel et payant chez le registraire de votre choix. Les offres des hébergeurs peuvent évoluer : vérifiez leurs conditions au moment de publier.
Quel site vais-je obtenir ?
Un site vitrine statique de six pages (accueil, services, à propos, contact, mentions légales, page d’erreur), rapide, adapté au mobile, que vous personnalisez pour votre activité. Il ne gère ni paiement en ligne, ni comptes clients, ni réservations. Vous pouvez voir le projet de départ en fonctionnement sur la page du kit avant d’acheter.
Mon site sera-t-il bien référencé sur Google ?
Personne ne peut le garantir. Le projet de départ respecte les bases techniques (titres, descriptions, structure des pages, vitesse, mobile) et le guide explique comment déclarer votre site à Google. Le positionnement dépend ensuite de votre contenu, de votre concurrence et du temps.
Combien de temps faut-il ?
Cela dépend de votre aisance et de la préparation de vos contenus (textes, photos, informations légales). Chaque module indique une durée indicative. Prévoyez plusieurs sessions plutôt qu’une seule soirée, et gardez du temps pour relire.
Comment se passe l’accès après le paiement ?
Vous indiquez votre email, vous payez sur la page sécurisée de Stripe. Dès que Stripe nous confirme le paiement, votre espace « Mon kit » est créé avec cette adresse, sans mot de passe, et un email vous envoie votre lien d’accès. Vous y retrouvez les modules du guide, le projet de départ à télécharger et votre historique d’achat.
J’ai perdu mon email d’accès.
Allez sur la page Connexion et saisissez l’adresse utilisée lors de l’achat : un nouveau lien de connexion vous est envoyé. Aucun mot de passe n’est à retenir.
Puis-je me faire rembourser ?
Le kit est un contenu numérique livré immédiatement : avant le paiement, vous demandez cet accès immédiat et renoncez à votre droit de rétractation, comme le prévoit le Code de la consommation. Si un fichier est défectueux ou si l’accès ne fonctionne pas, écrivez-nous et nous corrigeons le problème. Les conditions complètes figurent dans les conditions générales de vente.
Le kit complet
49 €paiement unique
Accès immédiat après confirmation du paiement. Pas d’abonnement.
- Le projet de départ complet, à télécharger
- Le guide pas à pas, de l’installation à la publication
- CLAUDE.md, permissions et commandes Claude Code adaptées au projet
- Script de vérification et checklist de publication
- Fiches d’exemple et demandes types commentées
- Procédure de dépannage des erreurs courantes
- Accès à votre espace « Mon kit », sans limite de durée
Non inclus : l’abonnement ou les crédits Claude Code, un éventuel nom de domaine.
Conditions générales de vente · Déjà acheté ? Retrouver mon accès