C’est pendant que je cherchais une solution pour créer le site web de Clever Tech Ware que je suis tombé sur Astro. Pour dire la vérité, au début, j’étais parti pour utiliser Hugo, un générateur de site statique en Go, mais la personalisation d’un thème, que je trouvais intéressant, me paraissait un peu compliqué. Bien que j’allais continuer de persévérer pour utiliser Hugo, je suis tombé par hasard sur un tweet d’une personne expliquant qu’il avait créé son site avec Astro. J’ai donc décidé de jeter un coup d’oeil à ce framework.

Pourquoi utiliser Hugo ou Astro et pas Wordpress ?

Pour ce projet, je partais du principe que je souhaitais réaliser un site avec un blog associé. Etant à l’aise avec le markdown, je souhaitais pouvoir écrire mes articles dans ce format et les versionner à l’aide d’un SCM tel que GIT.

C’est pourquoi mon tout premier choix s’était porté sur Hugo. J’en avais beaucoup entendu parler, d’autant plus que faisant du Go, c’est souvent le projet exemple utilisé par la bibliothèque de gestion de commande en CLI que j’ utilise : Cobra.

En découvrant Astro, j’ai vite été séduit par le fait que je pouvais réaliser à la fois un site statique et dynamique mélangeant à la fois du Markdown et des composants Astro focalisés sur la présentation de contenu, intégrable avec d’autres frameworks web telle que React.

Getting started

Pour commencer, je vous invite à suivre le guide d’installation:

$ npm create astro@latest
Need to install the following packages:
  create-astro@3.1.13
Ok to proceed? (y) y

╭─────╮  Houston:
│ ◠ ◡ ◠  Let's create something unique!
╰─────╯

 astro   v2.10.7 Launch sequence initiated.

   dir   Where should we create your new project?
         ./starry-star

  tmpl   How would you like to start your new project?
         Include sample files
      ✔  Template copied

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with npm...
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./starry-star
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

Ensuite plus qu’à lancer l’application avec un petit :

$ npm start

> starry-star@0.0.1 start
> astro dev

  🚀  astro  v2.10.7 started in 53ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

Et voilà 🙂

Démarrage d'astro build

À partir de là, il n’y a plus qu’à se laisser guider par la documentation et faire nos premiers ajustements.

Premiers pas avec Astro

Intuitivement, on démarre par suivre la 1ʳᵉ instruction nous invitant à modifier le titre de la page d’accueil :

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout title="Astro build discovery."> <!-- <Layout title="Welcome to Astro."> -->
    <main>
    ....
        <!-- <h1>Welcome to <span class="text-gradient">Astro</span></h1> -->
        <h1>Astro build <span class="text-gradient">discovery</span></h1>
    ....
    </main>
</Layout>
<style>
main {
        margin: auto;
        padding: 1rem;
        width: 800px;
        max-width: calc(100% - 2rem);
        color: white;
        font-size: 20px;
        line-height: 1.6;
}
</style>

On peut voir que le fichier index.astro est composé de 3 parties :

  • import qui permet d’importer des composants Astro, du javascript ou du CSS,
  • vue qui permet de définir le template associé à la page,
  • style qui permet de définir le style de la page.

Ce qui est intéressant, c’est qu’on peut composer notre page avec des composants Astro. Par exemple, on peut créer un Layout facilement, ce que propose par défaut Astro 😊.

Ensuite Astro nous invite à suivre :

  • la documentation pour en apprendre plus sur les composants Astro,
  • l’intégration avec d’autres frameworks web tels que React, Vue ou Svelte, tailwind, etc,
  • le theming en nous laissant explorer des thèmes existants (gratuit ou payant),
  • rejoindre la communité sur discord

Désormais, c’est à vous de jouer !

Je vous expliquerai dans un prochain post comment j’ai utilisé à titre personnel Astro pour créer le site web de Clever Tech Ware 🚀