Skip to content
Learni
View all tutorials
Développement Web

How to Create a High-Performance Site with Astro in 2026

14 minBEGINNER
DébutantWebAstro
Lire en français

Introduction

Astro is a modern framework that lets you create fast websites by combining multiple frontend frameworks. It generates static HTML by default while supporting interactive components. This tutorial will teach you the basics to launch your first Astro project in 2026. You'll learn how to structure a site, add components, and optimize performance from the start. Ideal for beginners wanting to master modern web development.

Prerequisites

  • Node.js version 18 or higher
  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor like VS Code
  • Terminal to run commands

Project Creation

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

This command initializes a new Astro project with a basic template. The created folder contains all necessary files to get started. Run npm run dev to start the local development server on http://localhost:4321.

Project Configuration

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

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

The astro.config.mjs file defines global settings. Here, output: 'static' indicates the site will be generated as static HTML for optimal performance. Update the site URL to match your domain.

Homepage

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>

This file defines the root page. Variables between --- are processed server-side. The rest is standard HTML with JavaScript expressions injected via curly braces.

Creating a Component

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

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

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

Astro components are reusable .astro files. Define props with TypeScript for strict typing. Import this component into your pages to avoid code duplication.

Using the Component

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>

Import the component with a standard import statement. Pass props directly in the markup. Astro compiles everything to static HTML during the build.

Adding CSS Styles

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>

The