Création de sites internet · Publié le 8 octobre 2026 · Par Sophian Boughali · 12 min de lecture

Tutoriel : créer son site internet avec Replit en vibe coding, étape par étape

Réponse rapide. Pour créer un site avec Replit, prépare un brief d’une page, crée un projet de type Website, fais planifier le site par l’agent avant de le construire, teste chaque changement dans l’aperçu, puis clique sur Publish et connecte ton nom de domaine dans l’onglet Domains. Compte une demi-journée à deux jours pour un site vitrine, selon la préparation de tes contenus.

En bref

• La qualité du résultat dépend d’abord de ce que tu prépares avant d’ouvrir Replit : objectif, pages, textes, images.
• La règle d’or : une seule demande à la fois, un test après chaque changement.
• L’offre gratuite suffit pour découvrir l’outil. Pour publier un vrai site, prévois l’offre Core à 20 $ par mois.
• Avant la mise en ligne, trois vérifications ne se délèguent pas : la sécurité, les pages légales, la lisibilité par Google.
• Les noms de boutons cités ici sont ceux de l’interface en anglais, telle que décrite dans la documentation de Replit en octobre 2026.

De quoi as-tu besoin avant de commencer ?

De trois choses, et aucune n’est technique.

1. Un objectif unique. Que doit faire un visiteur sur ton site ? Prendre rendez-vous, demander un devis, t’appeler. Un seul objectif principal.
2. Tes contenus. Tes textes, même en brouillon, tes photos, ton logo, tes couleurs, deux ou trois sites que tu aimes.
3. Un compte Replit. L’inscription est gratuite sur replit.com.

Si tu hésites encore sur l’outil, notre comparatif des outils de vibe coding t’aidera à trancher. Et pour préparer ton brief et tes textes, un assistant IA en version gratuite suffit : on les compare dans quelle IA choisir.

Étape 1 : écrire ton brief en 20 minutes

Le brief est le document que tu donneras à l’agent. Plus il est précis, moins tu consommeras de crédits en allers-retours.

Copie ce modèle dans un document et remplis les crochets :

BRIEF DU SITE

Activité : [ex. cabinet d'architecture d'intérieur à Lyon]
Public visé : [ex. propriétaires qui rénovent un appartement]
Objectif principal du site : [ex. obtenir des demandes de rendez-vous]

