4.mdx

type	title	i18nReady	description
tutorial	Añadir un feed RSS	true	Tutorial: Crea tu primer blog con Astro — Instala el paquete oficial de Astro para crear un feed al que tus lectores puedan suscribirse

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components';

- 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

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.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install @astrojs/rss
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add @astrojs/rss
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add @astrojs/rss
  ```
  </Fragment>
</PackageManagerTabs>

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

   ```shell npm run dev ``` ```shell pnpm run dev ``` ```shell yarn run dev ```

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:

   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.

   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:

   ```shell npm run build

   npm run preview

   </Fragment>
   <Fragment slot="pnpm">
   ```shell
   pnpm run build
   
   pnpm run preview
   

   ```shell yarn run build

   yarn run preview

   </Fragment>
   </PackageManagerTabs>
   
   

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.

   :::tip[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

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

Recursos

• Generación de elementos RSS en Astro