Comment créer un site web avec ChatGPT : trois méthodes qui fonctionnent

Pour créer un site web avec ChatGPT, vous pouvez lui demander d'écrire le HTML et le CSS du site, puis mettre ces fichiers sur un service d'hébergement vous-même. Vous pouvez aussi l'utiliser pour planifier les pages et rédiger les textes avant de construire le site dans un builder. Ou encore connecter un builder IA comme Mythex dans ChatGPT, pour qu'il construise, héberge et publie le site à partir de la même conversation. La première méthode est gratuite et convient à un site d'une seule page. La troisième est ce qu'il vous faut quand le site doit avoir des formulaires qui enregistrent des données, des connexions ou des mises à jour régulières. Ce guide présente chaque méthode avec des prompts, et indique clairement où chacune s'arrête.

Ce que ChatGPT peut et ne peut pas faire seul

ChatGPT excelle dans la rédaction : code, titres, textes de pages et plans. Par défaut, ce n'est pas un hébergeur. Il ne donne pas d'adresse publique à votre site, ne fait pas tourner de base de données et ne conserve pas les fichiers de votre site d'un projet à l'autre, contrairement à un builder. Chacune des méthodes ci-dessous répond à ce manque.

Méthode 1 : ChatGPT écrit le code, vous l'hébergez

C'est l'approche classique, efficace pour un site statique simple : un portfolio, une page de présentation, une page de mariage.

Étape 1 : demandez une page complète en un seul fichier

Soyez précis sur le contenu et la mise en page :

