Aller au contenu
Astro v5 est là ! Apprenez à mettre à niveau votre site

Installer Astro

La commande CLI create astro est le moyen le plus rapide pour démarrer un nouveau projet vierge Astro. Elle vous accompagnera à travers chaque étape pour configurer votre nouveau projet Astro et elle vous permettra de choisir parmi différents modèles de démarrage officiels.

Vous pouvez également exécuter la commande CLI avec l’option template pour commencer votre projet en utilisant n’importe quel thème ou modèle de démarrage existant. Découvrez notre vitrine de thèmes et de démarreurs où vous pouvez parcourir des thèmes pour les blogs, les portfolios, les sites de documentation, les pages de destination et plus encore !

Si vous préférez installer Astro manuellement, consultez notre guide d’installation manuelle étape par étape.

Prérequis

Titre de la section Prérequis
  • Node.js - v18.17.1 ou v20.3.0, v22.0.0 ou supérieure. ( v19 et v21 ne sont pas supportées.)
  • Éditeur de texte - Nous recommandons VS Code avec notre extension officielle Astro.
  • Terminal - Astro est accessible via son interface en ligne de commande (CLI).

Compatibilité avec les navigateurs

Titre de la section Compatibilité avec les navigateurs

Astro est construit avec Vite, qui cible par défaut les navigateurs supportant le JavaScript moderne. Pour une référence complète, vous pouvez consulter la liste des versions de navigateurs actuellement prises en charge par Vite.

Installer à partir de l’assistant CLI

Titre de la section Installer à partir de l’assistant CLI

Vous pouvez exécuter create astro n’importe où sur votre machine, il n’est donc pas nécessaire de créer un nouveau répertoire vide pour votre projet avant de commencer. Si vous n’avez pas encore de répertoire vide pour votre nouveau projet, l’assistant vous aidera à en créer un automatiquement.

  1. Exécutez la commande suivante dans votre terminal pour démarrer l’assistant d’installation :

    Fenêtre du terminal
    # créer un nouveau projet avec npm
    npm create astro@latest

    Si tout se passe bien, vous verrez un message de réussite suivi de quelques étapes suivantes recommandées.

  2. Maintenant que votre projet a été créé, vous pouvez accéder à votre nouveau répertoire de projet pour commencer à utiliser Astro.

  3. Si vous avez ignoré l’étape « Installer les dépendances ? » de l’assistant CLI, assurez-vous d’installer vos dépendances avant de continuer.

    Fenêtre du terminal
    npm install

  4. Vous pouvez maintenant démarrer le serveur de développement d’Astro et visualiser un aperçu en direct de votre projet pendant que vous le construisez !

Options d’installation du CLI

Titre de la section Options d’installation du CLI

Vous pouvez exécuter la commande create astro avec des options supplémentaires pour personnaliser le processus de configuration (par exemple, répondre « oui » à toutes les questions, ignorer l’animation de Houston) ou votre nouveau projet (par exemple installer git ou non, ajouter des intégrations).

Voir toutes les options disponibles pour la commande create astro

Ajouter des intégrations

Titre de la section Ajouter des intégrations

Vous pouvez démarrer un nouveau projet Astro et installer toutes les intégrations officielles ou intégrations communautaires prenant en charge la commande astro add en passant l’argument --add à la commande create astro.

Exécutez la commande suivante dans votre terminal, en remplaçant toute intégration prenant en charge la commande astro add :

Fenêtre du terminal
# créer un nouveau projet avec react et tailwind
npm create astro@latest -- --add react --add tailwind

Utiliser un thème ou un modèle de démarrage

Titre de la section Utiliser un thème ou un modèle de démarrage

Vous pouvez également démarrer un nouveau projet Astro en vous basant sur un exemple officiel ou sur la branche main de n’importe quel dépôt Github en utilisant l’argument --template avec la commande create astro.

Exécutez la commande suivante dans votre terminal, en remplaçant le nom officiel du modèle de démarrage Astro ou le nom d’utilisateur GitHub et le dépôt du thème que vous souhaitez utiliser :

Fenêtre du terminal
# créer un nouveau projet avec un exemple officiel
npm create astro@latest -- --template <example-name>


# créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
npm create astro@latest -- --template <github-username>/<github-repo>

Par défaut, cette commande utilisera la branche main du dépôt de modèles. Pour utiliser un nom de branche différent, transmettez-le dans l’argument --template : <github-username>/<github-repo>#<branch>.

Configuration manuelle

Titre de la section Configuration manuelle

Ce guide vous accompagnera à travers les étapes pour installer et configurer manuellement un nouveau projet Astro.

