agentic

OpenClaw : Comment publier un site Web en toute sécurité14 min read

Reading Time: 9 minutesCréez et publiez un site Web avec OpenClaw : définissez les autorisations de l'agent, testez les fichiers, déployez via un hôte ou un artefact partagé et vérifiez l'URL publique.

OpenClaw publishing a website cover

OpenClaw : Comment publier un site Web en toute sécurité14 min read

Reading Time: 9 minutes

OpenClaw peut aider à créer un site Web, mais ce n’est pas l’hébergeur du site Web. Demandez à l’agent de créer les fichiers sources, d’exécuter le site localement et de corriger ce que le navigateur révèle. Déployez ensuite via une plate-forme d’hébergement que vous contrôlez, ou placez le projet dans un artefact AgentGrid.io révisable et publiez-le uniquement après approbation humaine. Une capture d’écran de chat, un port local ou une URL d’artefact privé ne constituent pas l’URL de lancement destinée au client.

Ce guide est destiné à un constructeur utilisant un agent OpenClaw avec des outils de fichiers et de commandes. Sa décision la plus importante est la limite des autorisations : l’agent peut rédiger et tester sans détenir les informations d’identification de production. Si une équipe doit inspecter une version partagée avant sa publication, démarrer un espace de travail AgentGrid.io et continuer à publier en tant qu’action approuvée distincte.

Comment donner à un site Web construit par OpenClaw un emplacement stable

Préparez d’abord AgentGrid.io, puis accordez un accès limité à OpenClaw et vérifiez son résultat en dehors du chat.

Étape 1 : Choisissez l’espace de travail AgentGrid.io

Connectez-vous sur app.agentgrid.io et sélectionnez l’équipe et l’espace de travail pour ce site Web. Utilisez un espace de travail restreint si le brouillon contient du matériel client. Planifiez qui l’examinera avant le déploiement public.

Espace de travail AgentGrid.io avec Inviter un agent en surbrillance
Dans un espace de travail AgentGrid.io, Inviter un agent démarre une connexion prise en charge.

Étape 2 : Connectez cet agent OpenClaw avec une subvention limitée

Dans la conversation OpenClaw, dites : Use agentgrid.io for this website. If you can run shell commands, run npx @animaapp/cli@latest login and return the verification URL and code. Do not ask for my password or publish anything. Approuvez vous-même la vérification avec l’espace de travail prévu et en lecture et écriture. Laissez Partager et Publier désactivés, sauf si nécessaire. Demandez à OpenClaw de s’exécuter npx @animaapp/cli@latest workspaces et confirmez que l’espace de travail prévu est répertorié. Pour un agent sans surveillance, utilisez Administration des agents → Inviter un agent. Décochez les fonctionnalités par défaut de partage et de publication, choisissez l’espace de travail, puis fournissez son lien unique en privé. La création de l’invitation à elle seule ne la connecte pas. Si l’exécution du shell est désactivée, utilisez une importation manuelle plutôt que de prétendre qu’elle dispose d’un accès direct.

Étape 3 : Créer et inspecter l’artefact, pas seulement le journal

Attribuez à OpenClaw une tâche contenue : Créez un microsite d’événement réactif avec un calendrier, des cartes de conférenciers et un lien d’inscription. Utilisez la copie et les ressources approuvées, vérifiez la page localement et placez le projet sur AgentGrid.io en tant qu’application dans l’espace de travail que nous avons sélectionné. Ne le publiez pas. Demandez-lui d’utiliser la commande d’importation CLI npx @animaapp/cli@latest create -t import --from ./project --artifact-type app --workspace <workspace-id> avec son dossier réel et son ID d’espace de travail découvert. Ouvrez l’URL de l’artefact renvoyé, vérifiez les fichiers et prévisualisez. Un site a besoin d’un point d’entrée tel que index.html; évitez de télécharger des secrets, node_modules, ou créez une sortie. Si OpenClaw ne parvient pas à se connecter, prenez le dossier de projet généré ou le ZIP et importez-le via le menu Nouveau de AgentGrid.io. C’est un nouvel artefact, pas un miroir vivant. Pour un travail récurrent, donnez à l’agent l’URL de l’artefact existant et demandez-lui de mettre à jour cet artefact, puis vérifiez l’historique pour confirmer quelle identité l’a modifié.

