RSSフィードを追加する
ここで学ぶことは...
- ウェブサイトのRSSフィードを作成するためのAstroパッケージをインストールする
- RSSリーダーで購読できるフィードを作成する
AstroのRSSパッケージをインストールする
Astroは、ウェブサイトにRSSフィードを素早く追加するためのカスタムパッケージを提供しています。
この公式パッケージは、Feedly、The Old Readerなどのフィードリーダーで読むことができる、ブログ記事に関する情報を含んだHTMLではないドキュメントを生成します。このドキュメントは、サイトがビルドされるたびに更新されます。
個々人はフィードリーダーでフィードを購読でき、サイトに新しいブログ記事が公開されると通知を受け取ることができるため、多くの人がこの機能を利用しています。
ターミナルでAstroの開発サーバーを終了し(Ctrl + C)、次のコマンドを実行してAstroのRSSパッケージをインストールします。
npm install @astrojs/rsspnpm add @astrojs/rssyarn add @astrojs/rssAstroプロジェクトで作業を再開するために、開発サーバーを再起動します。
npm run devpnpm run devyarn 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を指定します。import { defineConfig } from "astro/config"; export default defineConfig({ site: "https://example.com" });http://localhost:4321/rss.xmlにアクセスし、各.mdファイルに対応するitemを含んだページに(フォーマットされていない)テキストが表示されることを確認します。各アイテムには、title、url、descriptionなど、ブログ記事の情報が含まれているはずです。:::tip[リーダーでrssフィードを表示する]フィードリーダーをダウンロードするか、オンラインのフィードリーダーサービスにサインアップし、自分のNetlify URLを追加してサイトを購読します。このリンクを他の人に共有すれば、記事に購読し、新しい記事が公開されたときに通知を受け取ってもらうようにもできます。:::