Le setup technique pour créer ton site avec Claude

Les quatre briques

1. Claude CodeCelui qui écrit. Tu lui parles, il crée et modifie les fichiers du site dans un dossier de ton ordi. L'application de bureau suffit, pas besoin d'ouvrir un terminal.
2. LocalhostTon site qui tourne sur ton ordi, à une adresse du type http://localhost:3000. Toi seul peux le voir. C'est là que tu regardes chaque changement avant que quelqu'un d'autre ne le voie.
3. GitHubLe coffre. Tout le contenu du site y est copié, avec l'historique de chaque modification. Ton ordi tombe en panne ou Claude casse quelque chose : tu reviens en arrière.
4. VercelL'hébergeur. Il prend ce qu'il y a sur GitHub et le met en ligne. Une fois branché, chaque modification envoyée sur GitHub part en ligne toute seule, en une à deux minutes.

Le trajet d'un changement est toujours le même : tu demandes à Claude, tu regardes sur localhost, tu valides, Claude envoie sur GitHub, Vercel met en ligne.

Avant de commencer

• Un abonnement Claude et l'application Claude Code installée.
• Un compte GitHub (gratuit).
• Un compte Vercel, créé avec le bouton « Continue with GitHub » : les deux sont liés d'office.
• Un dossier vide sur ton ordi, par exemple « mon-site ». Ouvre Claude Code dans ce dossier.

Étape 1 : le site sur ton ordi

Dans Claude Code, ouvert dans ton dossier, colle ça :

Crée un site dans ce dossier avec Next.js. Installe ce qu'il manque sur mon ordi (Node.js compris), en m'expliquant chaque chose que tu installes. Lance le site en local et donne-moi l'adresse à ouvrir dans mon navigateur.

Claude installe les outils, crée le site et te rend une adresse localhost. Tu l'ouvres dans ton navigateur : ton site est là, visible par toi seul. À partir de maintenant, chaque demande que tu fais à Claude se voit sur cette page, souvent sans même recharger.

Si la page ne répond plus le lendemain, c'est normal : localhost s'arrête quand tu fermes Claude Code. Écris « relance le site en local ».

Étape 2 : le contenu sur GitHub

Toujours dans la même conversation :

Mets ce projet sur mon compte GitHub, dans un dépôt privé. Vérifie avant qu'aucun mot de passe ni aucune clé ne part avec. Guide-moi pour la connexion à GitHub, je ne suis pas technique.

Claude te demandera une seule chose : te connecter à GitHub. Il affiche un code, tu le colles dans la page qui s'ouvre, tu cliques sur « Authorize ». C'est la seule manipulation de l'étape.

Dépôt privé : personne ne voit le code de ton site, seul le site en ligne est public. Ensuite, quand une version te plaît, tu écris « enregistre et envoie sur GitHub ». Chaque envoi est un point de sauvegarde auquel tu peux revenir.

Étape 3 : la mise en ligne sur Vercel

Celle-là se fait dans le navigateur, en quatre clics :

1. 1Sur vercel.com, clique sur « Add New… » puis « Project ».
2. 2Ton dépôt GitHub apparaît dans la liste. Clique sur « Import ».
3. 3Ne touche à aucun réglage, Vercel reconnaît Next.js tout seul. Clique sur « Deploy ».
4. 4Une à deux minutes plus tard, tu as une adresse publique en .vercel.app. Ton site est en ligne.

À partir de là, tu n'as plus à revenir sur Vercel. Chaque envoi sur GitHub déclenche une mise en ligne. Si une mise en ligne casse quelque chose, Vercel garde les précédentes : dans l'onglet « Deployments », tu en reprends une en un clic.

Si tu es à l'aise en ligne de commande, Claude peut aussi déployer sans passer par GitHub : npx vercel --prod

Ce qu'on oublie toujours

