Où publier la page web créée par ton IA (options gratuites et payantes)

La façon gratuite la plus rapide de publier une page web créée par ton IA est Netlify Drop : tu glisses le dossier de tes fichiers sur une page web et elle est en ligne, sans compte. Si tu veux quelque chose de durable avec ta propre adresse, comme tonnom.com, une offre d’hébergement comme Bluehost (lien sponsorisé) est la voie payante la plus simple. Dans les deux cas, il te faut d’abord tous tes fichiers réunis dans un dossier, et l’extension gratuite AI Code Harvester le fait en un clic.

D’abord, ce que tu as vraiment

Quand ChatGPT ou Gemini crée une page web, il te donne du code : en général un fichier HTML (la page elle-même), souvent un fichier CSS (les couleurs et la mise en page) et un fichier JavaScript (les boutons et les actions). Pour l’instant, ils n’existent que dans ton chat ou sur ton ordinateur. Pour que d’autres voient la page, les fichiers doivent se trouver sur un serveur web, c’est-à-dire simplement un ordinateur toujours allumé qui montre ta page à quiconque tape son adresse. C’est tout ce que veut dire « publier ».

Bonne nouvelle : une page comme celle-ci est « statique ». Cela veut dire que ce ne sont que des fichiers, sans base de données ni connexions qui tournent derrière. Les pages statiques sont les plus faciles à publier, et plusieurs services le font gratuitement. Si ta page doit se souvenir des visiteurs, prendre des commandes ou stocker des données, c’est un projet plus gros et un simple hébergeur de fichiers ne suffit pas.

Quelle option est faite pour toi ?

• Tu veux la montrer à quelqu’un aujourd’hui : Netlify Drop (gratuit, le plus rapide).
• Tu la veux gratuite et durable, et quelques étapes de plus ne te gênent pas : Cloudflare Pages ou GitHub Pages (gratuits).
• Tu veux ta propre adresse et tout au même endroit : une offre d’hébergement, par exemple Bluehost (payant).
• Tu préfères ne toucher à aucun fichier : un créateur de sites web (payant).

Étape zéro : mets tes fichiers dans un dossier

Quoi que tu choisisses, commence ici. Le fichier principal doit s’appeler index.html, car c’est celui que le serveur affiche en premier. Les autres fichiers (le CSS et le JavaScript) vont dans le même dossier, avec les mêmes noms que ceux cités par le HTML. Si l’IA t’a donné le code en plusieurs morceaux, les copier à la main est là où les gens bloquent.

Le raccourci, c’est AI Code Harvester, une extension Chrome gratuite (un petit module qui donne une fonction de plus au navigateur). Elle trouve le code dans le chat et en fait des fichiers nommés. Appuie sur Télécharger le ZIP pour un dossier de fichiers, ou ouvre le Workspace et utilise Page unique (.html), qui fusionne les styles et les scripts en un seul fichier difficile à casser. La courte vidéo montre comment.

1. Récupère les fichiers. Télécharge le ZIP depuis AI Code Harvester et décompresse-le dans un nouveau dossier.
2. Nomme le fichier principal index.html. Si l’IA l’a appelé autrement, renomme-le.
3. Teste-le sur ton ordinateur. Double-clique sur index.html. Si la page s’affiche bien, tu es prêt.
4. Retire tout ce qui est privé. Cherche dans le code des mots de passe ou des clés d’API. Tout le monde peut lire le code d’une page publiée.

Option 1 : Netlify Drop (gratuit, le plus rapide)

Netlify Drop est une page web où tu glisses un dossier et ton site est en ligne. Netlify indique qu’aucun compte n’est nécessaire pour l’utiliser, ce qui en fait le meilleur choix pour « je veux juste montrer ça à quelqu’un ».

1. Ouvre app.netlify.com/drop dans ton navigateur.
2. Glisse ton dossier (ou un ZIP de celui-ci) sur la page.
3. Patiente un instant. Tu obtiens une adresse en ligne qui se termine par netlify.app.
4. Ouvre cette adresse dans une fenêtre privée pour la vérifier, puis partage-la.

