Astro est un framework puissant et rapide, mais rien ne vaut la pratique pour mieux le comprendre. Aujourd’hui, nous allons voir comment installer Astro et créer une première page web en quelques étapes simples.
1. Installation d’Astro
Avant de commencer, assure-toi d’avoir Node.js installé sur ton ordinateur. Ensuite, ouvre ton terminal et exécute la commande suivante pour créer un nouveau projet Astro :
npm create astro@latest astro-demo
Astro te guidera à travers une série de questions pour configurer ton projet. Tu peux choisir les options par défaut pour un premier essai.
Une fois l’installation terminée, navigue dans ton dossier de projet et lance le serveur de développement :
cd astro-demo
npm run dev
Ton projet Astro est maintenant accessible sur http://localhost:4321/ !
Remarque : Lorsque tu crées un projet Astro, une page par défaut index.astro est déjà présente dans le dossier src/pages/. Cette page affiche un message de bienvenue et sert de point de départ pour ton projet. Tu peux bien sûr la modifier pour créer ta propre page personnalisée, mais elle est déjà prête à l'emploi pour un premier aperçu.
2. Structure d’un projet Astro
Un projet Astro suit une structure simple et organisée. Voici les dossiers et fichiers principaux que tu trouveras après l’installation :
-
src/ : Contient tout le code source de ton projet.
-
pages/ : C’est ici que tu crées tes pages (
.astro,.md,.mdx). - components/ : Stocke les composants réutilisables Astro ou intégrés avec React, Vue, etc.
- layouts/ : Contient les modèles de mise en page pour structurer tes pages.
-
pages/ : C’est ici que tu crées tes pages (
- public/ : Dossier destiné aux fichiers statiques comme les images, les polices et les scripts non transformés.
- astro.config.mjs : Le fichier de configuration principal du projet.
- package.json : Contient les dépendances et les scripts du projet.
- tsconfig.json : Fichier de configuration TypeScript si tu utilises TypeScript dans ton projet.
Comprendre cette structure t’aidera à mieux organiser ton projet et à tirer parti des fonctionnalités d’Astro.
3. Création d’une première page
Dans le dossier src/pages/, tu trouveras un fichier index.astro qui est généré automatiquement. C’est la page d’accueil de ton projet par défaut.
Ouvre ce fichier et remplace son contenu par :
---
// Pas besoin de JavaScript pour cette page simple !
---
<html>
<head>
<meta charset="UTF-8">
<title>Ma première page Astro</title>
</head>
<body>
<h1>Bienvenue sur Astro !</h1>
<p>Ceci est ma toute première page créée avec Astro.</p>
</body>
</html>
Sauvegarde, puis rafraîchis ton navigateur. Tu devrais voir ta page s’afficher instantanément !
4. Découverte des composants Astro
Astro utilise un système de composants qui permet de réutiliser facilement du code. Créons un composant simple.
Dans src/components/, crée un fichier Bienvenue.astro et ajoute ceci :
---
// Un composant Astro simple
---
<h2>Bienvenue dans mon projet Astro !</h2>
<p>Je suis un composant réutilisable.</p>
Puis, intègre ce composant dans index.astro :
---
import Bienvenue from "../components/Bienvenue.astro";
---
<html>
<head>
<meta charset="UTF-8">
<title>Ma première page avec Astro</title>
</head>
<body>
<h1>Bienvenue sur Astro !</h1>
<p>Ceci est ma toute première page créée avec Astro.</p>
<Bienvenue />
</body>
</html>
Sauvegarde et regarde le résultat : ton composant s’affiche correctement dans ta page !
Conclusion
Bravo, tu as maintenant créé ta première page avec Astro ! Tu as vu comment installer le framework, explorer la structure d’un projet, créer ta propre page et utiliser des composants réutilisables. Mais ce n’est que le début : Astro regorge d’autres fonctionnalités puissantes, y compris la possibilité d’intégrer des frameworks populaires comme React, Vue ou Svelte.
Dans le prochain article, nous explorerons comment ajouter ces frameworks à un projet Astro et découvrirons ensemble si cela simplifie le développement ou si cela complique les choses. À bientôt pour la suite de l’aventure !
Références
- CloudCannon, Rodney Johnson, Creating an Astro Site: Beginners’ Tutorial*, https://cloudcannon.com/tutorials/astro-beginners-tutorial-series/ (Page consultée le 12 février 2025).
- YouTube, Isaac Harris-Holt, Astro for Impatient Devs, https://www.youtube.com/watch?v=Rx6Al347_AY (Page consultée le 12 février 2025).
- Astro Docs, Structure de projet, https://docs.astro.build/fr/basics/project-structure/ (Page consultée le 12 février 2025).
Commentaires1
Commentaire
Ton article est top ! Clair, bien expliqué et super facile à suivre. Les exemples pratiques rendent l’apprentissage d’Astro vraiment fluide. Avec quelques visuels et une petite comparaison avec d’autres frameworks, ce serait encore plus sympa. Un super guide pour débuter !