みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20201125184426p:plain

はじめに

はてなブログの最近記事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 = [];
}

コピペでも動くように型をanyにしてしまってますが、イメージはこんな感じです。
asyncDataを使うのがひさしぶりすぎて、ページコンポーネントでしか使えないことをすっかり忘れてほんのりハマりました。

静的なHTMLとして書き出す準備

yarn generate

でOKです。
APIで取得した部分もしっかりとHTMLのソース上で確認できます。

いまのところ、

❶ JSONを更新してpush or ブログの更新
❷ yarn generate
❸ 書き出したものを一式push

という手順になってしまっているので、JSONのpushやブログの更新を検知して自動で書き出してくれるように設定したいところですが、まあ一旦これで良しとします。