Zenn
👌

Astroチュートリアルメモ その5-4【パッケージでRSSフィード】

2022/11/08に公開
Astro
tech

Astroにも公式パッケージが存在する。

今回使うのはRSSフィードを作るパッケージ@astrojs/rss。

https://docs.astro.build/en/tutorial/5-astro-api/4/

開発サーバーでは確認できないので、ビルドしてねとチュートリアルにはかいてあるけど、npm run devしてhttp://localhost:3000/rss.xmlにアクセスすると中身のあるrss.xmlにアクセスできた。どこかで変更されていて、チュートリアルが更新されていないだけかもしれない。

Astroの公式パッケージ一覧は以下で。

https://astro.build/integrations/official/

非公式のものも結構たくさんあるが、セキュリティリスクなどがunifiedjsのように可視化されてないので、どれぐらいの信頼度なのかとかはよくわからない。

@astrojs/rssのインストール

npm install @astrojs/rss

npmやyarnとかpnpmでインストールするだけ。

rss用のjsを作る

pagesの配下にrss.xml.jsを作る。

タイトルやサイト説明、サイトドメインなどを適宜書き換える。

src/pages/rss.xml.js
import rss from '@astrojs/rss';

export const get = () => rss({
  title: 'Astro Learner | Blog',
  description: 'My journey learning Astro',
  site: 'https://my-blog-site.netlify.app',
  items: import.meta.glob('./**/*.md'),
  customData: `<language>en-us</language>`,
});

ここは日本語のドキュメントがあるので、中身の説明は以下で。

https://docs.astro.build/ja/guides/rss/

ビルドとプレビュー

チュートリアルではここでビルドしているので、ついでにメモしておく。

npm run build

npm run preview

ビルドするとdistというフォルダが作られ、必要なHTMLやJSなどがファイルとして出力される。

プレビューコマンドでこのdistの中身をローカルホストとして表示しているっぽい。プレビューを動かしている状態で、distの中身を修正し、ブラウザを更新すると表示が変わるので。

このビルドとプレビューで、実際に出力されるファイルを確認できる。

次の記事

https://zenn.dev/k_neko3/articles/2be93b9c464521

Discussion