お茶を凍らせる色、チャコール。DE-TEIUです。

このブログにRSSフィード機能を追加しました。

Astroでの実装

Astro公式のドキュメントの通りにやるだけです。簡単。

@astrojs/rssのインストール

Astroには公式から提供されているRSSフィード作成用ライブラリがあるので、これをそのまま使います。はいインストール。

npm install @astrojs/rss

RSSフィード生成用のファイルを作成

src/pages/rss.xml.tsというファイルを作成します。 このファイルを用意するだけで、ブログをビルドした際に “/rss.xml”というパスでrssフィードが取得できるようになります。

import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";

export async function GET(context: { site: any }) {
  const posts = await getCollection("blog");
  // 記事は念のため日付が新しいもの順に並べておく
  const sortedPosts = posts.sort(
    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
  );
  return rss({
    title: SITE_TITLE,
    description: SITE_DESCRIPTION,
    site: context.site,
    items: sortedPosts.map((post) => ({
      ...post.data,
      link: `/blog/${post.id}/`,
    })),
    customData: `<language>ja</language>`, // xmlに言語設定(languageタグ)を出力する
  });
}

HTMLのにRSSリンクを追加

RSSリーダーが自動検出できるように、各ページのにRSSフィードへのリンクを追加します。

<link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={new URL("/rss.xml", Astro.site)} />

あとはサイトのヘッダーとフッターにRSSフィードのリンクアイコンを設置して完了。

---