Añadir un RSS feed

Astro soporta la generación rápida y automática de RSS feeds para blogs y otros sitios web de contenido. Los RSS feeds proporcionan una forma fácil para que los usuarios se suscriban a tu contenido.

Configurando @astrojs/rss

El paquete @astrojs/rss proporciona helpers para generar RSS feeds usando API endpoints. Esto desbloquea tanto builds estáticos como generación on-demand cuando se usa un SSR adapter.

1. Instala @astrojs/rss usando tu gestor de paquetes preferido:

   npm

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

   Consejo

   Asegúrate de haber configurado un site en el astro.config de tu proyecto. Esto se usará para generar enlaces a tus artículos RSS.

2. Crea un archivo en src/pages/ con un nombre de tu elección y la extensión .xml.js para usarlo como la URL de salida de tu feed. Algunos nombres comunes de URL de RSS feed son feed.xml o rss.xml.

   El archivo de ejemplo siguiente src/pages/rss.xml.js creará un RSS feed en site/rss.xml.

3. Importa el helper rss() del paquete @astrojs/rss a tu archivo .xml.js y exporta una función que lo devuelva usando los siguientes parámetros:

   src/pages/rss.xml.js

   import rss from '@astrojs/rss';
   
   export function GET(context) {
     return rss({
       // `<title>` field in output xml
       title: 'Buzz’s Blog',
       // `<description>` field in output xml
       description: 'A humble Astronaut’s guide to the stars',
       // Pull in your project "site" from the endpoint context
       // https://docs.astro.build/en/reference/api-reference/#site
       site: context.site,
       // Array of `<item>`s in output xml
       // See "Generating items" section for examples using content collections and glob imports
       items: [],
       // (optional) inject custom xml
       customData: `<language>en-us</language>`,
     });
   }

Consulta el README de @astrojs/rss para la referencia completa de configuración.

Generando items

El campo items acepta una lista de objetos de RSS feed, que pueden generarse desde entradas de content collections usando getCollection() o desde tus archivos de página usando pagesGlobToRssItems().

El formato estándar de RSS feed incluye metadatos para cada elemento publicado, incluyendo valores como:

• title: El título de la entrada. Opcional solo si se establece una description. De lo contrario, obligatorio.
• description: Un extracto breve de o describiendo la entrada. Opcional solo si se establece un title. De lo contrario, obligatorio.
• link: Una URL a la fuente original de la entrada. (opcional)
• pubDate: La fecha de publicación de la entrada. (opcional)
• content: El contenido completo de tu post. (opcional)

Consulta la referencia de configuración de items para una lista completa de opciones.

Usar content collections

Para crear un RSS feed de páginas gestionadas en content collections, usa la función getCollection() para obtener los datos requeridos para tu array de items. Necesitarás especificar los valores para cada propiedad deseada (ej. title, description) de los datos devueltos.

src/pages/rss.xml.js

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const blog = await getCollection('blog');
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    items: blog.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      // Compute RSS link from post `id`
      // This example assumes all posts are rendered as `/blog/[id]` routes
      link: `/blog/${post.id}/`,
    })),
  });
}

Opcional: reemplaza el schema existente de tu colección de blog para forzar las propiedades RSS esperadas.

Para asegurar que cada entrada de blog produzca un item válido de RSS feed, puedes opcionalmente importar y aplicar rssSchema en lugar de definir cada propiedad individual de tu schema.

src/content.config.ts

import { defineCollection } from 'astro:content';
import { rssSchema } from '@astrojs/rss';

const blog = defineCollection({
  schema: rssSchema,
});

export const collections = { blog };

Usar glob imports

Añadido en: @astrojs/rss@2.1.0

Para crear un RSS feed desde documentos en src/pages/, usa el helper pagesGlobToRssItems(). Este acepta un resultado de import.meta.glob y devuelve un array de items válidos de RSS feed (consulta más sobre cómo escribir glob patterns para especificar qué páginas incluir).

Precaución

Esta función asume, pero no verifica, que todas las propiedades necesarias del feed están presentes en el frontmatter de cada documento. Si encuentras errores, verifica el frontmatter de cada página manualmente.

src/pages/rss.xml.js

import rss, { pagesGlobToRssItems } from '@astrojs/rss';

export async function GET(context) {
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    items: await pagesGlobToRssItems(
      import.meta.glob('./blog/*.{md,mdx}'),
    ),
  });
}

¿Usas una versión anterior?

En versiones de @astrojs/rss anteriores a v2.1.0, pasa tu resultado de glob directamente a items sin el wrapper pagesGlobToRssItems():

items: import.meta.glob('./blog/*.{md,mdx}'),

Este método está deprecado para todas las versiones de Astro desde v2.1.0, y no puede usarse en proyectos modernos.

Incluir el contenido completo del post

