Publier un Artifact Claude comme site web en ligne

La fonction Artifacts de Claude est l’un des moyens les plus rapides de générer un site web complet. Vous décrivez ce dont vous avez besoin, Claude écrit le HTML et le CSS, et vous pouvez l’apercevoir directement dans la fenêtre de conversation. C’est superbe.

Puis vous butez sur un mur : comment le mettre réellement sur internet ?

L’artifact vit à l’intérieur de Claude. Vous pouvez le prévisualiser, copier le code, même partager un lien vers la conversation, mais ce n’est pas un vrai site web. Il n’a pas d’adresse que vous pourriez imprimer sur une carte de visite. Il n’apparaît pas dans Google. Il disparaît si vous perdez la conversation. Et vous ne pouvez évidemment pas le relier à un nom de domaine personnalisé.

Ce guide vous montre comment passer d’un Artifact Claude à un site web hébergé et en ligne, avec sa propre adresse, un certificat SSL et un formulaire de contact qui fonctionne, en moins de cinq minutes.

Qu’est-ce qu’un Artifact Claude ?

Quand vous demandez à Claude de créer quelque chose de visuel (un site web, un graphique, une application interactive), il génère le code et affiche un aperçu en direct dans un panneau à côté de la conversation. Anthropic appelle cela des Artifacts. Ce sont des fichiers HTML/CSS/JS autonomes qui s’exécutent dans le navigateur.

Pour la génération de sites web, les Artifacts sont vraiment impressionnants. Le code est propre, les designs sont modernes et l’adaptation aux écrans fonctionne généralement du premier coup. Le problème n’est pas la qualité, c’est la livraison. Un Artifact est un aperçu, pas une publication.

Étape 1 : sortez le code de Claude

Il faut d’abord récupérer le fichier HTML de l’Artifact sur votre ordinateur. Il y a deux façons de faire :

Option A : copier le code

1. Cliquez sur le panneau de l’Artifact dans Claude pour l’agrandir.
2. Cliquez sur l’icône de code (ou « Voir la source ») pour afficher le HTML brut.
3. Cliquez sur Copier pour copier tout le bloc de code.
4. Ouvrez un éditeur de texte brut (le Bloc-notes sous Windows, TextEdit sous Mac, en vérifiant qu’il est en mode texte brut).
5. Collez le code et enregistrez le fichier sous le nom index.html sur votre bureau.

Option B : télécharger l’Artifact

Certaines formules de Claude vous permettent de télécharger directement l’Artifact sous forme de fichier HTML. Si vous voyez un bouton de téléchargement sur le panneau de l’Artifact, utilisez-le : c’est plus rapide. Assurez-vous simplement que le fichier téléchargé s’appelle index.html (renommez-le si nécessaire).

Étape 2 : déposez-le sur SiteDrop

Vous avez maintenant un fichier index.html sur votre ordinateur. Pour le mettre sur internet :

1. Allez sur SiteDrop et connectez-vous (c’est gratuit pour commencer).
2. Faites glisser votre fichier index.html sur le tableau de bord SiteDrop. C’est tout. Un seul glissement.
3. En moins de cinq secondes, SiteDrop déploie votre site sur un CDN mondial, le sécurise avec un certificat SSL gratuit (HTTPS) et vous donne un lien en ligne.

Votre Artifact Claude est maintenant un vrai site web, accessible à n’importe qui dans le monde.

Étape 3 : obtenez votre propre nom de domaine

Le lien SiteDrop gratuit fonctionne parfaitement pour partager, mais si vous voulez une adresse professionnelle (comme www.yourbusiness.com), vous pouvez en réserver une directement depuis le tableau de bord SiteDrop :

1. Ouvrez les paramètres de votre site dans le tableau de bord.
2. Recherchez le nom de domaine que vous préférez.
3. Réservez-le : SiteDrop gère toute la configuration DNS automatiquement. Pas de tableaux de bord de registraire, pas d’enregistrements de serveurs de noms, pas d’attente de 48 heures.

Étape 4 : obtenez un formulaire de contact qui fonctionne (gratuit)

