Skip to content
Learni
Voir tous les tutoriels
Développement Web

Comment créer un site performant avec Astro en 2026

14 minBEGINNER
DébutantWebAstro
Read in English

Introduction

Astro est un framework moderne qui permet de créer des sites web rapides en combinant plusieurs frameworks frontend. Il génère du HTML statique par défaut tout en supportant des composants interactifs. Ce tutoriel vous apprendra les bases pour lancer votre premier projet Astro en 2026. Vous découvrirez comment structurer un site, ajouter des composants et optimiser les performances dès le départ. Idéal pour les débutants souhaitant maîtriser le développement web moderne.

Prérequis

  • Node.js version 18 ou supérieure
  • Connaissances de base en HTML, CSS et JavaScript
  • Un éditeur de code comme VS Code
  • Terminal pour exécuter les commandes

Création du projet

terminal
npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev

Cette commande initialise un nouveau projet Astro avec un template de base. Le dossier créé contient tous les fichiers nécessaires pour démarrer. Exécutez npm run dev pour lancer le serveur de développement local sur http://localhost:4321.

Configuration du projet

astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  output: 'static',
});

Le fichier astro.config.mjs définit les paramètres globaux. Ici, output: 'static' indique que le site sera généré en HTML statique pour des performances optimales. Modifiez le site URL selon votre domaine.

Page d'accueil

src/pages/index.astro
---
const title = 'Mon premier site Astro';
---

<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <h1>Bienvenue sur {title}</h1>
    <p>Ce site est généré avec Astro.</p>
  </body>
</html>

Ce fichier définit la page racine. Les variables entre --- sont traitées côté serveur. Le reste est du HTML standard avec des expressions JavaScript injectées via les accolades.

Création d'un composant

src/components/Welcome.astro
---
interface Props {
  name: string;
}

const { name } = Astro.props;
---

<div>
  <h2>Bonjour, {name} !</h2>
  <p>Composant réutilisable Astro.</p>
</div>

Les composants Astro sont des fichiers .astro réutilisables. Définissez des props avec TypeScript pour un typage strict. Importez ce composant dans vos pages pour éviter la duplication de code.

Utilisation du composant

src/pages/index.astro
---
import Welcome from '../components/Welcome.astro';
const title = 'Mon premier site Astro';
---

<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <h1>Bienvenue sur {title}</h1>
    <Welcome name="Développeur" />
  </body>
</html>

Importez le composant avec une instruction import standard. Passez les props directement dans le balisage. Astro compile tout en HTML statique lors du build.

Ajout de styles CSS

src/pages/index.astro
---
---

<style>
  h1 {
    color: #2563eb;
    font-size: 2.5rem;
  }
  body {
    font-family: system-ui, sans-serif;
  }
</style>

<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Mon site</title>
  </head>
  <body>
    <h1>Styles intégrés</h1>
  </body>
</html>

Les balises