Astro を使ってブログをRSSフィードで公開してみる。

Last updated at 2022-12-06Posted at 2022-12-04

はじめに

これは、株式会社 RetailAI X Advent Calendar 2022 の 5 日目の記事です。

昨日の記事は、 @wu_manning さんの『next.js初心者入門記事』でした。

さて、今回、自身も初の試みで、adventを書く事になりましたが、
何を書こうかと考えた末に、webサイト構築について
勉強していることもあり、その一環で触れている
Astro について、少しだけ書いてみる事にしました。

Astro って何？

まず、Astro に触れる前に、astroが何なのかを簡単に言いますと、
公式ページを開いてもらえれば、直ぐに目が入る箇所にも書かれているように、
Astroは『高速にWebサイトを構築してくれる静的サイトビルダー』の一つです。

これが実現できている理由としては、主にビルド時にJavaScriptを
取り除いた状態で、HTMLファイルが作成されている為とあります。

Astroは様々な特徴がありますが、これ以外の特徴については、
Astroを選ぶ理由として公式がまとめていますので、
もう少し詳しく知りたい方は、そちらを参照していただければと思います。

Astro の環境をローカルにデプロイする。

Astro.build の新しい開発環境をセットアップする簡単な方法としては、
公式の手順に従っても良いと思いますが、こちらで説明している手順で進めると
環境構築が早いので、Astroがどういうものか、直ぐに触ってみたい方にはオススメです。

マークダウンで書いたブログを、RSSフィードで公開してみる。

Astroはブログ投稿でマークダウンが使えるようにサポートされています。

さらにはRSSフィードの高速な自動生成もサポートしている為、
Astro でブログサイトを作った際には、簡単にRSSを使って共有・公開が可能となります。

RSSフィード内のリンク生成に必要な設定を行う

astro.config.mjs
に site: 'https://qiita.com/' を追加する。

追加するとこうなります。

export default defineConfig({
    site: 'https://qiita.com/'
});

最終的にデプロイ先のブログのURLを貼りますが、ここではqiitaを指定しています。

ディレクトリを構成。

src/pages ディレクトリの直下に 個人用のブログ を管理する為のディレクトリを作成。

こんな感じ。。。。

qiita は一般公開と限定公開がありますので、
それに合わせてさらにディレクトリを分けています。

個人ブログの際はカテゴリーを分けるといったイメージに置き換えてください。

マークダウンファイルを作成。

ディレクトリ構成ができたら、マークダウンでブログを書いてみる。
マークダウンファイルの中には、
pubDate と title は必須、任意で customData を記入。

サンプル用のマークダウン

---
pubDate: 2022-12-05
title: これはサンプルです。
customData: <language>ja</language>
---

**サンプル**  
-
- 目次  
  これはサンプルです。 
　  

  Astroフレームワークとは、  
   
      コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワーク  
  
  である。

RSSフィードを準備する。

ターミナルを起動して、RSSのパッケージマネージャーをインストールする。
使用するパッケージマネージャーはどれでもOKです。

npm install @astrojs/rss

src/pages ディレクトリの直下に rss.xml.js を作成して、下記のコードをペースト。

import rss from '@astrojs/rss';

export const get = () => rss({
  language: 'ja',
  title: 'ブログサイト',
  description: 'ブログサイトの説明',
  site: import.meta.env.SITE,
  items: import.meta.glob('./**/*.md'),
  customData: `<language>en-us</language>`,
});

　　
アプリケーションを起動して、RSSフィードが正常に動作する事を確認する。