Saltearse al contenido

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.

    Ventana de terminal
    npm install @astrojs/rss

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

    Ventana de terminal
    npm 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:

    Ventana de terminal
    npm run build
    

    npm 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.

  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

Recursos

Sección titulada Recursos