Si votre Artifact Claude contient un formulaire de contact (et la plupart des sites d’entreprise devraient en avoir un), SiteDrop le branche automatiquement. Les messages envoyés via le formulaire arrivent dans votre boîte de réception SiteDrop intégrée : pas d’hébergement d’e-mails, pas d’outils de formulaire tiers, pas d’abonnement mensuel.

C’est l’un des plus grands avantages par rapport aux autres solutions d’hébergement : votre formulaire de contact fonctionne vraiment dès l’instant où vous importez le site.

Conseils pour de meilleurs Artifacts Claude

La qualité de votre site web dépend de la qualité de votre consigne. Voici quelques conseils pour obtenir de meilleurs Artifacts avec Claude :

Soyez précis sur votre entreprise

« Crée un site web d’une seule page pour une entreprise de toilettage canin à domicile appelée Paws & Shine à Manchester. Inclus une section d’accueil avec un slogan, une section de services avec 4 services et leurs prix, des témoignages de clients et un formulaire de contact. Utilise une palette turquoise chaleureux et crème avec des éléments de design modernes et arrondis. »

Plus vous êtes précis, plus le résultat est soigné. Indiquez le vrai nom de votre entreprise, vos vrais services, vos vrais prix et vos couleurs préférées.

Demandez tout dans un seul fichier

Ajoutez « mets tout le CSS en ligne dans le fichier HTML » ou « fais un seul fichier index.html autonome » à votre consigne. L’import sur SiteDrop devient alors fluide : un fichier, un glissement, terminé.

Demandez une version adaptée au mobile

Ajoutez « rends-le entièrement responsive pour mobile, tablette et ordinateur » à votre consigne. Claude le fait généralement bien, mais le demander explicitement garantit qu’il ne saute aucun point de rupture.

Utilisez le créateur de prompts SiteDrop

Vous ne savez pas comment rédiger une bonne consigne ? Le créateur de prompts SiteDrop vous pose quelques questions sur votre entreprise et génère la consigne idéale à coller dans Claude. Il s’occupe de tous les détails techniques à votre place.

Pourquoi ne pas simplement partager le lien de la conversation Claude ?

Claude vous permet de partager un lien vers la conversation, et le destinataire peut voir l’Artifact. Alors pourquoi s’embêter avec SiteDrop ? Parce qu’un lien de conversation partagée :

• N’est pas une vraie URL : vous ne pouvez pas mettre un lien de conversation Claude sur une carte de visite ou une fiche Google.
• N’a pas de nom de domaine : votre site web vit à l’adresse claude.ai/share/..., pas au nom de votre entreprise.
• N’est pas explorable : les moteurs de recherche et les moteurs de réponse par IA ne peuvent ni le trouver ni le citer.
• N’a pas de formulaire de contact : les visiteurs ne peuvent pas vous joindre.
• Peut disparaître : si Anthropic change sa politique de partage ou si vous perdez la conversation, le lien ne marche plus.
• Affiche l’image de marque de Claude : pas celle de votre entreprise.

Un site hébergé sur SiteDrop est à vous. Votre nom de domaine, votre image de marque, votre formulaire de contact, vos statistiques. C’est un vrai site web, pas un aperçu à l’intérieur du produit de quelqu’un d’autre.

Que pouvez-vous faire d’autre après la publication ?

• Modifier le contenu visuellement : utilisez l’éditeur visuel de SiteDrop pour changer les textes, les images et le contenu directement sur la page.
• Ajouter vos propres images : remplacez toutes les images provisoires par les vraies photos de votre entreprise.
• Mettre à jour à tout moment : régénérez l’Artifact dans Claude avec vos changements, importez-le de nouveau sur SiteDrop, et votre site en ligne se met à jour instantanément.
• Suivre les visiteurs : voyez combien de personnes visitent votre site depuis le tableau de bord SiteDrop.

Tout le processus, étape par étape

1. Ouvrez Claude et décrivez votre site web (ou utilisez le créateur de prompts).
2. Claude génère un Artifact : prévisualisez-le pour vous assurer qu’il vous plaît.
3. Copiez le code ou téléchargez le fichier HTML.
4. Faites glisser le fichier sur SiteDrop.
5. Votre site web est en ligne. Réservez éventuellement un nom de domaine personnalisé.

Durée totale : moins de cinq minutes. Coût total : gratuit pour commencer.