RSSフィードの追加

Astroはブログやその他のコンテンツウェブサイト向けに、RSSフィードの高速な自動生成をサポートしています。RSSフィードにより、ユーザーはコンテンツを簡単に購読できます。

@astrojs/rssの準備

セクションタイトル： @astrojs/rssの準備

@astrojs/rssパッケージは、APIエンドポイントを利用したRSS生成のヘルパーを提供します。静的ビルドとSSRアダプターを利用したオンデマンド生成の両方に対応しています。

1. お好きなパッケージマネージャーで@astrojs/rssをインストールします。

npm

npm install @astrojs/rss

pnpm

pnpm add @astrojs/rss

Yarn

yarn add @astrojs/rss

ヒント

プロジェクトのastro.configにsiteを設定していることを確認してください。これはRSSフィード内のリンクを生成するために利用されます。

2. 任意の名前でsrc/pages/に.xml.js拡張子のファイルを作成します。これはフィードの出力URLとして利用されます。一般的なRSSフィードのURL名はfeed.xmlやrss.xmlです。

以下のsrc/pages/rss.xml.jsファイルの例では、site/rss.xmlにRSSフィードを生成します。

3. @astrojs/rssパッケージからrss()ヘルパーを.xml.jsファイルにインポートし、以下のパラメーターでrss()を呼び出した結果を返す関数をエクスポートします。

src/pages/rss.xml.js

import rss from '@astrojs/rss';

export function GET(context) {
  return rss({
    // 出力されるXMLの`<title>`フィールド
    title: 'Buzz’s Blog',
    // 出力されるXMLの`<description>`フィールド
    description: 'A humble Astronaut’s guide to the stars',
    // エンドポイントのコンテキストからプロジェクトの"site"を取得
    // https://docs.astro.build/ja/reference/api-reference/#contextsite
    site: context.site,
    // 出力されるXMLの<item>の
    // コンテンツコレクションやglobインポートを利用した例については「`items`の生成」セクションをご覧ください
    items: [],
    // (任意) カスタムXMLを挿入
    customData: `<language>en-us</language>`,
  });
}

itemsの生成

セクションタイトル： itemsの生成

itemsフィールドは、RSSフィードのオブジェクトのリストを受け入れます。各オブジェクトには、link、title、pubDateの3つの必須フィールドがあります。description（短い抜粋）、content（記事の全文）、ブログ記事の他のフロントマタープロパティなど追加のデータのためのcustomDataフィールド、という3つの値も任意で含められます。

コンテンツコレクションのスキーマからや、src/pages/内のブログ記事に対してglobインポートを利用することで、この配列を生成できます。

コンテンツコレクションの使用

セクションタイトル： コンテンツコレクションの使用

コンテンツコレクションで管理されているページのRSSフィードを作成するには、getCollection()関数を利用してアイテムのリストを取得します。

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,
      customData: post.data.customData,
      // 記事の`slug`からRSSリンクを生成
      // この例では、すべての記事が`/blog/[slug]`ルートでレンダリングされていると仮定しています
      link: `/blog/${post.slug}/`,
    })),
  });
}

オプション：期待されるRSSプロパティを強制するために、既存のブログコレクションスキーマを置き換えます。

すべてのブログエントリが有効なRSSフィードアイテムを生成することを保証するために、スキーマの個別のプロパティを定義する代わりに、rssSchemaをインポートして適用できます。

src/content/config.ts

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

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

export const collections = { blog };

globインポートの使用

セクションタイトル： globインポートの使用

追加： @astrojs/rss@2.1.0

src/pages/内のドキュメントからRSSフィードを作成するには、pagesGlobToRssItems()ヘルパーを利用します。これはimport.meta.globの結果を入力とし、有効なRSSフィードアイテムの配列を出力します（含めるページを指定するためには、globパターンの書き方についてを確認してください）。

注意

この関数は、必要なフィードプロパティが各ドキュメントのフロントマターに存在することを前提としていますが、その検証はおこないません。エラーが発生した場合は、各ページのフロントマターを手動で確認してください。

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}'),
    ),
  });
}

古いバージョンを利用していますか？

v2.1.0より前のバージョンの@astrojs/rssでは、pagesGlobToRssItems()ラッパーなしでglob結果をitemsにそのまま渡します。

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

記事の全文を含める

セクションタイトル： 記事の全文を含める

追加： astro@1.6.14

contentキーには、記事の全文をHTMLとして含めます。これにより、RSSフィードリーダーは記事全文を利用できるようになります。

ヒント

sanitize-htmlなどのパッケージを利用すると、コンテンツが適切にサニタイズ、エスケープ、エンコードされることを保証できます。

コンテンツコレクションを利用する場合は、markdown-itなどの標準的なMarkdownパーサーを利用して記事のbodyをレンダリングし、その結果をサニタイズします。

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.slug}/`,
      // 注: MDXファイルのコンポーネントやJSX式は処理されません。
      content: sanitizeHtml(parser.render(post.body)),
      ...post.data,
    })),
  });
}

Markdownでglobインポートを利用する場合は、compiledContent()ヘルパーを利用してレンダリングされたHTMLを取得しサニタイズできます。この機能はMDXファイルではサポートされていないことに注意してください。

src/pages/rss.xml.js

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

export 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: posts.map((post) => ({
      link: post.url,
      content: sanitizeHtml(post.compiledContent()),
      ...post.frontmatter,
    })),
  });
}

スタイルシートの追加

セクションタイトル： スタイルシートの追加

ブラウザでファイルを見たときのユーザー体験をよくするために、RSSフィードにスタイルを追加しましょう。

rss関数のstylesheetオプションにスタイルシートの絶対パスを指定してください。

rss({
  // 例. "public/rss/styles.xsl"からスタイルシートを利用します
  stylesheet: '/rss/styles.xsl',
  // ...
});

ヒント

スタイルシートを自分で作成したくない場合は、Pretty Feed v3のデフォルトスタイルシートなどの既製のスタイルシートも利用できます。GitHubからスタイルシートをダウンロードし、プロジェクトのpublic/ディレクトリに保存してください。

次のステップ

セクションタイトル： 次のステップ

ブラウザによりyour-domain.com/rss.xmlのフィードにアクセスし、各記事のデータが表示されることを確認できたら、サイトでフィードを宣伝してみましょう。サイトに標準のRSSアイコンを追加すると、読者は自分のフィードリーダーであなたの記事を購読できることに気付けます。

参考

セクションタイトル： 参考

• RSSフィードについて