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`

Dans le volet des fichiers de votre éditeur de code, accédez au dossier src/pages/ où vous verrez le fichier existant index.astro.
Dans ce même dossier, créez un nouveau fichier nommé about.astro.
Copiez ou saisissez à nouveau le contenu de index.astro dans votre nouveau fichier about.astro.

Votre éditeur peut afficher un cercle blanc plein sur l’étiquette de l’onglet de ce fichier. Cela signifie que le fichier n’est pas encore enregistré. Sous le menu Fichier de VS Code, activez “Enregistrement automatique” et vous n’aurez plus besoin d’enregistrer manuellement les fichiers.
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.

<body>
  <h1>Mon site Astro</h1>
  <h1>À propos de moi</h1>
  <h2>... et de mon nouveau site Astro !</h2>

  <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

  <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
</body>

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

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) :

<a href="/">Accueil</a>
<a href="/about/">À propos</a>

<h1>À propos de moi</h1>
<h2>... et de mon nouveau site Astro !</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.

Créez un nouveau fichier à src/pages/blog.astro.
Copiez l’intégralité du contenu de index.astro et collez-le dans blog.astro.
Ajoutez un troisième lien de navigation en haut de chaque page :

<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>

  <h1>Mon site Astro</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 :

<body>
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>

  <h1>Mon site Astro</h1>
  <h1>Mon blog d'apprentissage Astro</h1>
  <p>Voici où je vais publier mon parcours d'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.

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é.
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.
Cliquez sur le bouton Synchroniser les modifications vers GitHub.
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

Je peux créer une nouvelle page pour mon site web et y ajouter un lien depuis une page existante.
Je peux valider mes modifications sur GitHub et mettre à jour mon site en direct sur Netlify.

Ressources

Contribuer Communauté Parrainer