Añadido en: astro@1.6.14

Establece la clave content en rss.items para proporcionar el contenido completo de un post como HTML. Esto permite a @astrojs/rss hacer que el texto completo en Markdown de tu post esté disponible para los lectores de RSS feed. Las imágenes y enlaces con rutas URL completas también son soportados. Sin embargo, las imágenes y enlaces internos a otras páginas usando rutas relativas no lo son.

Al renderizar el contenido completo del post, tendrás que considerar imágenes, enlaces relativos, estilos, scripts, y otros elementos más allá del texto Markdown estándar que puedas tener en tus posts. Puede que necesites incluir lógica adicional en tu endpoint src/pages/rss.xml.js para tener en cuenta estos elementos, o para eliminar elementos que son innecesarios para un RSS feed (ej. aquellos que se usan solo para estilos o interacción en tu sitio web).

Puedes ver una implementación específica de la comunidad que aborda algunas de estas preocupaciones como ejemplo de cómo proceder.

Consejo

Un paquete como sanitize-html se asegurará de que tu contenido esté correctamente saneado, escapado y codificado. En el proceso, dicho paquete también podría eliminar algunos elementos y atributos inofensivos, así que asegúrate de verificar la salida y configurar el paquete según tus necesidades.

Al usar content collections, renderiza el body del post usando un parser de Markdown estándar como markdown-it y sanea el resultado, incluyendo cualquier etiqueta extra (ej. <img>) necesaria para renderizar tu contenido:

src/pages/rss.xml.js

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
const parser = new MarkdownIt();

export async function GET(context) {
  const blog = await getCollection('blog');
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    items: blog.map((post) => ({
      link: `/blog/${post.id}/`,
      // Note: this will not process components or JSX expressions in MDX files.
      content: sanitizeHtml(parser.render(post.body), {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
      }),
      ...post.data,
    })),
  });
}

Al usar glob imports con Markdown, puedes usar el helper compiledContent() para obtener el HTML renderizado para saneamiento. Nota: esta funcionalidad no es soportada para archivos MDX.

src/pages/rss.xml.js

import rss from '@astrojs/rss';
import sanitizeHtml from 'sanitize-html';

export async function GET(context) {
  const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
  const posts = Object.values(postImportResult);
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    items: await Promise.all(posts.map(async (post) => ({
      link: post.url,
      content: sanitizeHtml((await post.compiledContent())),
      ...post.frontmatter,
    }))),
  });
}

Eliminar las barras diagonales finales

El RSS feed de Astro produce enlaces con una barra diagonal final por defecto, sin importar el valor que hayas configurado para trailingSlash. Esto significa que tus enlaces RSS pueden no coincidir exactamente con las URLs de tus posts.

Si has establecido trailingSlash: "never" en tu astro.config.mjs, establece trailingSlash: false en el helper rss() para que tu feed coincida con la configuración de tu proyecto.

src/pages/rss.xml.js

import rss from '@astrojs/rss';

export function GET(context) {
  const posts = Object.values(postImportResult);
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    trailingSlash: false,
    items: posts.map((post) => ({
      link: post.url,
      ...post.frontmatter,
    })),
  });
}

Añadir una hoja de estilos

Estiliza tu RSS feed para una experiencia de usuario más agradable al ver el archivo en tu navegador.

Usa la opción stylesheet de la función rss para especificar una ruta absoluta a tu hoja de estilos.

rss({
  // ex. use your stylesheet from "public/rss/styles.xsl"
  stylesheet: '/rss/styles.xsl',
  // ...
});

Consejo

Si prefieres no crear tu propia hoja de estilos, puedes usar una hoja de estilos prefabricada como la hoja de estilos por defecto Pretty Feed v3. Descarga la hoja de estilos desde GitHub y guárdala en el directorio public/ de tu proyecto.

Habilitar el autodescubrimiento de RSS feed

El autodescubrimiento de RSS permite a los navegadores y otro software encontrar automáticamente el RSS feed de un sitio desde la URL principal.

Para habilitarlo, añade una etiqueta <link> con los siguientes atributos al elemento head de tu sitio:

<link
    rel="alternate"
    type="application/rss+xml"
    title="Your Site's Title"
    href={new URL("rss.xml", Astro.site)}
/>

Con esta etiqueta, los lectores de tu blog pueden ingresar la URL base de tu sitio en su lector RSS para suscribirse a tus posts sin necesidad de la URL específica de tu RSS feed.

Siguientes pasos

Después de visitar tu feed en el navegador en your-domain.com/rss.xml y confirmar que puedes ver datos para cada uno de tus posts, ahora puedes promocionar tu feed en tu sitio web. Añadir el icono estándar de RSS a tu sitio le hace saber a tus lectores que pueden suscribirse a tus posts en su propio lector de feeds.

Recursos

• RSS Feeds