Ajouter un flux RSS

Préparez-vous à…

• Installez un package Astro pour créer un flux RSS pour votre site web.
• Créez un flux pouvant être souscrit et lu par des lecteurs de flux RSS.

Installez le package RSS d’Astro

Titre de la section Installez le package RSS d’Astro

Astro propose un package personnalisé pour ajouter rapidement un flux RSS à votre site web.

Ce package officiel génère un document non-HTML avec des informations sur tous vos articles de blog, pouvant être lu par des lecteurs de flux, tels que Feedly, The Old Reader, et plus encore. Ce document est mis à jour à chaque reconstruction de votre site.

Les personnes peuvent s’abonner à votre flux dans un lecteur de flux et recevoir une notification lorsque vous publiez un nouvel article de blog sur votre site, ce qui en fait une fonctionnalité de blog populaire.

1. Quittez le serveur de développement Astro et exécutez la commande suivante dans le terminal pour installer le package RSS d’Astro.

   npm

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

2. Redémarrez le serveur de développement pour continuer à travailler sur votre projet Astro.

   npm

   npm run dev

   pnpm

   pnpm run dev

   Yarn

   yarn run dev

Créez un document .xml de flux

Titre de la section Créez un document .xml de flux

1. Créez un nouveau fichier dans src/pages/ appelé rss.xml.js.

2. Copiez le code suivant dans ce nouveau document. Personnalisez les propriétés title et description, et si nécessaire, spécifiez une langue différente dans customData :

   src/pages/rss.xml.js

   import rss, { pagesGlobToRssItems } from '@astrojs/rss';
   
   export async function GET(context) {
     return rss({
       title: 'Astro Learner | Blog',
       description: 'Mon voyage d'apprentissage d'Astro',
       site: context.site,
       items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
       customData: `<language>fr-fr</language>`,
     });
   }

3. Ajoutez la propriété site à la configuration Astro avec l’URL Netlify unique de votre site.

   astro.config.mjs

   import { defineConfig } from "astro/config";
   
   export default defineConfig({
     site: "https://example.com"
   });

4. Ce document rss.xml n’est créé que lorsque votre site est construit, vous ne pourrez donc pas voir cette page dans votre navigateur pendant le développement. Quittez le serveur de développement et exécutez les commandes suivantes pour d’abord construire votre site localement, puis afficher un aperçu de votre construction :

   npm

   npm run build
   
   npm run preview

   pnpm

   pnpm run build
   
   pnpm run preview

   Yarn

   yarn run build
   
   yarn run preview

5. Visitez http://localhost:4321/rss.xml et vérifiez que vous pouvez voir du texte (non formaté) sur la page avec un item pour chacun de vos fichiers .md. Chaque élément devrait contenir des informations sur les articles de blog telles que title, url et description.

   Consultez votre flux RSS dans un lecteur

   Téléchargez un lecteur de flux, ou inscrivez-vous à un service de lecteur de flux en ligne et abonnez-vous à votre site en ajoutant votre propre URL Netlify. Vous pouvez également partager ce lien avec d’autres personnes afin qu’elles puissent s’abonner à vos articles et être notifiées lorsqu’un nouveau est publié.

6. Assurez-vous de quitter l’aperçu et de redémarrer le serveur de développement lorsque vous souhaitez voir votre site en mode développement à nouveau.

Liste de vérification

Titre de la section Liste de vérification

• Je peux installer un package Astro en utilisant la ligne de commande.
• Je peux créer un flux RSS pour mon site web.

Ressources

Titre de la section Ressources

• Génération d’éléments RSS dans Astro