Nuxt.jsの静的書き出しで、はてなブログのRSSを表示するウェブサイトを作る 📝

はじめに
はてなブログのRSS取得
Nuxtプロジェクトの作成
Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備
静的なHTMLとして書き出す準備

はじめに

はてなブログの最近記事30件と、JSONに記載されているモックを取得して羅列するウェブサイトをNuxt.jsの静的書き出しを使って作りました。
Jamstackと言えばJamstackっぽい構成になっています。

はてなブログの最新記事の取得はRSSを使い、モック一覧の取得は折角なのでHeadlessCMSを使っても良かったのですが、一旦自前のJSONで作りました。

develop.kimizuka.org

はてなブログのRSS取得

ブログのURLの末尾に /rss を付ければOKです。

https://blog.kimizuka.org/rss

ちなみに末尾に /feed を付けるとフィードたるものを取得できるようです。

https://blog.kimizuka.org/feed

developer.hatena.ne.jp

が。便利そうなのですが、今回はパースしやすさを考えてRSSにしました。

Nuxtプロジェクトの作成

普通に、

yarn create nuxt-app project

とかで、NuxtプロジェクトをつくればOKなのですが、Rendering modeとDeployment targetだけ気をつけます。

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG) 
  Single Page App

? Deployment target: 
  Server (Node.js hosting) 
❯ Static (Static/JAMStack hosting)

Deployment targetはSSGでいきたいのでUniversal、Deployment targetはStaticを選びましょう。
後に変更できるので、そこまで重要な選択ではないです。

Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備

asyncDataかfetchを使いましょう。

ja.nuxtjs.org

僕はStoreを使う予定はなかったので、asyncDataを使いました。

@Component({
  components: {},
  async asyncData({ params }) {
    const [ rss ] = await axios.all([
      axios.get('https://blog.kimizuka.org/rss')
    ]);
    const items = parse(rss.data).rss.channel.item;

    return { items };
  }
})
export default class IndexPage extends Vue {
  items?:any = [];
}