RSSフィードを追加する

ここで学ぶことは…

ウェブサイトのRSSフィードを作成するためのAstroパッケージをインストールする
RSSリーダーで購読できるフィードを作成する

AstroのRSSパッケージをインストールする

Astroは、ウェブサイトにRSSフィードを素早く追加するためのカスタムパッケージを提供しています。

この公式パッケージは、Feedly、The Old Readerなどのフィードリーダーで読むことができる、ブログ記事に関する情報を含んだHTMLではないドキュメントを生成します。このドキュメントは、サイトがビルドされるたびに更新されます。

個々人はフィードリーダーでフィードを購読でき、サイトに新しいブログ記事が公開されると通知を受け取ることができるため、多くの人がこの機能を利用しています。

Astroの開発サーバーを終了し、ターミナルで次のコマンドを実行して、AstroのRSSパッケージをインストールします。
- npm
- pnpm
- Yarn
Terminal window
npm install @astrojs/rss
Terminal window
pnpm add @astrojs/rss
Terminal window
yarn add @astrojs/rss
Astroプロジェクトで作業を再開するために、開発サーバーを再起動します。
- npm
- pnpm
- Yarn
Terminal window
npm run dev
Terminal window
pnpm run dev
Terminal window
yarn run dev

`.xml`フィードドキュメントを作成する

src/pages/にrss.xml.jsという名前の新しいファイルを作成します。

この新しいファイルに以下のコードをコピーします。titleとdescriptionプロパティをカスタマイズし、必要に応じてcustomDataで別の言語を指定してください。

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

export async function GET(context) {
  return rss({
    title: 'Astro学習者 | ブログ',
    description: 'Astroを学ぶ旅',
    site: context.site,
    items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
    customData: `<language>ja-jp</language>`,
  });
}

siteプロパティをAstroの設定に追加し、サイト固有のNetlify URLを指定します。
astro.config.mjs
```
import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://example.com"
});
```
rss.xmlドキュメントはサイトがビルドされたときにのみ作成されるため、開発中にブラウザでこのページを表示することはできません。開発サーバーを終了して次のコマンドを実行し、サイトをローカルでビルドしてから、ビルドしたサイトのプレビューを確認します。
- npm
- pnpm
- Yarn
Terminal window
npm run build npm run preview
Terminal window
pnpm run build pnpm run preview
Terminal window
yarn run build yarn run preview
http://localhost:4321/rss.xmlにアクセスし、各.mdファイルに対応するitemを含んだページに（フォーマットされていない）テキストが表示されることを確認します。各アイテムには、title、url、descriptionなど、ブログ記事の情報が含まれているはずです。

フィードリーダーをダウンロードするか、オンラインのフィードリーダーサービスにサインアップし、自分のNetlify URLを追加してサイトを購読します。このリンクを他の人に共有すれば、記事に購読し、新しい記事が公開されたときに通知を受け取ってもらうようにもできます。
開発モードでサイトを再び表示したいときは、プレビューを終了して開発サーバーを再起動してください。