Aller au contenu

Installer Astro manuellement

Ce guide vous montrera comment installer et configurer manuellement un nouveau projet Astro si vous préférez ne pas utiliser l’outil de ligne de commande automatique.

Vous préférez une méthode plus rapide pour commencer?
Titre de la section Vous préférez une méthode plus rapide pour commencer?
Essayez l’assistant de CLI create astro →

Prérequis

Titre de la section Prérequis
  • Node.js - version v18.14.1 ou supérieure.
  • Éditeur de code - Nous recommandons VS Code avec notre extension officielle Astro.
  • Console de terminal - Astro est accessible via son interface de ligne de commande (ILC).

Installation

Titre de la section Installation

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

1. Créez votre Répertoire

Titre de la section 1. Créez votre Répertoire

Créez un répertoire vide avec le nom de votre projet, puis naviguez dans celui-ci.

Fenêtre de terminal
mkdir my-astro-project
cd my-astro-project

Maintenant que vous êtes dans votre nouveau répertoire, créez votre fichier package.json. C’est avec ce fichier que vous pourrez gérer les dépendances de votre projet, y compris Astro. Si vous n’êtes pas familier avec ce format de fichier, lancez la commande suivante pour en créer un.

Fenêtre de terminal
npm init --yes

2. Installer Astro

Titre de la section 2. Installer Astro

D’abord, installez les dépendances d’Astro dans votre projet.

Fenêtre de terminal
npm install astro

Ensuite, remplacez la section “scripts” de votre package.json par les lignes suivantes :

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

Vous aurez besoin de ces scripts plus tard dans le guide pour lancer Astro et exécuter ses différentes commandes.

3. Créez votre Première Page

Titre de la section 3. Créez votre Première Page

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

Pour ce guide, copiez-collez le code suivant (y compris les tirets ---) dans votre tout nouveau fichier :

src/pages/index.astro
---
// Bienvenue dans Astro ! Tout ce qui est entre les barres de code "---"
// est le "Frontmatter" de votre composant. Il n'est jamais exécuté sur le navigateur.
console.log('Ceci ce lance dans votre terminal, pas sur le navigateur !');
---
<!-- Tout ce qui se situe en dessous est le "Template" de votre composant.
     Ce n'est que du HTML, mais avec quelques paillettes et un peu de magie pour vous aider à construire de grande choses. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. Créez votre Premier Fichier Statique

Titre de la section 4. Créez votre Premier Fichier Statique

Vous devriez aussi créer un répertoire public/ pour stocker vos fichiers statiques. Astro injectera toujours ces fichiers dans votre Build final, vous pouvez donc les référencer de manière sûre depuis vos Templates de composants.

Dans votre éditeur de texte, créez un nouveau fichier dans votre répertoire avec le nom public/robots.txt. robots.txt est un fichier simple que la plupart des sites incluent pour dire aux moteurs de recherche comme Google comment traiter votre site.

Pour ce guide, copiez-collez le code suivant dans votre nouveau fichier :

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

5. Créez votre Fichier astro.config.mjs

Titre de la section 5. Créez votre Fichier astro.config.mjs

Astro est configuré en utilisant le fichier astro.config.mjs. Ce fichier est optionnel lorsque vous ne souhaitez pas configurer Astro, mais vous pouvez le créer maintenant.

Créez le fichier astro.config.mjs à la racine de votre projet, et copiez le code ci-dessous dans le fichier :

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


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

Si vous souhaitez inclure des composants de Framework comme React, Svelte, etc… ou utiliser d’autres outils tels que Tailwind ou Partytown dans votre projet, c’est ici qu’il faudra importer et configurer ces intégrations.

Lisez la référence d’API d’Astro pour plus d’informations.

6. Créer votre Fichier tsconfig.json

Titre de la section 6. Créer votre Fichier tsconfig.json

TypeScript est configuré en utilisant tsconfig.json. Même si vous n’écrivez pas de code TypeScript, ce fichier est important afin que les outils comme Astro et VS Code sachent comment comprendre votre projet. Certaines fonctionnalités (comme les imports 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 du template Astro strict or strictest est recommandé. Vous pouvez voir et comparer les trois configurations de template à astro/tsconfigs/.

Créez le fichier 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 template TypeScript) :

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

Enfin, créez `src/env.d.ts“ pour que TypeScript sache des types ambiants disponibles dans votre projet Astro:

src/env.d.ts
/// <reference types="astro/client" />
Lisez le guide d’installation de TypeScript d’Astro pour plus informations.

7. Étapes Suivantes

Titre de la section 7. Étapes Suivantes

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

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

Bien joué, vous êtes prêt à utiliser Astro !

Si vous avez suivi ce guide jusqu’au bout, vous pouvez aller directement à l’Étape 2: Lancer Astro ✨ pour continuer et apprendre comment lancer Astro pour la première fois.