Astro est devenu en 2026 le framework de référence pour les sites de contenu : blogs, documentations, sites marketing, portfolios, e-commerce statique. Sa philosophie « Islands Architecture » (rendu HTML statique par défaut, JavaScript hydraté uniquement où nécessaire) en fait l’option la plus performante pour Lighthouse 100/100/100/100. La version 5 stable depuis fin 2024 apporte content layer, server islands, et server-side rendering hybride. Voici le guide complet pour utiliser Astro 5 en 2026, particulièrement adapté au contexte africain où la performance des sites est critique.
Ce guide général couvre l’écosystème complet. Les articles connexes détaillent : Content Collections Astro 5, Server Islands Astro, déployer Astro sur Cloudflare Pages ou Coolify, Astro vs Next.js comparatif.
Pourquoi Astro en 2026
- Performance par défaut : zéro JS sur les pages statiques. Score Lighthouse 100 avec très peu d’effort.
- Content-first : Markdown / MDX nativement, type-safe via Content Collections
- Multi-framework UI : utilisez React, Vue, Svelte, Solid, Preact dans le même projet
- Server Islands (Astro 5) : hydratation différée de composants serveur, parfait pour personnalisation légère
- SSR hybride : statique par défaut, rendre dynamique seulement les pages qui le nécessitent
- SEO natif : sitemaps, RSS, Open Graph, structured data sans plugin
- Image optimization intégrée (WebP, AVIF, lazy loading, responsive)
- Image et i18n natifs en v5
Cas d’usage idéaux
- Blog ou site média (le cas typique d’itskillscenter.io)
- Site marketing pour SaaS, agence, freelance
- Documentation produit ou technique
- Portfolio
- E-commerce simple (1000 produits ou moins) avec Astro + Decap CMS
Prérequis
- Node.js 20+ ou Bun
- Connaissance HTML/CSS, notion de TypeScript ou JavaScript
- Niveau attendu : débutant à intermédiaire
- Temps : 1 heure pour le hello world, 1 journée pour un blog complet, 1 semaine pour un site marketing pro
Étape 1 — Créer un projet Astro
# Avec Bun (recommandé)
bun create astro@latest mon-site
# ou npm
npm create astro@latest mon-site
# Wizard interactif :
# - Where? mon-site
# - Template? "Use blog template" pour démarrer
# - Install dependencies? Yes
# - Init git repo? Yes
# - TypeScript? Strictcd mon-site
bun run dev
# Ouvert sur http://localhost:4321Étape 2 — Structure du projet
mon-site/
├── src/
│ ├── pages/ # Routes file-based
│ │ ├── index.astro
│ │ └── blog/
│ │ └── [slug].astro
│ ├── content/ # Collections markdown/mdx
│ │ ├── config.ts
│ │ └── blog/
│ │ └── premier-article.md
│ ├── components/
│ ├── layouts/
│ └── styles/
├── public/ # Assets statiques
├── astro.config.mjs
└── package.jsonÉtape 3 — Une page Astro
---
// src/pages/index.astro
import Layout from "../layouts/Base.astro";
const title = "ITSkillsCenter — Formation IT Afrique";
---
<Layout title={title}>
<section class="hero">
<h1>Formation IT pratique pour l'Afrique</h1>
<p>Cybersécurité, dev web, IA : maîtrisez les outils modernes.</p>
<a href="/formations" class="btn">Voir les formations</a>
</section>
</Layout>
<style>
.hero { padding: 4rem 2rem; text-align: center; }
h1 { font-size: 3rem; }
</style>Étape 4 — Content Collections type-safe
Astro 5 a refondu Content Collections avec le « Content Layer » qui permet de charger du contenu depuis Markdown, MDX, JSON, ou des sources externes (Strapi, Notion, Sanity).
// src/content/config.ts
import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";
const blog = defineCollection({
loader: glob({ pattern: "**/*.md", base: "src/content/blog" }),
schema: z.object({
title: z.string().min(10).max(100),
description: z.string(),
pubDate: z.coerce.date(),
author: z.string().default("ITSkillsCenter"),
tags: z.array(z.string()).default([]),
cover: z.string().optional(),
}),
});
export const collections = { blog };Voir notre tutoriel Content Collections Astro 5 pour le détail.
Étape 5 — Server Islands
L’innovation majeure d’Astro 5. Permet d’avoir une page principalement statique avec quelques composants rendus côté serveur à chaque requête (sans hydrater toute la page) :
// Composant rendu serveur, pas hydrate
<UserProfile server:defer>
<Skeleton slot="fallback" />
</UserProfile>Voir notre tutoriel Server Islands.
Étape 6 — Image optimization
---
import { Image } from "astro:assets";
import cover from "../assets/dakar.jpg";
---
<Image
src={cover}
alt="Dakar"
width={1200}
height={600}
format="webp"
loading="lazy"
/>Astro génère automatiquement plusieurs tailles, sert WebP/AVIF aux navigateurs compatibles, ajoute lazy loading. Idéal pour les visiteurs sur connexion 3G en Afrique.
Étape 7 — i18n natif
// astro.config.mjs
export default defineConfig({
i18n: {
defaultLocale: "fr",
locales: ["fr", "en", "ar"],
routing: {
prefixDefaultLocale: false,
},
},
});Pour un site qui sert l’Afrique de l’Ouest, le multilinguisme français/anglais/arabe est un plus. Astro gère les routes /about, /en/about, /ar/about automatiquement.
Étape 8 — Déployer
- Cloudflare Pages (gratuit, edge mondial, latence Afrique excellente)
- Coolify sur VPS Hetzner
- Vercel / Netlify (managé, plan gratuit généreux)
- VPS nu via systemd + Caddy
Voir notre tutoriel déploiement Astro.
Adaptation Afrique de l’Ouest
Astro est le framework rêvé pour l’Afrique : sites ultra-légers (50-200 Ko initial vs 500 Ko-2 Mo pour un Next.js typique), pages servies depuis edge Cloudflare proche (Lagos, Casablanca), SEO natif, score Lighthouse 100. Parfait pour blogs, sites marketing, e-commerce simple où vos visiteurs sont en 3G ou Wi-Fi instable.
Erreurs fréquentes
| Erreur | Cause | Solution |
|---|---|---|
| Hydration mismatch | Composant client avec props serveur | Utiliser client:load avec attention |
| Build OOM | Beaucoup de pages générées | Augmenter Node memory NODE_OPTIONS=–max-old-space-size=4096 |
| Images non générées | Mauvais path | Toujours import via src/assets/ |
| Pages 404 en prod | SSR mal configuré | output: hybrid + adapter approprié |