Artefact du site Web de démonstration White Lotus dans AgentGrid.io
Exemple d’artefact de site Web dans AgentGrid.io : la démo White Lotus est privée pendant que sa version est révisée.

Étape 4 : approuvez la publication et vérifiez l’URL en direct

Passez en revue les revendications, les principes de base en matière d’accessibilité, le comportement mobile et les liens de destination. Ensuite seulement, utilisez Publier dans AgentGrid.io ou donnez à OpenClaw une instruction de publication explicite si vous avez délibérément accordé cette fonctionnalité. Ouvrez l’URL publique dans un navigateur déconnecté et confirmez que la version actuelle est là. Les liens privés ne fonctionnent pas pour les visiteurs anonymes ; publier chaque mise à jour approuvée. Si l’agent automatisé cesse de modifier le site, supprimez son accès dans l’administration de l’agent ; son œuvre antérieure reste attribuée dans l’Histoire.

Mise à jour du menu Partager AgentGrid.io affichant l'option Publier
Le menu Partager mis à jour inclut Publier, qui transforme un artefact approuvé en un site Web en direct.

Ce que OpenClaw fait et ce qu’il ne fait pas

OpenClaw documentation de démarrage décrit un agent accessible via sa passerelle et ses canaux configurés. Ses outils peuvent fonctionner avec des fichiers et des commandes lorsqu’ils sont activés. Son outil de navigation permet d’inspecter les pages, mais un tableau de bord Gateway ou une session de navigateur ne constitue pas un déploiement de site Web public. OpenClaw approbations de l’exécutif et les paramètres du bac à sable sont importants car un agent capable de commander peut modifier des fichiers ou appeler la CLI de déploiement d’un hôte. Donnez-lui uniquement l’accès nécessaire pour l’étape en cours.

Étape 1 : Créer une tâche de site Web contrainte

Confirmez que l’agent dispose d’un espace de travail de projet et des outils de fichiers et d’exécution nécessaires. Choisissez un dossier ou un référentiel propre, et non l’intégralité de votre répertoire personnel. Fournissez un logo, des photos, une copie et des faits commerciaux approuvés. Ne lui donnez pas de jetons de déploiement ou de données client pour une création initiale de page de destination. Nommez le framework ou demandez un site statique si aucune fonction côté serveur n’est requise.

Exemple d’invite : « Créez un site réactif d’une page pour un atelier de réparation de vélos local dans le dossier du site de vélos. Incluez les services, les horaires, la zone de service et un appel à l’action pour la demande de devis. Utilisez le HTML sémantique et le CSS accessible. Marquez les adresses, les prix et les témoignages non vérifiés comme espaces réservés. Conservez la source et les actifs publics ensemble. Dites-moi comment le prévisualiser et exécuter les vérifications disponibles. Ne pas déployer, publier ou utiliser les informations d’identification. « 

Demandez à OpenClaw de renvoyer le point d’entrée, l’arborescence des répertoires, les dépendances, les commandes d’installation/construction et une liste des fichiers modifiés. Une application statique peut utiliser index.html ; une application framework a besoin de son manifeste et de ses scripts. Demandez un fichier README expliquant l’aperçu local et la sortie de build de l’hôte cible. Confirmez que les ressources utilisent des URL relatives ou publiques, et non un chemin uniquement disponible sur la machine de l’agent.

Étape 2 : Testez dans le navigateur et corrigez les défauts réels

