Tout le monde parle de Claude Code, mais par où commencer quand on n'est pas développeur ? Et surtout, comment passer d'un site qui s'affiche sur ton ordinateur à un site en ligne, avec ton nom de domaine ? Dans ce guide rapide, je te montre le combo Claude Code GitHub + Hostinger, en 4 étapes : installer Claude Code, créer ton site à partir d'un screenshot, l'envoyer sur GitHub, puis le publier. Compte environ 15 minutes pour la mise en ligne, une fois tes comptes créés.
Le tuto en vidéo
Je crée en direct la landing page d'un consultant SEO, du screenshot à la mise en ligne.
Ce qu'il te faut pour commencer
Quatre outils suffisent : Claude (plan Pro) pour créer le site, GitHub (gratuit) pour stocker son code, un hébergement web pour le mettre sur internet et un nom de domaine, c'est-à-dire l'adresse de ton site (par exemple nomadicsteph.com).
Compte environ 15 minutes pour mettre en ligne la première version de ton site, une fois tes comptes créés.
| Outil | À quoi il sert | Prix |
|---|---|---|
| Claude, plan Pro | Accès à Claude Code, qui crée ton site | 21 à 24 €/mois TTC en mensuel, 18 à 20 €/mois TTC en annuel |
| Hébergement Hostinger | L'espace sur internet où vit ton site | 10 à 20 €/mois, environ 3 €/mois la 1re année |
| Nom de domaine | L'adresse de ton site | 15 à 20 €/an, offert la 1re année avec Hostinger |
| GitHub | Stocker le code de ton site en ligne | Gratuit |
| Dribbble (facultatif) | Trouver une inspiration de design | Gratuit |
Prix d'avril 2026 pour l'hébergement et le nom de domaine. Pour Claude, les prix officiels sont de 20 $ par mois, ou 17 $ par mois en annuel (200 $ d'avance), hors taxes : le montant exact en euros s'affiche au paiement.
Pour l'hébergement, je te recommande Hostinger, qui offre selon moi le meilleur rapport qualité-prix. Avec le code NOMADICSTEPH, tu as 10 % de réduction en plus.
Hébergement web pour ton site, avec nom de domaine et e-mails.
🎁 -10 % avec ce code
Certains liens sont affiliés : ça ne te coûte rien de plus et ça soutient mes tutos gratuits.
Étape 1 : installer Claude Code
Le plus simple pour débuter, c'est l'application Claude pour ordinateur (Mac ou Windows). Télécharge-la sur la page officielle de Claude, connecte-toi à ton compte, et tu vois trois onglets :
- Chat : l'IA que tu connais, tu poses une question, elle te répond ;
- Cowork : un mode pensé pour t'aider dans ton travail au quotidien ;
- Code : c'est Claude Code, celui qu'on utilise ici.
À ta première connexion à Claude Code, choisis ou crée un dossier sur ton ordinateur (par exemple « mon-site »). C'est là que Claude Code enregistre tout le code qu'il crée pour toi.
Les 3 façons d'utiliser Claude Code
- L'app desktop Claude : la plus accessible, parfaite pour commencer.
- Le terminal : plus de contrôle et d'options, mais moins user-friendly.
- Dans un éditeur de code (VS Code, Cursor…) : pour aller plus loin.
Pour ce guide, l'app desktop suffit largement.
Étape 2 : créer ton site à partir d'un screenshot
La façon la plus rapide d'obtenir un beau premier jet, c'est de donner à Claude Code une inspiration de design. Va sur Dribbble, un site où des designers publient leurs créations, et cherche le type de page que tu veux, en anglais. Dans la vidéo, je tape SEO consultant landing page. Choisis un design qui te plaît et fais une capture d'écran.
Dans Claude Code, colle le prompt ci-dessous en remplaçant l'activité, la ville et le nom par les tiens, puis clique sur le + (« Ajouter des fichiers ou des photos ») pour joindre ton screenshot.
Pendant qu'il travaille, Claude Code te demande des autorisations (créer un fichier, lancer une commande) : clique sur « Autoriser ». Quelques minutes plus tard, tu as un aperçu de ton site directement dans Claude Code.
Ce que Claude Code a créé, c'est un fichier **index.html** qui contient tout le code de ton site. Ouvre ton dossier sur ton ordinateur et double-clique dessus : ton site s'affiche dans ton navigateur, exactement comme il apparaîtra en ligne.
Claude Code GitHub : pourquoi passer par GitHub ?
Parce que pour l'instant, ton site n'existe que sur ton ordinateur : personne d'autre que toi ne peut le voir. GitHub est l'étape intermédiaire qui va permettre à ton hébergeur de le récupérer et de l'afficher à tout le monde.
GitHub, c'est un outil en ligne qui stocke le code des sites et des applications, un peu comme un Google Drive pour les sites web. Tu y crées un dossier, qu'on appelle un repo (ou dépôt), Claude Code y envoie ton site, puis Hostinger va le chercher.
GitHub fait le lien entre Claude Code et ton hébergeur : à chaque modification, tu envoies le nouveau code sur GitHub, puis tu redéploies.
L'autre avantage : ton code t'appartient et il est sauvegardé en ligne. Tu peux le reprendre quand tu veux, avec Claude Code ou un autre outil.
Étape 3 : connecter Claude Code à GitHub
Trois actions : créer ton compte, créer ton repo, connecter les deux outils.
-
1
Crée ton compte GitHub
Va sur github.com et clique sur Sign up. Le plus rapide est de t'inscrire avec ton compte Google : c'est fait en quelques clics.
-
2
Crée ton repo
Sur ton tableau de bord GitHub, clique sur New. Donne un nom à ton repo (par exemple
consultant-seo), une courte description, choisis Private (privé), puis clique sur Create repository. -
3
Active le connecteur GitHub dans Claude
Dans Claude, ouvre Customize › Connecteurs, puis Intégration GitHub et clique sur Connecter. Si c'est ta première connexion, GitHub te demande d'autoriser Claude : valide.
-
4
Demande à Claude Code d'envoyer ton site
Retourne dans Claude Code et donne-lui le nom de ton repo. Il s'occupe du reste ; autorise ses actions sur GitHub quand il te le demande.
Rafraîchis la page de ton repo sur GitHub : le fichier index.html est là. Ton site est maintenant stocké en ligne.
Repo public ou privé ?
Un repo public est visible par tout le monde sur GitHub ; un repo privé, seulement par toi. Je te conseille le privé, comme dans la vidéo. La seule différence pour la suite : Hostinger aura besoin d'une clé d'accès pour lire ton repo privé (je te montre comment à l'étape 4). Avec un repo public, cette étape n'existe pas.
Étape 4 : mettre ton site en ligne avec Hostinger
Dernière étape : publier ton site sur internet, avec ton nom de domaine. Chez Hostinger, ça se passe en quatre temps.
Choisis ton hébergement et ton nom de domaine
Pour un site en HTML comme celui-ci, n'importe quel plan d'hébergement web convient. Dans la vidéo, je recommande le plan Business si tu penses créer des applications web plus tard, car il inclut les applications Node.js.
Choisis une durée d'au moins 12 mois : plus l'engagement est long, plus la réduction est forte, et c'est ce qui te donne le nom de domaine offert la première année. Un mois, franchement, ça ne vaut pas le coup. Ajoute le code promo NOMADICSTEPH, clique sur « Appliquer », puis finalise le paiement et la création de ton compte.
Crée un site HTML personnalisé
Dans ton compte Hostinger, ajoute un site web et choisis l'option Site web HTML personnalisé. Choisis ensuite ton nom de domaine gratuit (vérifie qu'il est disponible), puis laisse Hostinger configurer ton site.
Relie ton repo GitHub
Dans le tableau de bord de ton site, va dans Avancé › Git pour créer un nouveau dépôt. C'est ce qui relie GitHub à Hostinger. Pour savoir quoi remplir, demande à Claude, en précisant bien que ton repo est privé :
Claude te donne les valeurs à entrer et les étapes de la clé SSH (une « deploy key ») : la clé d'accès qui autorise Hostinger à lire ton repo privé.
-
1
Génère la clé SSH dans Hostinger
Dans la section Dépôt Git privé, clique sur Générer une clé SSH, puis copie-la.
-
2
Ajoute-la dans GitHub
Dans ton repo GitHub, va dans Settings › Deploy keys › Add deploy key. Donne-lui un nom (par exemple « Hostinger »), colle la clé, puis clique sur Add key.
-
3
Remplis le dépôt dans Hostinger
URL du dépôt : l'adresse SSH que Claude t'a donnée, au format
git@github.com:ton-compte/ton-repo.git(pas l'adresse en https, réservée aux repos publics). Branche :main. Répertoire : laisse vide. Clique sur Créer.
Déploie ton site
Dans la liste de tes dépôts, clique sur Déployer, puis confirme. Une fois le déploiement réussi, retourne sur le tableau de bord et clique sur l'adresse de ton site : il est en ligne.
Les ressources de la vidéo, dans le Kit vibe coding.
- Le guide pas à pas, avec tous les liens et le code promo Hostinger
- Les 3 prompts de la vidéo, prêts à copier-coller
- Le schéma récapitulatif des 5 étapes, à garder sous la main
:::
Modifier ton site après la mise en ligne
Ton site est en ligne, mais ce n'est qu'une première version. Pour le faire évoluer, la boucle est toujours la même :
- Demande tes modifications à Claude Code, avec des prompts.
- Vérifie le résultat dans l'aperçu.
- Demande-lui d'envoyer les changements sur ton repo GitHub.
- Dans Hostinger, clique de nouveau sur Déployer.
Tu peux aussi activer le déploiement automatique : ton site se met à jour tout seul dès que Claude Code envoie une modification sur GitHub. Demande à Claude Code de te guider, il te donnera les étapes adaptées à ton compte.
Mon avis sur Claude Code après ce premier test
J'ai fait ce tuto en avril 2026, lors de mes premiers tests de Claude Code avec l'app desktop. Pour créer un site web, c'est solide.
- Ce qui m'a convaincue : la résolution des problèmes techniques. Quand je bloque, Claude Code trouve la solution ou me dit exactement quoi faire. C'est efficace, précis, sans blabla.
- Là où je suis restée prudente : le design. Avec un seul prompt, le résultat est moins soigné qu'avec Lovable, ma référence pour le rendu visuel à l'époque. D'ailleurs, le site en ligne à la fin de la vidéo est un peu différent du premier : j'ai eu un petit souci et j'ai dû recommencer.
- La grande différence avec des outils comme Lovable, Emergent ou Hostinger Horizons : Claude Code est moins clé en main, mais il te donne une vraie indépendance. Tu ne dépends plus d'une plateforme ni d'un abonnement à un outil de création : ton code t'appartient et tu peux tout modifier.
Claude Code est fait pour toi si tu veux sortir des outils no-code fermés, garder la main sur ton projet et avoir un assistant technique vraiment fiable.
Depuis, j'ai trouvé la parade pour le design : passer d'abord par Claude Design pour créer une maquette unique, puis publier directement depuis Claude Code, sans passer par GitHub. Je te montre cette méthode complète pour créer un site avec Claude Code, du design au SEO.
Les erreurs à éviter
- Prendre le plan gratuit de Claude : Claude Code n'y est pas inclus. Il te faut au minimum le plan Pro.
- Prendre un hébergement d'un mois : tu paies plus cher et tu n'as pas le nom de domaine offert. Vise au moins 12 mois.
- Oublier de préciser que ton repo est privé : Claude te donnerait les informations d'un repo public, et le déploiement échouerait.
- Utiliser l'adresse https au lieu de l'adresse SSH pour un repo privé : Hostinger ne peut pas y accéder.
- Se tromper de branche : c'est presque toujours
main. En cas de doute, regarde le nom affiché sur ton repo GitHub. - Déployer dans un dossier qui contient déjà des fichiers : la documentation de Hostinger précise que le dossier de destination doit être vide au premier déploiement.
- Oublier de redéployer après une modification : tant que tu ne cliques pas sur « Déployer » (ou que le déploiement automatique n'est pas activé), ton site en ligne ne change pas.
Et après ?
Ton site est en ligne : maintenant, il faut qu'on le trouve. Je t'explique comment optimiser le SEO d'un site neuf en 6 étapes, pour qu'il apparaisse sur Google et dans les IA. Et si tu préfères un site que tu modifies toi-même dans une interface, sans repasser par Claude à chaque changement, regarde comment créer un site WordPress avec Claude Code. Si tu bloques à une étape, je peux t'accompagner.
Tu veux créer et mettre en ligne ton site avec Claude Code sans rester bloqué ? On avance ensemble, en visio.
Questions fréquentes
Écrit par
Stéphanie Canovas
Je crée des tutos et formations pour aider les entrepreneurs à créer et optimiser leur site web. +8 000 entrepreneurs formés.