Créer votre première page Astro

Maintenant que vous savez que les fichiers .astro sont responsables des pages de votre site web, il est temps d’en créer un !

Préparez-vous à…

Créer deux nouvelles pages sur votre site web : À propos et Blog
Ajouter des liens de navigation à vos pages
Déployer une version mise à jour de votre site sur le web

Créer 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 !

Modifier votre page

Modifiez le contenu HTML pour que cette page soit maintenant à propos de vous.

Pour modifier ou ajouter du contenu à votre page « À propos », ajoutez davantage de balises 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.

Essayer par vous-même - Ajouter 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 sont toutes liées les unes aux autres. Il est temps d’ajouter 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 d'Astro</h1>
  <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
</body>

Prévisualisez l’intégralité de votre site en visitant les trois pages dans l’aperçu de votre navigateur et vérifiez que :

Chaque page pointe correctement vers les trois pages
Vos deux nouvelles pages ont chacune leur propre titre
Vos deux nouvelles pages ont chacune leur propre texte de paragraphe

Publier 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 ligne via Netlify.

Lorsque vous êtes satisfait de l’apparence de votre aperçu, validez vos modifications dans 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 code 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é.
Saisissez 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 ligne.

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