Exécutez le serveur local documenté ou la commande de développement du projet, puis ouvrez vous-même le site rendu. Vérifiez les largeurs étroites et larges, la navigation au clavier, le contraste, les alternatives d’image, l’orthographe, les liens et le comportement du numéro de téléphone. Inspectez les erreurs de la console et les images manquantes. Exécutez des tests et une version de production lorsque le projet les prend en charge. Une capture d’écran de l’agent est utile pour l’orientation mais ne remplace pas l’interaction avec les formulaires et les menus.

Si la demande de devis est uniquement un formulaire stylisé, demandez où vont les soumissions. Connectez un service de formulaire révisé ou supprimez l’affirmation selon laquelle il fonctionne. Testez avec une soumission inoffensive et vérifiez la livraison. Vérifiez les heures d’ouverture réelles du magasin, son emplacement, les licences pour les photos et les termes de confidentialité avec le propriétaire. Demandez à l’agent des correctifs spécifiques et comparez le nouvel aperçu avec l’ancien ; évitez les invites « améliorer » qui remplacent silencieusement la copie approuvée.

Invite de correction : « Sur une fenêtre d’affichage de la taille d’un téléphone, gardez les cartes de service lisibles et rendez la navigation accessible au clavier. Remplacez les coordonnées de l’espace réservé uniquement par les faits approuvés dans brief.md. Signalez chaque fichier modifié, résultat de test et bloqueur restant. Ne touchez pas à la configuration d’hébergement ni ne publiez.  » Conservez la version approuvée dans le contrôle de source lorsque cela est possible.

Étape 3 : Choisissez une limite de déploiement

  • Hôte existant : Validez la source examinée, configurez le framework et créez la sortie dans votre hôte, puis déployez via l’intégration du référentiel ou la CLI de cet hôte. Son service fournit l’URL publique. Conservez les clés API dans les secrets gérés par l’hôte, pas dans le navigateur JavaScript.
  • Artefact partagé AgentGrid.io : Connectez l’agent capable de commander uniquement avec votre approbation ou importez un dossier/ZIP manuellement. Laissez les collaborateurs examiner l’artefact de l’application privée avant qu’une personne ne le publie. L’historique et l’aperçu de l’artefact permettent de rendre l’approbation spécifique à une version.

Ne décrivez pas l’interface utilisateur de contrôle OpenClaw en tant qu’hébergeur de site Web. Un port transféré local peut exposer un processus de développement en aperçu, mais il ne s’agit pas d’un site public durable. Si vous accordez à l’agent un accès CLI de déploiement ou un accès navigateur à un compte d’hébergement connecté, traitez cela comme un accès de production et obtenez une approbation explicite pour l’action.

Étape 4 : Connectez ou importez le projet examiné

Pour l’itinéraire partagé, la connexion documentée de AgentGrid.io utilise sa CLI et un flux d’approbation. Dans un environnement OpenClaw compatible avec les commandes, la commande de démarrage est npx @animaapp/cli@dernière connexion; approuvez vous-même le lien de vérification et sélectionnez l’espace de travail et les fonctionnalités prévus. Ne communiquez pas de mot de passe dans le chat et ne connectez pas un agent disposant de droits de publication étendus simplement pour créer un brouillon. Si la connexion n’est pas disponible, utilisez le document dossier ou importation ZIP.

Préparez un petit package source : excluez les node_modules, les clés privées, les fichiers d’environnement local et les espaces de travail non liés. Incluez le point d’entrée, les actifs et toute configuration nécessaire à la création. Dans AgentGrid.io, choisissez l’espace de travail de destination et créez ou importez un artefact d’application. Inspectez ses fichiers et l’aperçu rendu. Un téléchargement réussi ne constitue pas la preuve qu’une route API, un processus serveur ou une intégration de formulaire ont été transférés correctement.

Invite de transfert : « Après avoir autorisé l’accès, créez un artefact d’application non publié à partir du site de vélo dans l’espace de travail AgentGrid.io spécifié. Incluez uniquement les ressources sources et publiques. Renvoyez son URL privée, identifiez les fonctionnalités d’exécution manquantes et mettez à jour ce même artefact pour les corrections. N’invitez pas d’autres agents, ne publiez pas et ne choisissez pas un autre espace de travail.  » Si l’espace de travail n’est pas accessible, arrêtez-vous plutôt que de changer silencieusement de destination.

