Installer Astro manuellement
Ce guide vous montrera comment installer et configurer manuellement un nouveau projet Astro.
Prérequis
Titre de la section Prérequis- Node.js - version
v18.17.1ouv20.3.0ou supérieur. (v19n’est pas supportée.) - É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 InstallationSi 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épertoireCréez un répertoire vide avec le nom de votre projet, puis naviguez dans celui-ci.
mkdir my-astro-projectcd my-astro-projectMaintenant 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.
npm init --yespnpm inityarn init --yes2. Installer Astro
Titre de la section 2. Installer AstroD’abord, installez les dépendances d’Astro dans votre projet.
npm install astropnpm add astroyarn add astroEnsuite, remplacez la section “scripts” de votre package.json par les lignes suivantes :
"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 PageDans 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 :
---// 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 StatiqueVous 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 :
# Exemple: Autorisez tous les robots à parcourir et indexer votre site.# Syntaxe Complète: https://developers.google.com/search/docs/advanced/robots/create-robots-txtUser-agent: *Allow: /5. Créez votre Fichier astro.config.mjs
Titre de la section 5. Créez votre Fichier astro.config.mjsAstro 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 :
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.
6. Créer votre Fichier tsconfig.json
Titre de la section 6. Créer votre Fichier tsconfig.jsonTypeScript 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) :
{ "extends": "astro/tsconfigs/base"}Enfin, créez `src/env.d.ts“ pour que TypeScript sache des types ambiants disponibles dans votre projet Astro:
/// <reference types="astro/client" />7. Étapes Suivantes
Titre de la section 7. Étapes SuivantesSi 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.
Learn