このブログをWPからNuxt.js × Contentful × Netlifyに移行した話

このブログのCMSをWPからContentfulに乗り換えましたので、その時に躓いたポイントや参考にさせていただいたブログなどをまとめてみようと思います。

参考にした記事

タイトルにもある通りNuxt.js × Contentful × Netlifyで構築してみました。その際に参考になったページは以下の通りです。
Embedded content: https://qiita.com/isihigameKoudai/items/3e45ade7c438176a4cc9
JAMstackってなんなんじゃそりゃーということからContentfulのざっくりとした使い方まで解説して頂いているので 読み物としても良い記事 だと思います。
それ以外には
Embedded content: https://qiita.com/hitsuji-haneta/items/9fb971855026386fa5c5
Embedded content: https://qiita.com/hisako135/items/082115b50df92ef3e941
などなど…
「Nuxt Contentful」で検索して出てきた記事 を色々参考にしました。

躓きポイント Contentful編

そもそも使い方がわからん！

Contentfulは日本語対応がまだされていない （？）ので全て英語で説明されます。
とりあえず、使い方がわからんかったので以下の記事を参考にしました。
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る

コンテンツモデル、コンテンツタイプってナニソレ？

Contentfulには スペース、コンテンツモデル、コンテンツタイプ、コンテンツ という考え方があります。
スペースは1つのブログ というイメージ。
コンテンツモデルはそのスペースで 投稿するコンテンツの”型”を決める もの。
コンテンツタイプは コンテンツを束ねた もの。
そして、コンテンツは コンテンツモデルで決めたフィールドを使って投稿 できます。

Nuxt.js × Contentfulを解説した記事の多くはコンテンツタイプを必要最小限にして説明しているため少し混乱しました。 実際のこの投稿のコンテンツタイプ は以下のようになっています。

カテゴリー、タグはどうやって使うの？

中々クセあるポイントとしては、 カテゴリーやタグの考え方 です。
まず、カテゴリー、タグ用のコンテンツタイプを作ります。「tags」としましょう。コンテンツモデルは「title」フィールドだけで構いませんが、日本語urlを避けるために「tagSlug」というフィールドも用意しました。
そして、コンテンツを公開します。

このコンテンツをコンテンツタイプ「blogPost」のコンテンツから 「References」フィールドで紐付ける。 これでタグやカテゴリーのような役割を持たせることができます。

図解するとこんな感じだと思います。

公式のドキュメントがこんな感じに書いてある気がするのですが、間違っていたら教えてください！
(公式のドキュメントが古すぎてUIが違うっぽいので混乱しました…)

躓きポイント Nuxt編

カテゴリー階層の書き出し

参考にした記事の構築方法だと

ebifry.jp/blog/hogehoge

のようにblogという階層が固定されてしまいますが、 カテゴリーによってblogの部分を出し分けたい です。
つまり、「css」カテゴリーなら

ebifry.jp/css/hogehoge

「Vue.js」カテゴリーなら

ebifry.jp/vue-js/hogehoge

のようにしたいです。
弄るのは、 nuxt.config.js です。

// 〜省略〜
generate: {
  fallback: true,
  routes() {
    return cdaClient
      .getEntries({content_type: 'blogPost' })
      .then(entries => {
        return [...entries.items.map(entry => 
          `/${entry.fields.tags[0].fields.tagSlug}/${entry.fields.slug}`
          )]
      })
  }
}
// 〜省略〜

generateの内容を上記のようにしてください。
content_typeはご自身が記事投稿を行っている コンテンツタイプ名に合わせて ください。

マークダウン記法の変換方法について

Nuxtでマークダウン記法をHTMLに変換してくれるモジュールが色々あって どれが良いのかわかりません でした。
結局、使ったのは「markdown-it」です。
理由としては、 検索エンジンのクローラーが上手く読んでくれる らしいからです。
詳しくは以下の記事を参考にしてください。
vue-markdown をやめて nuxtjs/markdownit を利用する

シンタックスハイライターについて

<p>こんな感じでコードを插入した時にいい感じに<b>色分けをしてくれる</b>のが、<strong>シンタックスハイライター</strong>です</p>

シンタックスハイライターも色々あって悩んだのですが「prism」というものが１番使いやすそうだったので採用しました。
使い方は以下の記事の通りです！（毎度ぶん投げ）
Nuxt.js + Contentful + Prism

躓きポイント Netlify編

404ページについて

Netlifyは404エラーの時には404.htmlというファイルを自動で読みに行くという機能があります。
が、Nuxtでgenerateして吐き出される404ページは200.htmlという名前のファイルです。
これはpages/404.vueというページを作って404.htmlを吐き出せば解決するのですが、200.htmlと404.htmlが２つとも吐き出されるので 200.htmlを吐き出さないようにしたい です。
弄るのは、 nuxt.config.js です。

  //〜省略〜
generate: {
  fallback: true,
  //〜省略〜
}

fallback: trueを追記 すればOKです！

最後に

WPの投稿をContentfulに自動で移行する方法について求めていた方がいましたら申し訳ありません。元々、記事が9つしかなかったので 全て手動で移行 しました！

やってみたかった リアルタイム検索 ができたり、 今風のブログ に出来たので個人的には満足です！表示速度もかなりあがりました。
その他のナレッジも機会があれば共有したいと思います。
みんなもヘッドレスCMSで構築してみてくれよな！