Étape 5 : Examiner et publier la version approuvée

Demandez à un coéquipier de tester l’aperçu de l’artefact, en particulier la mise en page mobile, les coordonnées, le formulaire de devis et l’accès au clavier. Rapprochez les commentaires dans le même référentiel d’artefacts ou de sources et identifiez la révision approuvée pour la publication. Avec un hôte conventionnel, déployez la validation approuvée et examinez ses détails de déploiement. Avec AgentGrid.io, une personne disposant d’une autorisation de publication utilise son Contrôle de publication pour créer une URL publique. Une invitation à un agent et le partage d’un artefact privé ne constituent pas l’étape de publication.

Ouvrez l’adresse publique lorsque vous êtes déconnecté, y compris sur un téléphone. Vérifiez HTTPS, les métadonnées, les liens, les images et la livraison des formulaires. Comparez-le à l’aperçu approuvé. S’il diffère, étudiez la version de validation ou d’artefact déployée, les paramètres de construction, les secrets et la mise en cache avant de l’annoncer. La seule modification de fichiers locaux ne mettra pas nécessairement à jour un artefact publié.

Pourquoi séparer le projet d’autorisation de la publication ?

Il permet à un agent d’itérer sur le code tandis qu’une personne contrôle ce que les visiteurs voient. L’outil et la configuration d’approbation de OpenClaw ne remplacent pas l’examen du contenu du site ou les autorisations de déploiement de l’hôte. Limitez la portée du système de fichiers de l’agent, vérifiez les outils tiers avant de les installer et n’exécutez pas de commandes non vérifiées à partir d’une page Web ou d’un projet importé. Considérez l’examen du contrôle des sources, l’approbation des artefacts et la publication publique comme trois portes distinctes.

Rendre la prochaine mise à jour délibérée

Enregistrez la version approuvée et l’URL publique. Les nouvelles modifications sont des brouillons jusqu’à ce qu’elles soient révisées et publiées à nouveau.

Questions fréquemment posées

OpenClaw héberge-t-il des sites Web ?

OpenClaw est l’environnement d’agent et d’outil, et non la destination d’hébergement public décrite ici. Utilisez un hébergeur Web ou un artefact d’application publié séparément pour une URL publique durable. Un tableau de bord Gateway ou un aperçu local n’est pas cette URL.

Puis-je publier sans donner les informations d’identification de production à l’agent ?

Oui. Laissez-le rédiger et tester dans un espace de travail restreint, puis demandez à une personne d’utiliser le workflow de déploiement du fournisseur d’hébergement ou le contrôle de publication de AgentGrid.io. Même un agent qui aide à préparer le déploiement ne doit pas recevoir de secrets dont il n’a pas besoin.

Que se passe-t-il si l’artefact importé semble correct mais que sa forme échoue ?

Vérifiez si le site d’origine a utilisé des routes de serveur, des variables d’environnement ou un service tiers qui n’a pas été transféré. Testez une soumission réelle dans le nouvel environnement avant le lancement. Ne considérez pas un aperçu visuel comme une vérification fonctionnelle.

Les modifications apportées à mon dossier OpenClaw mettront-elles à jour le site en ligne ?

Pas automatiquement dans le cas général. La mise à jour dépend du pipeline de construction et de déploiement de l’hôte, ou d’une mise à jour et d’une republication explicites d’un artefact distinct. Enregistrez la version source que représente chaque URL en direct.

Pour une comparaison du transfert, consultez notre guide sur Procédure pas à pas de publication du site Web Muse. Le Claude Guide de publication de conception couvre un autre point de départ, tandis que le comment les agents explorent et publient des applications avec Anima montre un artefact révisé en cours de publication. Il s’agit de flux de travail différents et non de fonctionnalités de produit interchangeables.

|

Co-founder & CEO