Site Astro avec Claude Code : du dossier à la publication
MarkdownGuide étape par étape : comment créer un site avec Astro grâce à Claude Code sans savoir programmer. Que faut-il installer, quelle commande utiliser pour créer un projet et comment le publier gratuitement ?
Lire l’article complet
Même quelqu’un qui n’a jamais écrit une ligne de code peut créer un site avec Astro grâce à Claude Code. Cela fait longtemps que je n’écris plus de code à la main ; je fais tout avec des mots, grâce à l’IA, et créer un site avec Astro fonctionne exactement de la même façon : vous expliquez ce dont vous avez besoin, et Claude écrit le code pour vous.
Le problème ne vient généralement pas de la création elle-même, mais du fait que le parcours est divisé en morceaux. Un article explique l’installation, un autre présente les commandes, un troisième traite de la publication, et le parcours complet ne se dessine jamais clairement dans votre esprit. Ici, je vous accompagne d’un dossier vide jusqu’à un site accessible sur Internet via un lien : que faut-il installer, quelle commande utiliser pour démarrer un projet, comment créer des pages avec Claude Code et comment publier gratuitement le résultat. Je m’appuie sur la documentation officielle d’Astro.
À propos de l’utilisation du service — dans la documentation Ailoot.
De quoi avez-vous besoin avant de commencer ?
À retenir
Trois choses sur votre ordinateur : une version récente de Node.js, un éditeur de code et un terminal. Node.js est l’environnement dans lequel ces outils fonctionnent ; à la date de rédaction, la documentation Astro exige la version 22.12.0 ou ultérieure et précise que les versions impaires comme la 23 ne sont pas prises en charge. L’éditeur est généralement VS Code, où Claude Code est également installé. Le terminal est une fenêtre noire dans laquelle on saisit des commandes ; il est déjà intégré à VS Code. Vous n’avez pas besoin d’installer tout cela spécialement pour Astro : si vous avez déjà créé quelque chose avec Claude Code, votre environnement est prêt.
Astro ne vous demande pas de télécharger quoi que ce soit à l’avance : il sera récupéré grâce à la commande de l’étape suivante. Mais vous avez besoin de l’environnement dans lequel tout cela fonctionne. Astro présente ainsi les prérequis — il vous faut trois choses :
Node.js — version v22.12.0 ou ultérieure. Les versions impaires comme v23 ne sont pas prises en charge. Un éditeur de texte — nous recommandons VS Code avec notre extension Astro officielle. Un terminal — Astro se gère en ligne de commande.
Voyons ce que chacun de ces éléments signifie en pratique :
- Node.js — un programme sans lequel ni Astro ni la plupart des outils de vibe coding ne fonctionneront. Téléchargez-le depuis nodejs.org et installez-le comme une application ordinaire. Le numéro de version indiqué dans la documentation évolue avec le temps ; avant de commencer, consultez donc la page d’installation d’Astro et vérifiez la configuration requise. Il vous faut une version paire (22, 24) ; mieux vaut éviter les versions impaires (23, 25).
- VS Code — un éditeur gratuit de Microsoft. Vous y ouvrez le dossier du projet, et Claude Code y fonctionne également ; il écrira le code.
- Terminal — une fenêtre dans laquelle vous saisissez des commandes. Vous n’avez pas besoin de l’installer séparément : il s’ouvre depuis le menu de VS Code, et toutes les commandes ci-dessous s’y saisissent.
Si vous avez déjà installé Claude Code et créé quoi que ce soit avec, vous avez déjà tout cela et pouvez passer cette étape. Sinon, j’ai un guide séparé sur l’installation de Claude Code.
Comment créer un projet Astro avec une seule commande ?
À retenir
Vous créez un nouveau projet dans le terminal avec la commande npm create astro@latest. Un assistant se lance et pose quelques questions (où l’installer, quel modèle utiliser, s’il faut installer les dépendances), puis crée la structure de base du projet. Si le dossier du projet n’existe pas encore, l’assistant le créera. Ensuite, vous accédez au dossier du projet avec la commande cd et pouvez commencer. Vous n’avez pas besoin de créer un dossier vide à l’avance.
C’est ici que le projet commence, et une seule commande suffit. Ouvrez le terminal et saisissez :
npm create astro@latest
L’assistant d’installation va se lancer. Voici ce que dit la documentation à son sujet :
Vous pouvez exécuter la commande create astro n’importe où sur votre ordinateur ; vous n’avez donc pas besoin de créer un dossier de projet vide à l’avance. Si ce dossier n’existe pas encore, l’assistant vous aidera à le créer automatiquement.
L’assistant vous guidera et posera quelques questions : quel nom donner au dossier du projet, quel modèle choisir pour commencer et s’il faut installer les dépendances tout de suite. Vous pouvez choisir les options par défaut à chaque question : un modèle vide ou minimal conviendra pour votre premier site. Si vous avez répondu « non » à la question sur l’installation des dépendances, installez-les manuellement plus tard en exécutant la commande npm install dans le dossier du projet.
Lorsque l’assistant a terminé, il indique que le projet a été créé et suggère l’étape suivante : accéder au dossier du projet :
cd your-project-name
Voilà, le projet est créé. Il contient déjà une structure de site fonctionnelle : plusieurs fichiers et dossiers servant à créer les pages. Vous n’aurez pas besoin de les modifier à la main, mais il est utile de savoir où se trouve chaque chose. Astro n’impose qu’un seul dossier :
src/pages — un sous-dossier obligatoire du projet. Sans lui, le site n’aura ni pages ni routes.
Autrement dit, src/pages contient les pages du site : la page d’accueil, la page « À propos » et les pages de contact. src/components (des éléments réutilisables comme les en-têtes et les boutons), src/layouts (la structure commune des pages) et le dossier public pour les images et les fichiers se trouvent généralement à proximité. Vous n’avez pas à mémoriser toute l’organisation : retenez simplement que les pages se trouvent dans src/pages, et indiquez-le lorsque vous demandez à Claude : « ajoute une page de contact ».
Comment créer le site lui-même avec Claude Code ?
À retenir
Ouvrez le dossier du projet dans VS Code, lancez Claude Code, puis expliquez avec des mots ce que vous voulez sur le site. Claude modifie lui-même les fichiers dans src/pages et les dossiers voisins. Il fonctionne mieux avec des tâches courtes et claires : « crée une page d’accueil avec un titre, une courte description et un bouton », puis « ajoute une page de services », puis « passe les couleurs en foncé ». Après chaque demande, regardez le résultat dans le navigateur et précisez vos attentes si nécessaire. Vous n’avez pas besoin de programmer. Votre rôle est de donner des instructions claires et de vérifier le résultat.
La structure de base est prête ; vous allez maintenant en faire votre site, et Claude Code prend le relais. Ouvrez le dossier du projet dans VS Code, lancez Claude Code et décrivez avec des mots ce dont vous avez besoin. Il modifie lui-même les fichiers dans src/pages et les dossiers voisins : vous n’avez qu’à lui confier des tâches et à regarder le résultat.
D’après mon expérience, le mieux est d’avancer par petites étapes. Une demande immense comme « crée-moi un site d’entreprise » aboutit à un méli-mélo difficile à corriger. Découpez donc le travail en tâches courtes et claires, puis donnez-les une par une :
- « Crée une page d’accueil : un grand titre, quelques phrases sur ce que je fais et un bouton qui mène à la page de contact. »
- « Ajoute une page de services avec une liste de trois sections. »
- « Ajoute une page de contact avec un numéro de téléphone et un lien vers Telegram. »
- « Modifie le style : un fond clair et une grande police facile à lire. »
Vérifiez chaque étape avant de passer à la suivante : vous repérerez plus facilement les problèmes et pourrez revenir en arrière. Pourquoi les petites tâches sont plus fiables et comment garder l’IA sur la bonne voie relèvent de l’ingénierie du contexte : plus la tâche et la structure du projet sont claires, plus le résultat est prévisible.
Astro fournit à l’IA une structure pratique : le contenu des pages est séparé du style, et les pages sont construites selon des règles communes. Grâce à cela, Claude s’embrouille moins souvent et risque moins d’abîmer un élément voisin lorsqu’il en modifie un autre. Si Claude cesse soudainement de voir vos fichiers ou répond à côté, consultez le guide sur les raisons pour lesquelles Claude Code ne voit pas les fichiers du projet.
Comment prévisualiser le site avant sa publication ?
À retenir
Pour voir le site avant sa mise en ligne, Astro propose un serveur de développement. Saisissez la commande npm run dev dans le terminal, depuis le dossier du projet, et Astro lance un aperçu local, généralement à l’adresse localhost sur le port 4321. Ouvrez cette adresse dans un navigateur pour voir votre site en direct. Les modifications que Claude apporte aux fichiers sont prises en compte au fur et à mesure : changez un texte, et la page se met à jour automatiquement. Ce serveur n’est visible que par vous sur votre ordinateur ; il ne publie pas le site sur Internet.
Avant de montrer le site au monde entier, prévisualisez-le sur votre ordinateur. Astro dispose pour cela d’un serveur de développement, qui affiche le site en direct sur votre ordinateur. Lancez-le avec une commande dans le terminal, depuis le dossier du projet :
npm run dev
Astro lance un aperçu local et affiche l’adresse dans le terminal. Par défaut, il s’agit de localhost:4321. Copiez l’adresse, ouvrez-la dans votre navigateur, et vous verrez votre site. Pour l’instant, vous seul pouvez ouvrir cette adresse : personne à l’extérieur ne peut y accéder ; c’est votre brouillon.
L’avantage, c’est que l’aperçu est en direct : Claude modifie un fichier, et la page du navigateur se met à jour automatiquement ; inutile de l’actualiser manuellement. C’est rapide : faites une demande à Claude, regardez le résultat dans le navigateur, demandez une correction, puis vérifiez à nouveau. C’est à cette étape que vous peaufinez le site. Lorsque le résultat vous convient, publiez-le en ligne.
Comment publier gratuitement un site Astro en ligne ?
À retenir
La solution gratuite la plus simple passe par GitHub. Commencez par envoyer le projet dans un dépôt GitHub (un dépôt de code en ligne). Connectez ensuite un service d’hébergement capable de créer un site Astro : Netlify, Vercel ou GitHub Pages. Le service d’hébergement reconnaît Astro, crée le site avec la commande de build et le publie à sa propre adresse. Chaque fois que vous envoyez une nouvelle modification dans le dépôt, le site est automatiquement reconstruit et mis à jour. Claude Code peut aussi vous aider à configurer tout cela avec des instructions en langage naturel.
Vous devez placer le site terminé quelque part pour que d’autres personnes puissent l’ouvrir à partir d’un lien. La solution gratuite la plus simple passe par GitHub : envoyez d’abord le code du projet dans un dépôt, puis connectez un service d’hébergement qui construit et publie le site. Voici les étapes :
- Créez un dépôt sur GitHub. Un dépôt est un espace de stockage de code en ligne où vous envoyez les fichiers du projet. Claude Code peut vous aider en suivant des instructions en langage naturel : demandez-lui « importe le projet dans un nouveau dépôt GitHub », et il vous proposera des commandes. Si vous n’avez jamais utilisé GitHub, gardez à portée de main les instructions pour vous inscrire et vous connecter.
- Connectez un service d’hébergement. Rendez-vous sur l’un des services (Netlify, Vercel), connectez-vous avec votre compte GitHub et choisissez votre dépôt. La documentation Astro décrit cette méthode ainsi : le service d’hébergement surveille votre dépôt, construit le site et le publie.
- Vérifiez les paramètres de build. En général, le service d’hébergement reconnaît Astro et renseigne les paramètres nécessaires. S’il vous demande de les saisir manuellement, la commande de build indiquée dans la documentation est
astro build(ounpm run build), et le site terminé est placé dans le dossierdist. - Cliquez sur « Publier ». Le service construit le site et vous fournit un lien comme
site-name.netlify.app. Tout le monde peut ouvrir le site à cette adresse.
Voici le texte exact de la documentation sur la connexion d’un dépôt à un service d’hébergement :
De nombreux services d’hébergement populaires reconnaissent votre projet comme un site Astro et choisissent automatiquement les paramètres de build et de déploiement appropriés. Le service d’hébergement surveille la branche principale de votre dépôt, reconstruit votre site et le redéploie à chaque nouvelle modification.
Ensuite, la publication est automatique : envoyez une nouvelle modification dans le dépôt, et le site est reconstruit et mis à jour tout seul ; vous n’avez rien d’autre à cliquer.
Il existe également une deuxième option gratuite : GitHub Pages, qui publie le site directement depuis le dépôt à l’aide des propres outils de GitHub. Astro propose un modèle de départ officiel :
Astro prend en charge une GitHub Action officielle qui permet de déployer un projet sur GitHub Pages avec presque aucune configuration. C’est la méthode recommandée pour déployer sur GitHub Pages.
Avec cette option, le site est accessible à une adresse comme your-name.github.io/repository-name, et vous pouvez ensuite y connecter votre propre domaine. Vous pouvez également effectuer la configuration avec Claude Code : décrivez la tâche avec des mots, et il prépare le fichier nécessaire.
Combien coûte la création d’un site Astro ?
À retenir
Astro est gratuit et open source : son utilisation ne coûte rien. L’hébergement de base peut aussi être gratuit : GitHub Pages, ainsi que les offres de démarrage de Netlify et Vercel, suffisent pour un site Astro léger. Les dépenses réelles concernent l’outil d’IA que vous utilisez pour créer le site (Claude) et, éventuellement, votre propre nom de domaine à la place de l’adresse gratuite du service d’hébergement. Il est donc possible de suivre le parcours minimal « créer et publier un site » sans payer l’hébergement : vous ne payez que l’IA.
Parlons maintenant du coût. Astro est un outil open source gratuit ; il n’a pas de prix distinct. Les services d’hébergement de base proposent eux aussi des offres gratuites : GitHub Pages, ainsi que les offres de démarrage de Netlify et Vercel, qui suffisent généralement pour un site Astro léger (les offres gratuites limitent le trafic, mais suffisent le plus souvent pour un petit site vitrine ou une landing page).
En pratique, il y a donc deux éléments pour lesquels vous pourriez payer, et pas nécessairement dans tous les cas. Le premier est l’outil d’IA que vous utilisez pour créer le site. Le second est votre propre nom de domaine à la place d’une adresse comme name.netlify.app ; c’est facultatif et cela coûte peu par an. Vous pouvez suivre tout le parcours « créer un site et le publier en ligne » en ne payant que Claude.
Quelles autres questions pose-t-on sur les sites Astro et Claude Code ?
À retenir
Des réponses courtes aux questions fréquentes. Vous n’avez pas besoin de savoir programmer : Claude écrit le code, et vous lui donnez des tâches avec des mots puis vérifiez le résultat. Le site terminé reste constitué de vos fichiers et peut être hébergé où vous voulez ; il n’est pas verrouillé sur la plateforme de quelqu’un d’autre. Astro convient aux sites de contenu — site vitrine, landing page, blog ou présentation ; pour un espace personnel complexe, mieux vaut chercher une autre solution. Et vous pouvez publier gratuitement le site terminé grâce à GitHub.
Foire aux questions
Faut-il savoir programmer pour créer un site avec Astro grâce à Claude Code ?
Non. Cela fait longtemps que je n’écris plus de code à la main ; je fais tout grâce à l’IA. Vous donnez une tâche avec des mots — « crée une page d’accueil avec ce type de titre » — et Claude Code écrit et modifie les fichiers pour vous. Vous n’avez pas besoin de connaître la syntaxe. Vous devez savoir quel type de site vous voulez et vérifier dans le navigateur le résultat obtenu.
Faut-il créer le dossier du projet à l’avance ?
Non. La commande npm create astro@latest lance un assistant qui crée lui-même le dossier s’il n’existe pas encore. Vous pouvez exécuter cette commande n’importe où sur votre ordinateur. Une fois le dossier créé, accédez-y avec la commande cd et travaillez dedans.
Comment prévisualiser le site avant sa mise en ligne ?
Exécutez la commande npm run dev dans le dossier du projet. Astro lance un aperçu local, généralement à l’adresse localhost:4321, et vous pouvez ouvrir le site dans le navigateur sur votre propre ordinateur. Vous seul pouvez voir cet aperçu ; les modifications sont prises en compte au fur et à mesure et vous n’avez pas besoin d’actualiser manuellement la page.
Peut-on publier gratuitement un site Astro ?
Oui. Le plus simple est d’envoyer le projet dans un dépôt GitHub et de le connecter à un hébergement gratuit : GitHub Pages, Netlify ou Vercel. Le service d’hébergement construit le site et le publie à sa propre adresse. Vous n’avez pas à payer séparément l’hébergement d’un site léger ; les coûts ne surviennent que si vous voulez votre propre nom de domaine.
Astro convient-il à tous les types de sites ?
Astro est conçu pour les sites de contenu : sites vitrines, landing pages, blogs, portfolios et présentations de boutiques en ligne. C’est là qu’il excelle. Si le cœur du projet est une application web complexe avec un espace personnel et de nombreuses actions sur chaque bouton, cette partie se construit généralement avec un autre outil. Je parle plus en détail des forces et des faiblesses d’Astro dans l’article consacré à ce qu’est Astro.
En quoi Astro est-il préférable à un éditeur comme Tilda pour le vibe coding ?
La différence tient à ce qu’il vous reste. Un site Astro est constitué de vos fichiers, qui sont stockés chez vous et peuvent être publiés sur n’importe quel service d’hébergement ; aucun service tiers ne les détient. Si vous voulez déménager ou apporter des changements six mois plus tard, vous pouvez tout ouvrir avec n’importe quel outil. Le choix entre Astro et d’autres outils dépend de l’approche générale du vibe coding : choisissez un outil adapté à la tâche. Vous trouverez la carte des outils dans le guide des alternatives à Claude Code.
Sources
Découvrez Ailoot.
Plus de détails
Questions fréquentes : Site Astro avec Claude Code : du dossier à la publication
L’aperçu local Astro publie-t-il le site sur Internet ?
Non. npm run dev lance le serveur de développement local et affiche son adresse, souvent localhost:4321. La publication passe séparément par un hébergeur ou le workflow GitHub Pages.
Quels réglages de build vérifier chez l’hébergeur Astro ?
Pour le site statique décrit, vérifiez astro build ou npm run build et la publication du dossier dist. Après déploiement, ouvrez l’URL publique et contrôlez ses pages : l’aperçu local seul ne prouve pas la publication.