Tech • IA • Robotique
La façon la plus simple de créer et d’héberger un site web avec Claude Code (Tutoriel complet)
5/10INTRO
Claude Code peut générer un site portfolio à partir d’instructions en langage courant, tandis qu’un Linux VPS non géré de hosting.com, associé à WHM, cPanel et Cloudflare, permet de le publier sur un domaine personnalisé avec SSL et HTTPS.
POINTS CLÉS
Le principal goulot d’étranglement est le déploiement
De nombreux sites créés par l’IA ne dépassent jamais localhost, car la mise en ligne introduit des notions peu familières comme les serveurs, le DNS, le SSL et l’hébergement. Ce flux de travail comble cet écart en faisant passer un site de fichiers locaux à un domaine en ligne, sans exiger de connaissances préalables en HTML, CSS, JavaScript ou en administration Linux.
Pourquoi un VPS non géré a été choisi
La configuration utilise le Linux VPS non géré de hosting.com, qui fournit un accès root complet et des ressources serveur isolées. Contrairement à l’hébergement mutualisé, cette offre permet un contrôle direct du logiciel serveur et prend en charge l’installation de WHM et cPanel, une combinaison adaptée aux freelances et aux petites entreprises qui pourraient vouloir héberger plusieurs sites plus tard.
WHM et cPanel séparent la gestion du serveur et celle du site
WHM fonctionne au niveau du serveur et gère des tâches comme la configuration du nom d’hôte, la création de comptes, la gestion SSL et des paramètres système plus larges. cPanel se place en dessous pour le travail quotidien sur le site, notamment l’envoi de fichiers, les e-mails, les bases de données et les contrôles propres au domaine.
La configuration initiale du serveur commence dans WHM
Après le provisionnement du VPS, le serveur est accessible via son adresse IP sur le port 2087, avec le compte root. Un nom d’hôte temporaire est d’abord attribué, puis remplacé plus tard par un sous-domaine comme server.nocodemikey.com, car cPanel attend que le nom d’hôte du serveur soit distinct du domaine principal du site.
Cloudflare devient l’autorité DNS
Le domaine est connecté via Cloudflare plutôt que via les serveurs de noms par défaut du bureau d’enregistrement, car le VPS non géré n’est pas lié à un cluster DNS mutualisé. Deux enregistrements DNS sont ajoutés manuellement: un enregistrement A pour le domaine racine et un enregistrement A générique pointant vers la même IP serveur, tous deux définis sur DNS only plutôt que proxifiés.
Le nettoyage des serveurs de noms est important
Une fois que Cloudflare fournit deux serveurs de noms faisant autorité, ils remplacent complètement ceux existants du bureau d’enregistrement. Laisser coexister anciens et nouveaux serveurs de noms peut provoquer des pannes intermittentes, un problème courant plus difficile à diagnostiquer qu’une coupure totale.
Un compte cPanel doit exister avant qu’AutoSSL fonctionne
Une fois le DNS correctement dirigé, WHM crée un nouveau compte cPanel pour le domaine. Ce n’est qu’alors qu’AutoSSL dispose d’un domaine à valider et pour lequel émettre un certificat. Avant cette étape, le système n’a rien à sécuriser. Un certificat temporaire auto-signé peut apparaître d’abord, mais il est remplacé automatiquement une fois AutoSSL terminé.
HTTPS est imposé et la maintenance du serveur reste manuelle
Dans cPanel, Force HTTPS Redirect est activé afin que les visiteurs utilisant l’URL non sécurisée soient redirigés automatiquement vers la version chiffrée. Comme le VPS n’est pas géré, les tâches continues restent à la charge du propriétaire, notamment changer le mot de passe root généré par le fournisseur, appliquer les mises à jour du système d’exploitation et de cPanel, et maintenir des sauvegardes.
Claude Code construit le site par étapes
Claude Code, l’agent de programmation d’Anthropic, travaille directement dans un dossier de projet au lieu de seulement renvoyer des extraits de code. Il peut créer des fichiers, organiser des dossiers, modifier du code et installer des dépendances. Le site est construit via quatre prompts plus petits plutôt qu’une seule grande demande: d’abord une section hero, puis à propos et compétences, ensuite projets et contact, et enfin navigation, pied de page, effets de survol et adaptation mobile.
Le site d’exemple est un portfolio complet
Le portfolio obtenu utilise des fichiers HTML, CSS et JavaScript séparés, une palette bleu marine sombre avec des accents bleu électrique, un fond animé de particules, des cartes de projets, un formulaire de contact, une navigation fixe, un défilement fluide et une mise en page responsive. L’approche par étapes conserve la cohérence du design tout en réduisant le risque que l’IA réécrive des sections déjà fonctionnelles.
La publication se fait par téléversement dans public_html
Une fois terminé, les fichiers du projet sont téléversés via le Gestionnaire de fichiers cPanel dans public_html, la racine web du domaine. Le fichier crucial est index.html, que le serveur lit comme page d’accueil par défaut. Après le téléversement, le site devient disponible sur le domaine en ligne et peut être partagé avec des clients, employeurs ou prospects.
CONCLUSION
Le processus montre que la création de sites assistée par IA ne devient réellement utile que lorsqu’elle est associée à un flux de déploiement concret. Avec Claude Code pour le développement et un VPS, Cloudflare, WHM et cPanel pour l’hébergement, un projet généré en local peut devenir une propriété web active et réutilisable sur un domaine personnalisé.
Explique-moi