1. Le nom de domaineL'adresse en .vercel.app marche, mais tu veux la tienne. Tu l'achètes chez un registrar (OVH, Gandi, Namecheap, ou directement chez Vercel), puis dans Vercel : Settings → Domains → tu tapes ton domaine. Vercel t'affiche deux lignes à recopier chez ton registrar. Compte de quelques minutes à quelques heures pour que ça prenne.
2. Les clés et mots de passeDès que ton site utilise un service payant (un chat IA, un envoi d'e-mails), il a une clé secrète. Elle ne va jamais sur GitHub. Elle vit dans un fichier local que Claude exclut de l'envoi, et côté Vercel dans Settings → Environment Variables. Demande à Claude de vérifier, il sait le faire.
3. Le fichier CLAUDE.mdLa mémoire du projet. Tes règles y sont écrites une fois : ton ton, ta direction artistique, ce que Claude ne doit jamais toucher, comment tu mets en ligne. Sans lui, tu répètes tout à chaque conversation.
4. Les statistiquesDans Vercel, onglet Analytics → Enable, puis une ligne à ajouter au site que Claude pose pour toi. Tu vois tes visites sans bandeau de cookies à gérer.
5. GoogleDemande à Claude un sitemap et des titres de page propres, puis déclare ton domaine dans Google Search Console. Sans ça, Google met des semaines à te trouver.
6. Les mentions légalesObligatoires en France pour un site professionnel : qui édite, qui héberge, comment te contacter.
7. Le téléphonePlus de la moitié de tes visiteurs arrivent sur mobile, et toi tu regardes ton site sur un grand écran. Demande une vérification mobile avant chaque mise en ligne.

Le prompt qui règle les sept d'un coup :

Avant la mise en ligne, fais le tour de ce qu'il manque : nom de domaine, clés secrètes hors de GitHub, fichier CLAUDE.md avec mes règles, statistiques de visite, sitemap, mentions légales, rendu sur mobile. Dis-moi ce qui est fait, ce qui manque, et pose-moi les questions dont tu as besoin.

La routine, une fois que tout est branché

1. Tu demandes« Ajoute une section avec mes trois derniers clients. »
2. Tu regardesSur localhost, sur grand écran puis en largeur téléphone.
3. Tu corrigesAutant d'allers-retours qu'il faut. Rien n'est en ligne tant que tu ne l'as pas dit.
4. Tu valides« C'est bon, enregistre et mets en ligne. » Deux minutes plus tard, c'est public.

Une règle à écrire dans ton CLAUDE.md dès le premier jour : Claude ne met jamais en ligne sans ton accord explicite.

Des prompts à tester avec Fable 5.2

Une fois le setup en place, le site devient un terrain de jeu : chaque idée est une nouvelle adresse sur localhost, et ta page d'accueil ne bouge pas tant que tu n'as pas choisi. Ce sont les prompts que j'ai écrits pour les dernières versions du mien.

Refais une version de mon site, sensationnelle, qui inspire les gens. Je veux qu'on ressente l'énergie et le lifestyle d'un freelance assisté par l'IA pour faire scaler des business.

Je veux un univers « dans mon bureau », avec une mascotte qui m'aide. Un bureau magnifique, lumineux, ultra productif. Chaque objet ouvre une partie du site.

Go pour une vraie scène 3D. Va chercher des designs originaux et modernes sur Dribbble pour rendre le site exceptionnel.

Je veux que le visiteur arrive sur une page et choisisse son expérience : le bureau interactif, le site classique, un site des années 95, un site style SaaS B2B.

Crée une version SaaS B2B de mon site en reprenant la direction artistique de [un site que tu aimes].

Fais un motion de dix secondes qui montre le site et ses interactions, en boucle, pour un post LinkedIn.

Trois réflexes qui changent le résultat : donne une référence visuelle plutôt qu'un adjectif, demande chaque essai sur une nouvelle adresse pour pouvoir comparer, et dis ce qui ne va pas en une phrase plutôt que de tout réexpliquer.

Ce que ça coûte

• Claude : ton abonnement.
• GitHub : gratuit pour un dépôt privé.
• Vercel : une offre gratuite existe, réservée à un usage personnel et non commercial. Pour un site professionnel, regarde l'offre payante.
• Nom de domaine : de l'ordre de 10 à 15 € par an pour un .com ou un .fr.

Si tu veux que Claude déroule tout ça à ta place, questions comprises, c'est ce que fait le skill site-perso, sur la page Mon Claude.