Aller au contenu
Astro Astro

Créez votre première page Astro

Maintenant que vous savez que les fichiers .astro sont responsables des pages de votre site web, créons-en un !

Préparez-vous à…

  • Créez deux nouvelles pages sur votre site web : À propos et Blog
  • Ajoutez des liens de navigation vers vos pages
  • Déployez une version mise à jour de votre site sur le web

Créez un nouveau fichier .astro

  1. Dans le volet des fichiers de votre éditeur de code, accédez au dossier src/pages/ où vous verrez le fichier existant index.astro.

  2. Dans ce même dossier, créez un nouveau fichier nommé about.astro.

  3. Copiez ou saisissez à nouveau le contenu de index.astro dans votre nouveau fichier about.astro.

  4. Ajoutez /about à la fin de l’URL de prévisualisation de votre site dans la barre d’adresse et vérifiez que vous pouvez voir une page se charger à cet endroit (par exemple, http://localhost:4321/about).

À l’heure actuelle, votre page “À propos” devrait être exactement la même que la première page, mais nous allons changer cela !

Modifiez votre page

Modifiez le contenu HTML pour faire de cette page une page vous concernant.

Pour modifier ou ajouter du contenu à votre page “À propos”, ajoutez davantage de balises d’éléments HTML contenant du contenu. Vous pouvez copier et coller le code HTML ci-dessous entre les balises <body></body> existantes ou créer le vôtre.

src/pages/about.astro
<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>


  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>


  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>

Maintenant, visitez à nouveau votre page /about dans l’onglet de votre navigateur, et vous devriez voir votre contenu mis à jour.

Ajoutez des liens de navigation

Pour faciliter la prévisualisation de toutes vos pages, ajoutez des liens de navigation de page HTML avant votre <h1> en haut de vos deux pages (index.astro et about.astro) :

src/pages/about.astro
<a href="/">Accueil</a>
<a href="/about/">À propos</a>


<h1>About Me</h1>
<h2>... and my new Astro site!</h2>

Vérifiez que vous pouvez cliquer sur ces liens pour passer d’une page à l’autre sur votre site.

Essayez par vous-même - Ajoutez une page Blog

Ajoutez une troisième page blog.astro à votre site, en suivant les mêmes étapes que ci-dessus.

(N’oubliez pas d’ajouter un troisième lien de navigation sur chaque page.)

Montrez-moi les étapes.
  1. Créez un nouveau fichier à src/pages/blog.astro.
  2. Copiez l’intégralité du contenu de index.astro et collez-le dans blog.astro.
  3. Ajoutez un troisième lien de navigation en haut de chaque page :
src/pages/index.astro
<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>


  <h1>My Astro Site</h1>
</body>

Vous devriez maintenant avoir un site web avec trois pages qui se lient toutes les unes aux autres. Ajoutons du contenu à la page Blog.

Mettez à jour le contenu de la page blog.astro avec :

src/pages/blog.astro
<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>


  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>C'est ici que je posterai sur mon apprentissage d'Astro.</p>
</body>

Prévisualisez l’ensemble de votre site en visitant les trois pages dans votre prévisualisation de navigateur et vérifiez que :

  • Chaque page pointe correctement vers les trois pages
  • Vos deux nouvelles pages ont chacune leur propre en-tête descriptif
  • Vos deux nouvelles pages ont chacune leur propre texte de paragraphe

Publiez vos modifications sur le web

Si vous avez suivi notre configuration dans l’Unité 1, vous pouvez publier vos modifications sur votre site web en direct via Netlify.

Lorsque vous êtes satisfait de l’apparence de votre prévisualisation, validez vos modifications sur votre dépôt en ligne sur GitHub.

  1. Dans VS Code, prévisualisez les fichiers qui ont changé depuis votre dernier commit sur GitHub.

    • Allez dans l’onglet Contrôle de source dans le menu de gauche. Il devrait afficher un petit “3”.

    • Vous devriez voir index.astro, about.astro, et blog.astro listés comme des fichiers qui ont changé.

  2. Entrez un message de commit (par exemple, “Ajout de deux nouvelles pages - à propos et blog”) dans la zone de texte, puis appuyez sur Ctrl + Entrée (macOS : Cmd ⌘ + Entrée) pour valider la modification dans votre espace de travail actuel.

  3. Cliquez sur le bouton Synchroniser les modifications vers GitHub.

  4. Après avoir attendu quelques minutes, visitez votre URL Netlify pour vérifier que vos modifications sont publiées en direct.

Liste de contrôle

Ressources