Pular para o conteúdo

Adicione um feed RSS

Se prepare para...

  • Instalar um pacote Astro para criar um feed RSS para seu website
  • Criar um feed que pode ser inscrito em e lido por leitores de feeds RSS

Instale o pacote de RSS do Astro

Astro fornece um pacote customizado para rapidamente adicionar um feed RSS ao seu website.

Este pacote oficial gera um documento não-HTML com informação sobre todas as suas postagens do blog que pode ser lido por leitores de feed como Feedly, The Old Reader, e mais. Esse documento é atualizado toda vez que seu site é reconstruído.

Indivíduos podem se inscrever em seu feed em um leitor de feed, e receber uma notificação quando você publicar uma nova postagem do blog no seu site, o que o faz uma funcionalidade popular em blogs.

  1. Feche o servidor de desenvolvimento do Astro e execute o seguinte comando no terminal para instalar o pacote de RSS do Astro.

    Terminal window
    npm install @astrojs/rss
  2. Reinicie o servidor de desenvolvimento para começar a trabalhar no seu projeto Astro novamente.

    Terminal window
    npm run dev

Crie um documento de feed .xml

  1. Crie um novo arquivo em src/pages/ chamado rss.xml.js

  2. Copie o seguinte código nesse novo documento. Customize as propriedades title e description (título e descrição), e se necessário, especifique uma língua diferente em customData:

    src/pages/rss.xml.js
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';
    export async function GET(context) {
    return rss({
    title: 'Aluno de Astro | Blog',
    description: 'Minha jornada aprendendo Astro',
    site: context.site,
    items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
    customData: `<language>pt-br</language>`,
    });
    }
  3. Adicione a propriedade site à configuração do Astro com a sua Netlify URL única.

    astro.config.mjs
    import { defineConfig } from "astro/config";
    export default defineConfig({
    site: "https://example.com"
    });
  4. Esse documento rss.xml é apenas criado quando seu site é construído, então você não será capaz de ver essa página no seu navegador durante o desenvolvimento. Feche o servidor de desenvolvimento e execute os seguintes comandos para primeiro, fazer build do seu site localmente e então, ver uma pré-visualização da sua build:

    Terminal window
    npm run build
    npm run preview
  5. Visite http://localhost:4321/rss.xml e verifique que você pode ver texto (não formatado) na página com um item para cada um dos seus arquivos .md. Cada item deve conter informação sobre a postagem do blog como um title, url, e description.

  6. Certifique-se de fechar a pré-visualização e reiniciar o servidor de desenvolvimento quando você quiser ver seu site em modo de desenvolvimento novamente.

Checklist

Recursos