Le hic : si tu déposes un dossier sans être connecté, Netlify protège le projet par un mot de passe temporaire jusqu’à ce que tu le récupères en t’inscrivant (gratuit). Donc, si tu veux que d’autres le voient, crée le compte, récupère le site et vérifie qu’il est réglé sur public. Pour mettre la page à jour plus tard, tu redéposes le dossier. Netlify conseille de garder une publication sous environ 50 Mo.

Option 2 : Cloudflare Pages (gratuit, fait pour durer)

Cloudflare est une grande entreprise qui fait tourner une partie de l’infrastructure d’internet, et son service Pages héberge gratuitement des sites statiques. Tu envoies un dossier ou un ZIP dans son tableau de bord (la page de contrôle de son site). Il faut un compte Cloudflare gratuit, et ton adresse ressemble à tonprojet.pages.dev.

1. Crée un compte Cloudflare gratuit et ouvre Workers & Pages.
2. Choisis Create application, puis Get started, puis Drag and drop your files.
3. Donne un nom au projet, glisse ton dossier ou ZIP et appuie sur Deploy site.

Le hic : les menus changent de temps en temps, les boutons peuvent donc porter un nom un peu différent quand tu regardes. La limite d’envoi est de 1000 fichiers et 25 MiB par fichier, largement assez pour une page faite par une IA. Mettre à jour, c’est renvoyer.

Option 3 : GitHub Pages (gratuit, si tu aimes GitHub)

GitHub est le site où les développeurs gardent leur code dans des « dépôts » (repositories), c’est-à-dire des dossiers de fichiers stockés en ligne. GitHub Pages transforme un dépôt en site web. C’est gratuit et un favori de longue date, mais c’est l’option gratuite qui a le plus d’étapes.

1. Crée un compte GitHub gratuit et un nouveau dépôt nommé tonpseudo.github.io.
2. Envoie tes fichiers, avec index.html au premier niveau.
3. Ouvre les Settings du dépôt, puis Pages, et sous Build and deployment choisis Deploy from a branch et ta branche principale.
4. Attends quelques minutes, puis ouvre https://tonpseudo.github.io.

Le hic : les changements peuvent mettre jusqu’à 10 minutes à apparaître. Rappelle-toi aussi que tout ce que tu mets dans un dépôt public peut être vu par tout le monde : vérifie donc les fichiers avant de les envoyer.

Option 4 : Ton propre hébergement et domaine (Bluehost)

Deux mots que tu vas croiser ici. L’hébergement web consiste à louer de l’espace sur un serveur web, pour que tes fichiers restent en ligne jour et nuit. Un domaine est ton adresse, comme tonnom.com. Avec un hébergement et un domaine, tu choisis comment s’appelle ta page, tu peux l’utiliser pour une activité et tu ne dépends pas des règles d’un service gratuit.

Bluehost (lien sponsorisé) est un hébergeur par lequel beaucoup commencent. Sa page d’hébergement mutualisé indique un SSL gratuit (le cadenas qui fait commencer ton adresse par https), un domaine gratuit la première année (à réclamer dans les 90 jours, pour certaines extensions) et une garantie de remboursement de 30 jours sur l’hébergement. Avant d’acheter, vérifie l’offre actuelle et le prix de renouvellement sur leur page.

1. Choisis une offre d’hébergement et ton domaine.
2. Ouvre le panneau de l’hébergement et trouve le dossier qui contient les fichiers principaux de ton site (souvent appelé public_html). Les pages d’aide de ton hébergeur montrent où il est.
3. Envoie-y tes fichiers, avec index.html en haut, et ouvre ton domaine dans une fenêtre privée.

Le hic : c’est la seule option ici qui coûte de l’argent, et les prix après la première période peuvent changer, alors lis les conditions de renouvellement. En échange, tu as ta propre adresse, de la place pour d’autres pages plus tard et un moyen simple d’ajouter des e-mails sur ton domaine.

Tu veux ta propre adresse ? Comment fonctionne un domaine

Un domaine est le nom que les gens tapent pour te trouver, comme tonnom.com. Il a une partie nom et une extension (.com, .org et bien d’autres). Tu ne l’achètes pas pour toujours : tu le loues, en général un an à la fois, et tu le renouvelles.

