Skip to content
if/Wiki

Utilisation du framework Astro

Si besoin, visiter la documentation officielle.

Pré-requis

Mise à jour des miroirs

Saisissez la commande ci-dessous dans Ubuntu:

Terminal window
sudo apt update

Node JS

Installez curl:

Terminal window
sudo apt-get install curl

Installez nvm puis la dernière version LTS de Node.js:

Terminal window
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install --lts
nvm use --lts

VSCode

Installez Visual Studio Code depuis le site Internet officiel.

Dans la fenêtre de setup cochez la case pour ajouter VS Code à PATH.

Git

Saisissez la commande suivante dans Ubuntu:

Terminal window
sudo apt install git -y

Installer et configurer Astro

Allez dans votre répertoire de projets (si vous n’en avez pas, créez en un).

Saisissez la commande suivante dans Ubuntu (l’installation peut parfois être longue):

Terminal window
npm create astro@latest

Puis répondez au questionnaire suivant vos préférences dans le Terminal.

Initialiser un projet

Créez un nouveau dossier pour votre projet Astro.

Une fois dans le dossier, saisissez la commande suivante pour ouvrir VSCode:

Terminal window
code .

Dans VSCode, cliquez sur “Terminal>Nouveau Terminal” dans la barre des tâches en haut à gauche.

Une fois dans le terminal, saisissez la commande ci-dessous:

Terminal window
npm run dev

Le terminal vous donnera un lien d’accès vers votre localhost en bleu sous la forme http://localhost:4321/, appuyez sur Ctrl + Clic gauche pour y acceder.

Télécharger un thème Astro

Démarrez votre localhost (avec npm run dev), cliquez sur l’onglet “Theme” pour choisir des thèmes de démarrage.

Une fois le thème choisi, cliquez sur “Démarrer”.

Sur GitHub, cliquez sur ” Code “puis sur ” SSH ” pour copier L’URL du repository.

Sur Ubuntu, saisissez cette commande (avec l’URL copiée):

Terminal window
git clone git@github.com:onwidget/astrowind.git

Créer un fichier de documentation

Pour créer une nouvelle documentation, créez un nouveau fichier dans “guides”, ou “références” (avec l’extension .md).

Pour qu’Astro supporte la mise en page du document, recopiez le frontmatter en haut de chaque document que vous créez:

---
title: Guide Astro
description: Description du guide.
---

Vous pouvez maintenant ajouter votre contenu dans le nouveau fichier.

Allez dans le fichier astro.config.mjs, puis cherchez vos documents dans les sections

label: 'Guides'

ou

label: 'References'

Si vous ne les voyez pas, ajoutez les manuellement avec ce format:

{ label: 'Installation d\'Astro', slug: 'guides/doc_astro' },

Le slug est le chemin d’accès du ficher à partir du dossier “guides”.

Remarques

Pour un guide sur l’utilisation de Git, voir le guide “Workflow avec Git”.

Attention, tous les thèmes Astro ne sont pas compatibles avec le markdown.