Si vous préférez ne pas utiliser notre outil CLI automatique create astro, vous pouvez configurer votre projet par vous-même en suivant le guide ci-dessous.

  1. Créez votre dossier

    Créez un dossier vide portant le nom de votre projet, puis entrez à l’intérieur.

    Fenêtre du terminal
    mkdir mon-projet-astro
    cd mon-projet-astro

    Une fois que vous êtes dans votre nouveau répertoire, créez le fichier package.json de votre projet. C’est ainsi que vous gérerez les dépendances de votre projet, y compris Astro. Si vous n’êtes pas familier avec ce format de fichier, exécutez la commande suivante pour en créer un.

    Fenêtre du terminal
    npm init --yes

  2. Installer Astro

    Commencez par installer les dépendances du projet Astro dans votre projet.

    Fenêtre du terminal
    npm install astro

    Puis, remplacez toute section réservée « scripts » de votre package.json par ce qui suit :

    package.json
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
      },

    Vous utiliserez ces scripts plus loin dans le guide pour démarrer Astro et exécuter ses différentes commandes.

  3. Créez votre première page

    Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier à l’emplacement src/pages/index.astro. Ce sera votre première page Astro dans le projet.

    Pour ce guide, copiez et collez l’extrait de code suivant (en incluant les tirets ---) dans votre nouveau fichier :

    src/pages/index.astro
    ---
    // Bienvenue dans Astro ! Tout ce qui se trouve entre ces barrières de code
    // à trois tirets est le « frontmatter de votre composant ». Il ne s'exécute
    // jamais dans le navigateur.
    console.log("Ceci s'exécute dans votre terminal, et non dans le navigateur !");
    ---
    <!-- Ci-dessous se trouve le « modèle de votre composant ». C'est simplement
        du HTML, mais avec un peu de magie à l'intérieur pour vous aider à
        construire de superbes modèles. -->
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
    <style>
      h1 {
        color: orange;
      }
    </style>

  4. Créez votre première ressource statique

    Vous voudrez également créer un dossier public/ pour stocker vos ressources statiques. Astro inclura toujours ces ressources dans votre version finale, afin que vous puissiez les référencer en toute sécurité à partir de vos modèles de composants.

    Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier à l’emplacement public/robots.txt. robots.txt est un fichier simple que la plupart des sites incluent pour indiquer aux robots de recherche comme Google comment traiter votre site.

    Pour ce guide, copiez et collez l’extrait de code suivant dans votre nouveau fichier :

    public/robots.txt
    # Exemple : Autoriser tous les robots à scanner et indexer votre site.
    # Syntaxe complète : https://developers.google.com/search/docs/advanced/robots/create-robots-txt
    User-agent: *
    Allow: /

  5. Créez astro.config.mjs

    Astro est configuré en utilisant astro.config.mjs. Ce fichier est optionnel si vous n’avez pas besoin de configurer Astro mais vous souhaiterez peut-être le créer maintenant.

    Créez astro.config.mjs à la racine de votre projet et copiez le code ci-dessous à l’intérieur :

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

    // https://astro.build/config
    export default defineConfig({});

    Si vous souhaitez ajouter des composants de framework UI comme React, Svelte, etc. ou utiliser d’autres outils comme Tailwind ou Partytown dans votre projet, c’est ici que vous importerez et configurerez manuellement les intégrations.

    Consultez la référence de configuration de l’API d’Astro pour plus d’informations.

  6. Ajoutez le support de TypeScript

    TypeScript est configuré en utilisant tsconfig.json. Même si vous n’écrivez pas de code TypeScript, ce fichier est important pour que les outils comme Astro et VS Code puisse comprendre votre projet. Certaines fonctionnalités (comme l’import de paquets npm) ne sont pas entièrement supportés dans l’éditeur sans un fichier tsconfig.json.

    Si vous avez l’intention d’écrire du code Typescript, l’utilisation des modèles strict ou strictest d’Astro est recommandé. Vous pouvez consulter et comparer les trois modèles de configuration dans astro/tsconfigs/.

    Créez tsconfig.json à la racine de votre projet et copiez le code ci-dessous à l’intérieur. (Vous pouvez utiliser base, strict ou strictest pour votre modèle TypeScript) :

    tsconfig.json
    {
      "extends": "astro/tsconfigs/base"
    }

    Consultez le guide d’Astro sur la configuration de TypeScript pour plus d’informations.

  7. Prochaines étapes

    Si vous avez suivi les étapes ci-dessus, le dossier de votre projet devrait maintenant ressembler à ça :

    • Répertoirenode_modules/
      • …
    • Répertoirepublic/
      • robots.txt
    • Répertoiresrc/
      • Répertoirepages/
        • index.astro
    • astro.config.mjs
    • package-lock.json ou yarn.lock, pnpm-lock.yaml, etc.
    • package.json
    • tsconfig.json

  8. Vous pouvez maintenant démarrer le serveur de développement d’Astro et visualiser un aperçu en direct de votre projet pendant que vous le construisez !

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté