BeginnerAstro45 min10 juin 2026

Déploie ton premier site Astro

De zéro à un site statique déployé en 45 minutes — content collections, islands, et le modèle mental qui fait que Astro fait 'clic'.

Pourquoi Astro

Astro livre zéro JavaScript par défaut. Ton contenu se rend en HTML simple côté serveur, et les îlots interactifs ne s’hydratent que là où tu le demandes. Pour un site personnel riche en contenu — blog, research, galeries — c’est exactement le compromis voulu.

Le chemin des 45 minutes

  1. npm create astro@latest — choisis le template blog, TypeScript strict.
  2. Définis une content collection dans src/content.config.ts avec un schéma zod.
  3. Écris ton premier post .mdx — le frontmatter est validé au build.
  4. Ajoute une page [slug].astro avec getStaticPaths() + render().
  5. Déploie : astro build produit un dist/ entièrement statique, hébergeable partout.

Islands : la partie que tout le monde rate

<Hero client:load />        <!-- s'hydrate immédiatement -->
<Chart client:visible />    <!-- s'hydrate quand on scroll jusqu'à lui -->
<Comments client:idle />    <!-- s'hydrate quand le navigateur est idle -->

Prends client:visible pour tout ce qui est sous la ligne de flottaison. Ton score Lighthouse te remerciera.

Et ensuite

Ajoute l’i18n avec les routes dynamiques [locale] — c’est une leçon à part.

Tutoriels