Il y a trois façons courantes d’en obtenir un :

• Avec l’hébergement. Bluehost (lien sponsorisé) indique un domaine gratuit la première année avec son hébergement (à réclamer dans les 90 jours, pour certaines extensions). C’est le plus simple si tu achètes de l’hébergement de toute façon.
• Chez un vendeur de domaines (un « registrar », ou bureau d’enregistrement). Tu n’achètes que le nom et tu le relies à l’endroit où vit ta page. Certains registrars sont moins chers que d’autres : Cloudflare Registrar dit ne pas appliquer de marge sur les prix des domaines, et Netlify vend aussi des domaines.
• Un domaine que tu as déjà. Il te faut alors seulement l’étape de connexion ci-dessous.

Faut-il payer un hébergement pour utiliser son propre domaine ? Pas forcément. Netlify, Cloudflare Pages et GitHub Pages te laissent tous relier ton propre domaine à un site gratuit. Regarde la page des tarifs de chacun pour savoir ce qu’inclut ton offre.

1. Obtiens le domaine chez un registrar ou avec une offre d’hébergement.
2. Ajoute le domaine dans le tableau de bord de ton hébergeur. Chez Netlify, utilise Domains ; chez Cloudflare Pages, ouvre ton projet et choisis Custom domains ; chez GitHub Pages, utilise les réglages Pages du dépôt.
3. Crée l’enregistrement demandé par l’hébergeur. C’est une petite ligne dans les réglages DNS de ton domaine (l’annuaire qui dit vers quel ordinateur un nom pointe). En général, c’est un enregistrement CNAME pour la version avec www et un enregistrement A ou ALIAS pour le simple tonnom.com. L’hébergeur te montre les valeurs exactes à copier.
4. Attends, puis teste. Cela peut prendre jusqu’à 48 heures, mais c’est souvent plus rapide. Ouvre ton domaine dans une fenêtre privée.

Deux remarques. Cloudflare Pages demande que ton domaine utilise les serveurs de noms de Cloudflare si tu veux la version sans www. Et si ton domaine et ton hébergement sont tous les deux chez Bluehost, il y a en général moins à configurer car ils sont dans le même compte ; leurs pages d’aide montrent les étapes.

Option 5 : Un créateur de sites web (aucun fichier)

Si les dossiers, les envois et les noms de fichiers te fatiguent rien qu’à les lire, un créateur de sites te laisse arriver à un site en cliquant : tu choisis des blocs, tu tapes ton texte et tu appuies sur publier. Avec un créateur, tu refais en général la page avec ses propres blocs, au lieu d’envoyer le code de l’IA. Website Builder de Bluehost (lien sponsorisé) et Weblium (lien sponsorisé) sont deux que tu peux regarder. C’est la façon la plus lente si tu as déjà la page de l’IA, mais la plus facile si tu comptes continuer à tout modifier à la main.

Quatre vérifications avant de partager le lien

• Ouvre-la dans une fenêtre privée. Tu vois ce que voit un inconnu, sans connexions enregistrées ni fichiers en cache.
• Vérifie les images et les liens. Si quelque chose pointe vers un chemin comme C:\Users sur ton ordinateur, cela cassera pour tous les autres. Utilise des fichiers placés à côté de index.html.
• Regarde-la sur un téléphone. La plupart des visiteurs y seront. Dans l’aperçu d’AI Code Harvester, tu peux d’abord passer entre les largeurs Ordinateur, Tablette et Mobile.
• Garde les secrets dehors. Ne publie jamais une page qui contient un mot de passe ou une clé d’API, car tout le monde peut lire le code.

Récupère l’extension

AI Code Harvester est gratuit et fonctionne avec ChatGPT et Gemini. Il trouve le code dans le chat, te laisse voir la page dans un bac à sable sûr et télécharge tout en ZIP, en une seule page ou avec le chat. Il tourne sur ton ordinateur : ton code n’est jamais envoyé chez nous. Ajoute-le depuis le Chrome Web Store.

Bon à savoir avant de commencer

FAQ