Añadir un feed RSS

Prepárate para...

• Instalar un paquete de Astro para crear un feed RSS para tu sitio web
• Crear un feed que pueda ser suscrito y leído por lectores de RSS.

Instala el paquete RSS de Astro

Sección titulada Instala el paquete RSS de Astro

Astro ofrece un paquete personalizado para agregar rápidamente un feed RSS a tu sitio web.

Este paquete oficial genera un documento no HTML con información sobre todas las entradas de tu blog que puede ser leído por lectores de feeds como Feedly, The Old Reader, y más. Este documento se actualiza cada vez que se reconstruye tu sitio.

Las personas pueden suscribirse a tu feed en un lector de feeds y recibir una notificación cuando publiques una nueva entrada en tu sitio, lo que lo convierte en una función muy popular de los blogs.

1. Sal del servidor de desarrollo de Astro y ejecuta el siguiente comando en el terminal para instalar el paquete RSS de Astro.

   npm

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

2. Reinicia el servidor de desarrollo para empezar a trabajar de nuevo en tu proyecto de Astro.

   npm

   npm run dev

   pnpm

   pnpm run dev

   Yarn

   yarn run dev

Crea un documento de feed .xml

Sección titulada Crea un documento de feed .xml

1. Crea un nuevo fichero en src/pages/ llamado rss.xml.js.

2. Copia el siguiente código en este nuevo documento. Personaliza las propiedades title y description y si es necesario, especifica un idioma diferente en customData:

   src/pages/rss.xml.js

   import rss, { pagesGlobToRssItems } from '@astrojs/rss';
   
   export async function GET(context) {
     return rss({
       title: 'Alumno de Astro | Blog',
       description: 'Mi viaje de aprendizaje de Astro',
       site: context.site,
       items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
       customData: `<language>en-us</language>`,
     });
   }

3. Agrega la propiedad site al archivo de configuración de Astro con el URL único de tu sitio Netlify.

   astro.config.mjs

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

4. Este documento rss.xml sólo se crea cuando se construye tu sitio web, por lo que no podrás ver esta página en tu navegador durante el desarrollo. Cierra el servidor de desarrollo y ejecuta los siguientes comandos para, en primer lugar, construir tu sitio localmente y, a continuación, ver una vista previa de tu construcción:

   npm

   npm run build
   
   npm run preview

   pnpm

   pnpm run build
   
   pnpm run preview

   Yarn

   yarn run build
   
   yarn run preview

5. Visita http://localhost:4321/rss.xml y comprueba que puedes ver texto (sin formato) en la página con un item para cada uno de tus archivos .md. Cada elemento debe contener información sobre la entrada del blog, como title, url y description.

   Ver tu feed RSS en un lector

   Descarga un lector de feeds, o regístrate en un servicio de lector de feeds online y suscríbete a tu sitio añadiendo tu propia URL de Netlify. También puedes compartir este enlace con otras personas para que puedan suscribirse a tus entradas y recibir una notificación cuando se publique una nueva.

6. Asegúrate de salir de la vista previa y reiniciar el servidor de desarrollo cuando desees volver a ver tu sitio en modo de desarrollo.

Checklist

Sección titulada Checklist

• Puedo instalar un paquete de Astro utilizando la línea de comandos.
• Puedo crear un feed RSS para mi sitio web.

Recursos

Sección titulada Recursos

• Generación de elementos RSS en Astro