Écris un site web complet d'une seule page, sous forme d'un fichier HTML avec le CSS dans une balise style. Il est destiné à Maya Haddad, illustratrice indépendante à Amman. Sections : un en-tête avec son nom et « Illustration pour livres et marques », une grille de six images de portfolio (utilise des chemins d'images factices que je pourrai remplacer), un court paragraphe « à propos », une liste de trois services avec leurs prix de départ, et une section contact avec son e-mail en lien mailto. Design propre et moderne, beaucoup d'espace blanc, adapté aux téléphones. Pas de framework JavaScript.

Demander un seul fichier simplifie l'enregistrement et la mise en ligne.

Étape 2 : enregistrez et ouvrez le fichier

Copiez le code dans un éditeur de texte, enregistrez-le sous index.html et ouvrez-le dans votre navigateur. Si quelque chose ne va pas, décrivez-le à ChatGPT : « la grille d'images passe en une seule colonne sur ordinateur ; mets-la en trois colonnes au-delà de 900 px de large. »

Étape 3 : remplacez les éléments factices

Remplacez les images factices par les vôtres et tout texte inventé par ChatGPT. Vérifiez attentivement les prix, les e-mails et les noms : l'IA comble les vides avec assurance.

Étape 4 : mettez le site en ligne

Importez le fichier sur un hébergement statique gratuit comme GitHub Pages, ou sur un hébergeur web que vous payez déjà. Vous obtiendrez une adresse publique. Pour utiliser votre propre nom de domaine, suivez les instructions de votre hébergeur ; notre guide sur la connexion d'un nom de domaine personnalisé explique la partie DNS.

Limites de la méthode 1

• Les formulaires qui enregistrent des données. Un formulaire de contact a besoin d'un endroit où envoyer les messages : un service de formulaires ou un serveur.
• Les connexions et les espaces membres. Ils nécessitent un backend et une base de données.
• De nombreuses pages. Garder en cohérence l'en-tête et le menu sur dix fichiers collés à la main devient fastidieux.
• Les mises à jour. Chaque modification implique de demander un nouveau code, de le coller et de tout remettre en ligne.

Méthode 2 : ChatGPT planifie, un builder construit

Ici, ChatGPT s'occupe de la réflexion et de la rédaction, et un builder de site web construit et héberge le site.

Étape 1 : planifiez le site avec ChatGPT

Je tiens une petite boulangerie familiale à Manchester qui prend des commandes de gâteaux. Propose les pages dont mon site a besoin, ce que chaque page doit dire, et l'action unique que je veux que les visiteurs fassent sur chaque page. Limite-toi à cinq pages maximum.

Étape 2 : rédigez les textes

Demandez le texte de chaque page, puis réécrivez-le avec votre propre voix. Ajoutez les détails réels que ChatGPT ne peut pas connaître : horaires d'ouverture, prix, zones de livraison, ce qui distingue vos gâteaux.

Étape 3 : construisez le site dans un builder

Collez le plan et les textes dans un builder de site web. Dans un outil en glisser-déposer, vous placez le texte dans un modèle. Dans un builder IA, vous pouvez donner tout le plan en un seul message et il construit les pages ; par exemple, dans le builder de site web Mythex :

Construis un site web pour une boulangerie familiale à Manchester à partir de ce plan et de ces textes : [coller]. Inclus un formulaire de demande de commande qui enregistre chaque demande (nom, téléphone, type de gâteau, date souhaitée, message) pour que je puisse les consulter dans une page d'administration à laquelle moi seul accède. Design chaleureux et familial, adapté aux téléphones.

Le formulaire de commande enregistre ici dans une vraie base de données, ce qu'un fichier HTML collé ne pourrait pas faire. Pour en savoir plus sur cette voie, consultez comment créer un site web avec l'IA.

Méthode 3 : construisez et publiez depuis ChatGPT

L'option la plus récente consiste à connecter un builder à ChatGPT pour que ChatGPT utilise directement ses outils. Vous restez dans la conversation ChatGPT ; le builder fournit le projet, l'aperçu, la base de données et l'hébergement.

Mythex fonctionne ainsi grâce à son application ChatGPT (un connecteur MCP). Vous le connectez depuis les paramètres du compte dans Mythex ; la connexion fonctionne sur toutes les offres, mais les outils qui font tourner le bac à sable de votre projet nécessitent Pro. Une fois connecté, vous pouvez demander à ChatGPT quelque chose comme :

Avec Mythex, crée un nouveau site web pour ma boulangerie avec une page d'accueil, une page de menu avec les gâteaux et les prix, et un formulaire de demande de commande qui enregistre dans une base de données. Montre-moi l'aperçu, et publie-le quand je dirai que c'est bon.

ChatGPT crée alors le projet, écrit le code, le lance et le publie à une adresse publique une fois que vous avez validé. Les modifications se font simplement par de nouveaux messages dans le même chat. La même approche de connecteur fonctionne aussi depuis Claude, Cursor et Codex. Pour comprendre le fonctionnement et les builders qui le prennent en charge, consultez les builders d'applications IA avec MCP.

Quelle méthode choisir ?

Conseils de prompts valables pour toutes les méthodes

• Donnez les vrais faits dès le départ. Nom, lieu, services, prix, coordonnées. Moins il y a de détails inventés, moins il faudra nettoyer.
• Décrivez le visiteur et l'objectif. « Un parent qui cherche un gâteau d'anniversaire et doit finalement envoyer une demande de commande. »
• Demandez des mises en page pensées pour le téléphone. La plupart des visiteurs utilisent un téléphone.
• Changez une seule chose par message une fois la première version créée.
• Demandez explicitement les bases du SEO : un titre et une description uniques par page, de vrais intertitres, un texte alternatif sur les images. Voir le SEO pour les sites créés avec l'IA.

Notre guide sur la rédaction de prompts pour les builders d'applications IA présente d'autres modèles.

Problèmes courants et solutions

• Le design paraît générique. Donnez une référence : « comme un café scandinave calme, beaucoup de blanc et un vert doux et discret ».
• Le code a été coupé. Demandez à ChatGPT de continuer à partir de la dernière ligne, ou de découper la page en sections et de vous les donner une à une.
• Il a inventé des témoignages ou des statistiques. Supprimez-les. Les faux avis nuisent à la confiance et sont, dans de nombreux pays, contraires aux règles de protection des consommateurs.
• Le site casse après une modification. Gardez une copie de la dernière version qui fonctionnait avant de coller du nouveau code. Les builders comme Mythex conservent des points de sauvegarde pour revenir en arrière.

Avant de publier

Lisez chaque mot de chaque page. Vérifiez que les coordonnées de contact fonctionnent. Ouvrez le site sur un téléphone. Assurez-vous que les images vous appartiennent ou sont correctement sous licence. Publiez ensuite, et partagez le site là où vos visiteurs se trouvent déjà. Si vous voulez que l'ensemble ne coûte rien, comment créer un site web gratuitement détaille les options d'hébergement gratuit.

Questions