Creer un site statique avec Astro en 10 minutes
Dans cette video, on construit un site statique complet avec Astro : installation, creation de pages, deploiement. Le tout en moins de 10 minutes.
Ce tutoriel video vous guide pas a pas dans la creation d'un site statique avec Astro.
Ce que vous allez apprendre
- Installer Astro et creer un nouveau projet
- Comprendre la structure des fichiers
.astro - Creer des pages et des composants reutilisables
- Ajouter du style avec des CSS scoped
- Deployer le site en production
Pre-requis
Avant de commencer, assurez-vous d'avoir :
- Node.js 18+ installe sur votre machine
- Un editeur de code (VS Code recommande)
- Des connaissances basiques en HTML et CSS
# Verifier votre version de Node
node --version
# Creer un nouveau projet Astro
npm create astro@latest mon-site
Points cles de la video
Les composants Astro
Les fichiers .astro combinent HTML, CSS et JavaScript dans un seul fichier. Le frontmatter (entre les ---) contient la logique serveur, et le template en dessous genere le HTML.
Le routing base sur les fichiers
Chaque fichier dans src/pages/ devient automatiquement une route. Pas besoin de configurer un routeur — c'est automatique.
Les layouts reutilisables
Creez un layout dans src/layouts/ et utilisez le <slot /> pour injecter le contenu de chaque page. Ca evite de dupliquer le header, footer, et les meta tags.
Ressources complementaires
| Ressource | Lien |
|---|---|
| Documentation Astro | astro.build/docs |
| Astro Discord | discord.gg/astro |
| Templates officiels | astro.build/themes |
Astro est ideal pour les sites de contenu : blogs, docs, portfolios, sites marketing. Il genere du HTML statique par defaut, ce qui le rend ultra-rapide.
Questions frequentes
Faut-il connaitre React pour utiliser Astro ?
Non, Astro utilise ses propres composants .astro qui ressemblent a du HTML classique. Vous pouvez integrer React, Vue ou Svelte si vous le souhaitez, mais ce n'est pas obligatoire.
Combien de temps dure le tutoriel ?
La video dure environ 10 minutes. Elle couvre l'installation, la creation de pages et le deploiement.
