コンテンツにスキップ

RSSフィードを追加する

ここで学ぶことは...

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

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

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

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

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

  1. ターミナルでAstroの開発サーバーを終了し(Ctrl + C)、次のコマンドを実行してAstroのRSSパッケージをインストールします。

    npm install @astrojs/rss
  2. Astroプロジェクトで作業を再開するために、開発サーバーを再起動します。

    npm run dev

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

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

  2. この新しいファイルに以下のコードをコピーします。titledescriptionプロパティをカスタマイズし、必要に応じて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>`,
      });
    }
  3. siteプロパティをAstroの設定に追加し、サイト固有のNetlify URLを指定します。

    import { defineConfig } from "astro/config";
    
    export default defineConfig({
      site: "https://example.com"
    });
  4. http://localhost:4321/rss.xmlにアクセスし、各.mdファイルに対応するitemを含んだページに(フォーマットされていない)テキストが表示されることを確認します。各アイテムには、titleurldescriptionなど、ブログ記事の情報が含まれているはずです。

    :::tip[リーダーでrssフィードを表示する]フィードリーダーをダウンロードするか、オンラインのフィードリーダーサービスにサインアップし、自分のNetlify URLを追加してサイトを購読します。このリンクを他の人に共有すれば、記事に購読し、新しい記事が公開されたときに通知を受け取ってもらうようにもできます。:::

チェックリスト

参考

貢献する コミュニティ スポンサー