コンテンツにスキップ

RSSフィードを追加する

ここで学ぶことは…

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

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

セクションタイトル： AstroのRSSパッケージをインストールする

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

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

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

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

    Terminal window
    npm install @astrojs/rss

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

    Terminal window
    npm run dev

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

セクションタイトル： .xmlフィードドキュメントを作成する

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

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

    src/pages/rss.xml.js
    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を指定します。

    astro.config.mjs
    import { defineConfig } from "astro/config";
    

    export default defineConfig({
      site: "https://example.com"
    });

  4. rss.xmlドキュメントはサイトがビルドされたときにのみ作成されるため、開発中にブラウザでこのページを表示することはできません。開発サーバーを終了して次のコマンドを実行し、サイトをローカルでビルドしてから、ビルドしたサイトのプレビューを確認します。

    Terminal window
    npm run build
    

    npm run preview

  5. http://localhost:4321/rss.xmlにアクセスし、各.mdファイルに対応するitemを含んだページに（フォーマットされていない）テキストが表示されることを確認します。各アイテムには、title、url、descriptionなど、ブログ記事の情報が含まれているはずです。

  6. 開発モードでサイトを再び表示したいときは、プレビューを終了して開発サーバーを再起動してください。

チェックリスト

セクションタイトル： チェックリスト

参考

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