Pages :
1. Accueil : [ce qu'on doit y comprendre en 5 secondes]
2. Services : [liste de tes prestations]
3. Réalisations : [nombre de projets à montrer]
4. À propos : [ton parcours en 3 lignes]
5. Contact : [formulaire, téléphone, adresse]

Ton et style : [ex. sobre, lumineux, beaucoup d'espace, photos en grand]
Couleurs : [codes couleur ou description]
Sites que j'aime : [2 ou 3 adresses, et ce que tu aimes dans chacun]

Ce que je ne veux pas pour l'instant : [ex. pas de blog, pas de paiement, pas d'espace client]

Obligations : mentions légales, politique de confidentialité, site lisible sur mobile,
contenu visible par les moteurs de recherche sans JavaScript.

La ligne « ce que je ne veux pas pour l’instant » est la plus rentable. Elle empêche l’agent d’ajouter des fonctions que tu n’as pas demandées.

Étape 2 : créer le projet dans Replit

1. Connecte-toi à Replit.
2. Ouvre le menu New pour créer un nouveau projet.
3. Choisis le type Website. Replit sait aussi produire des applications mobiles, des présentations ou des visualisations de données : préciser le type évite les malentendus.
4. Ouvre le sélecteur de mode. Le mode Free utilise ton quota inclus et choisit lui-même le modèle adapté. Les modes Power et Max font appel à des modèles plus puissants et consomment des crédits. Le mode Auto laisse Replit choisir pour les tâches payantes.

Pour ce tutoriel, reste en mode Free tant que tu n’es pas bloqué. Replit demande une confirmation avant toute action payante.

Étape 3 : faire planifier avant de construire

C’est l’étape que les débutants sautent, et c’est celle qui fait gagner le plus de temps.

L’agent de Replit a deux modes de travail : Plan, qui réfléchit et découpe le projet en tâches sans rien modifier, et Build, qui écrit le code. Passe en mode Plan et colle ce prompt, suivi de ton brief :

Tu vas m'aider à créer un site vitrine. Voici mon brief complet ci-dessous.

Avant d'écrire la moindre ligne de code :
1. Pose-moi toutes les questions nécessaires pour lever les ambiguïtés.
2. Propose-moi un plan en étapes courtes, de la plus simple à la plus complexe.
3. Indique pour chaque étape comment je pourrai vérifier qu'elle est réussie.
4. Signale ce qui, dans mon brief, risque de poser un problème de sécurité,
   de coût ou de référencement.

Ne construis rien tant que je n'ai pas validé le plan.

[colle ton brief ici]

Réponds aux questions de l’agent, relis le plan et corrige-le. Tu dois pouvoir le comprendre sans jargon. Si une étape te paraît floue, demande une reformulation.

Le mode Plan fait partie des offres payantes. Si tu testes avec l’offre gratuite, colle le même prompt : la consigne « ne construis rien tant que je n’ai pas validé » joue le même rôle.

Étape 4 : construire la première version

Une fois le plan validé, passe en mode Build et demande uniquement la première étape :

Le plan est validé. Construis uniquement l'étape 1 : la structure du site
et la page d'accueil, avec mes textes et mes couleurs.

Critères de réussite :
- la page s'affiche correctement sur ordinateur et sur mobile ;
- le menu contient les cinq pages prévues, même si elles sont encore vides ;
- le bouton principal mène à la page Contact.

Ne fais rien d'autre. Quand c'est terminé, dis-moi ce que je dois tester.

L’agent planifie, écrit le code, lance le site et vérifie son propre travail. La première construction peut prendre plusieurs minutes.

Teste ensuite dans le volet d’aperçu, comme le ferait un visiteur :

• clique sur chaque lien du menu ;
• réduis la largeur de la fenêtre pour simuler un téléphone ;
• relis les textes : l’IA invente parfois des phrases ou des chiffres que tu n’as pas fournis.

Étape 5 : améliorer une chose à la fois

À partir de maintenant, tu répètes toujours la même boucle.

1. Tu demandes une seule modification, avec un critère de réussite.
2. Tu testes dans l’aperçu.
3. Si c’est bon, tu passes à la suivante.
4. Si quelque chose s’est cassé, tu ne demandes pas de réparer la réparation. Tu reviens au point de sauvegarde précédent et tu reformules ta demande.

Replit crée des points de sauvegarde (checkpoints) au fil du travail de l’agent, ce qui permet de revenir à n’importe quel état antérieur.

Exemple de demande bien formulée :

Sur la page Réalisations, affiche mes 6 projets sous forme de grille :
3 colonnes sur ordinateur, 1 colonne sur mobile.
Chaque projet affiche une photo, un titre et une ville.
Ne modifie aucune autre page.
Critère de réussite : sur mobile, aucune image ne dépasse de l'écran.

Le fichier replit.md : la mémoire de ton projet

Replit crée automatiquement à la racine du projet un fichier nommé replit.md. L’agent le relit à chaque demande pour connaître la structure du projet et tes préférences. Tu peux le compléter toi-même. C’est l’endroit où écrire tes règles permanentes :

# Règles du projet

## Contexte
Site vitrine pour [activité]. Objectif : obtenir des demandes de rendez-vous.

## Règles de travail
- Ne modifie que ce qui est demandé. Ne touche jamais aux autres pages.
- Avant toute modification importante, explique ce que tu vas faire en 3 lignes.
- Écris tous les textes visibles en français, sans inventer de chiffres ni de témoignages.
- Explique-moi tes choix en langage simple, sans jargon.

## Contraintes techniques
- Le site doit rester lisible sur mobile.
- Le contenu de chaque page doit être présent dans le HTML sans JavaScript.
- Aucune clé ni aucun mot de passe dans le code : utilise les Secrets.

Étape 6 : ajouter le formulaire, les pages légales et le référencement

Trois chantiers que l’agent ne fera pas spontanément.

Le formulaire de contact. Demande la solution la plus simple, et fais lister ce qu’il faut configurer :

Ajoute un formulaire de contact sur la page Contact : nom, e-mail, téléphone, message.
Je veux recevoir chaque demande par e-mail.
Propose-moi la solution la plus simple, explique ce que je dois configurer,
et protège le formulaire contre les envois vides et les envois en rafale.
Ajoute sous le formulaire une phrase indiquant qui collecte les données et pourquoi,
avec un lien vers la politique de confidentialité.

Les pages légales. En France, un site professionnel doit afficher des mentions légales : identité de l’éditeur, coordonnées, hébergeur, numéro d’immatriculation. Fais créer les pages, puis remplis-les avec tes vraies informations. Ne laisse jamais l’IA inventer un numéro SIREN ou une adresse.

Le référencement de base.

Prépare le site pour le référencement :
1. Un titre unique (60 caractères maximum) et une description unique
   (155 caractères maximum) pour chaque page.
2. Un seul titre principal par page, puis des sous-titres hiérarchisés.
3. Un texte alternatif descriptif pour chaque image.
4. Un fichier sitemap.xml et un fichier robots.txt.
5. Vérifie que le contenu de chaque page est présent dans le HTML
   sans exécuter de JavaScript, et dis-moi si ce n'est pas le cas.
Liste-moi ce que tu as fait page par page.

Le point 5 est important. Les robots de certaines IA ne lisent pas le JavaScript : un contenu qui n’apparaît qu’après chargement risque de ne jamais être cité dans leurs réponses. On l’explique dans comment avoir de la visibilité en 2026.

Étape 7 : vérifier la sécurité

Même pour un site vitrine, prends dix minutes pour ces contrôles.

• Les secrets. Si ton site utilise une clé d’accès à un service (envoi d’e-mails, agenda), elle doit être rangée dans l’outil Secrets de Replit, jamais écrite dans le code ni dans la conversation.
• L’analyse de sécurité. Replit propose une analyse avant publication, appelée Security Agent. Si elle est disponible sur ton offre, lance-la et lis le rapport.
• Les bases de données. Replit sépare la base de développement, où tu fais tes essais, de la base de production, qui contient les données réelles. L’agent ne peut pas modifier la base de production.
• Le test en navigation privée. Ouvre ton site sans être connecté et vérifie qu’aucune page d’administration n’est accessible.

Pour aller plus loin, la checklist complète et le prompt d’audit sont dans les 7 dangers du vibe coding.

Étape 8 : publier et connecter ton nom de domaine

Publier le site

1. Clique sur l’icône Publish dans l’éditeur du projet.
2. Choisis le type de déploiement dans l’onglet de publication.
3. Ajoute un moyen de paiement si Replit te le demande.

Une fois publié, ton site est accessible à une adresse qui se termine par .replit.app.

Connecter ton nom de domaine

L’onglet Domains apparaît dès que ton site a été publié avec succès. Deux possibilités :

• Buy a new domain : tu achètes le domaine directement dans Replit, et il est relié automatiquement.
• Connect your own domain : tu utilises un domaine que tu possèdes déjà.

Dans le second cas :

1. Saisis ton domaine, par exemple www.monsite.fr.
2. Suis la configuration guidée si ton bureau d’enregistrement est pris en charge. Sinon, Replit t’indique deux enregistrements à ajouter chez lui : un enregistrement A, qui dirige le domaine vers Replit, et un enregistrement TXT commençant par replit-verify=.
3. Attends la propagation. Elle prend de quelques minutes à 48 heures.
4. Quand le statut Verified s’affiche dans l’onglet Domains, ouvre ton domaine dans un navigateur.

Deux précisions utiles. Le domaine sans www et le domaine avec www se configurent séparément, chacun avec ses deux enregistrements. Et l’enregistrement TXT doit rester en place tant que tu utilises le domaine : s’il est supprimé, le certificat de sécurité ne pourra plus se renouveler.

Et après la mise en ligne ?

• Déclare ton site à Google. Crée un compte Google Search Console, ajoute ton domaine et envoie ton fichier sitemap.
• Surveille ta consommation. Le suivi des crédits se trouve dans les réglages de ton compte, rubrique Usage. L’offre Core inclut 20 $ de crédits par mois, qui ne se reportent pas d’un mois sur l’autre.
• Garde ton brief et ton fichier de règles à jour. Ce sont eux qui permettront de faire évoluer le site sans tout casser.
• Mesure. Ajoute un outil de mesure d’audience, avec un bandeau de consentement si l’outil le nécessite.

Les 6 erreurs les plus fréquentes

1. Tout demander dans un seul message. L’agent construit vite, mais tu ne peux plus rien vérifier.
2. Corriger en boucle. Au troisième échec sur le même bug, reviens au point de sauvegarde et reformule.
3. Laisser l’IA écrire tes textes sans relire. Elle peut inventer des chiffres, des avis clients ou des références.
4. Oublier le mobile. Une grande partie de tes visiteurs viendront d’un téléphone.
5. Publier sans pages légales.
6. Ne pas fixer de budget. Sans plafond, les crédits partent dans les allers-retours.

Tu préfères qu’on le fasse pour toi ?

Ce tutoriel te permet de créer un site vitrine correct par toi-même. Si tu manques de temps, ou si tu veux un site sur mesure avec un vrai travail de design et de référencement, c’est notre métier. Tu peux remplir le cahier des charges ou réserver un appel.

Questions fréquentes

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

Oui. Tu décris ce que tu veux en langage courant, l’agent écrit le code, lance le site et le publie. Savoir coder n’est pas nécessaire, mais il faut savoir expliquer clairement ce que l’on attend et vérifier le résultat.

Combien de temps faut-il pour créer un site avec Replit ?

Compte une demi-journée à deux jours pour un site vitrine de cinq pages. La première version arrive en quelques minutes. L’essentiel du temps part dans les textes, les ajustements et les vérifications.

Combien coûte un site créé avec Replit ?

L’offre Core coûte 20 $ par mois et inclut 20 $ de crédits. S’y ajoutent les crédits consommés au-delà, l’hébergement selon le type de déploiement et le nom de domaine, soit 10 à 15 € par an.

Peut-on utiliser son propre nom de domaine avec Replit ?

Oui. Après la publication, l’onglet Domains permet d’acheter un domaine ou de connecter un domaine existant en ajoutant un enregistrement A et un enregistrement TXT chez ton bureau d’enregistrement.

Un site créé avec Replit est-il bien référencé sur Google ?

Il peut l’être, à condition de le demander : titres et descriptions uniques, sitemap, contenu présent dans le HTML. Sans ces consignes, l’agent ne s’en occupe pas spontanément.

Que faire si l’agent casse quelque chose ?

Reviens au point de sauvegarde précédent plutôt que de demander une réparation. Puis reformule ta demande en précisant ce qu’il ne faut pas modifier.

Sources

• Documentation Replit, démarrer avec l’agent
• Documentation Replit, fonctionnement de l’agent
• Documentation Replit, le fichier replit.md
• Documentation Replit, publier une application
• Documentation Replit, domaines personnalisés
• Documentation Replit, bases de données de production
• Documentation Replit, offres et tarifs
• Replit, fonctions de sécurité
• Ministère de l’Économie, mentions obligatoires sur un site internet
• Vercel, « The rise of the AI crawler » (décembre 2024)