Nuxt.js × microCMSでブログをリニューアルした話

この記事は N・S高等学校 Advent Calendar 2021 6日目の記事です。

はじめに

どうも、N高卒業生（21年3月卒）の猫月遥歩（ねこづきあゆむ）です。
現在専門学生なのですが、うちの学校にはアドカレのような文章としてアウトプットしようみたいな取り組みが少ない（というか無い）ので、今年もN高のアドカレに参加させていただいてます。

さて、今回は、今みなさんがこの記事を読んでいる個人ブログ「ねころぐ」を最近リニューアルしたので、その話をしようと思います。

動機

リニューアル前は、静的サイトジェネレーター「Hexo」× Netlify で構築していました。
Markdownで記事を書ける等のメリットから利用していたのですが、使っていくうちにいくつかの問題が出てきました。

ローカル環境が破損しやすい
テーマ（デザイン系）リポジトリとHexoのメインリポジトリが別なので、デザイン修正するには行ったり来たりして修正しないといけない
画像周りの管理がめんどい

これに合わせて、ニコニコで活動する上での情報をまとめるのに利用していた「ユーザーブロマガ」がサービス終了したこともあり、ブログのリニューアルを行うことにしました。

必要用件

ブログ記事更新がしやすい
ブログ記事で利用する画像の管理がしやすい
Nuxt.js で作成できる

以上の観点から良さげなものを探した時に、友人から「これおすすめだよ〜」と教えてもらったのが microCMSでした。

なぜmicroCMSなの？

調べていくうちに、目的と合致すること以外にも、

ドキュメントが整理されている
公式ブログに言語ごとのチュートリアル的なものがたくさん上がっているので、とっかかりしやすい

等のメリットがあったため、利用することにしました。

いざ、実践！

といっても、8割方、公式ブログ通りなので、以下の関連リンクから調べてみてください

デザインは、BootstrapVueを利用しながら、Hexo時のデザインを踏襲しつつ作成しました。
この記事では、つまずいたことをメインに書いていこうと思います。

① Nuxt-linkで移動するとOGPが死ぬ

Nuxt-link とは、aタグ同様、リンクを移動する時に使うやつです。クリックすると、設定したそのページに飛びます。Vueを知る人は、router-link に似るものといえばわかると思います。
aタグとの違いは、移動先がNuxt.jsの内部ページであれば圧倒的にパフォーマンスが良いという点です。

今回何が問題だったかというと、パフォーマンスが良い代わりにOGPが死にます。
正確には、移動前のページのOGPをそのまま受け継いでしまい、Twitterなどへの共有ボタンが機能しなくなるという点です。

解決法、知る方いれば教えてください。（今回は諦めて、aタグで妥協しました）

② Jamstack化するとOGPが死ぬ

~~OGP、おまえ、いっつも死んでんな....~~
先ほど紹介した記事通り、最初は作っていたのですが、一通り作り終え、試しにgenerateすると、なんということでしょう！
全ての記事のOGPが、とある１つの記事になっているではありませんか！！

なんで...？
こちらも、結局解決策がわからず、Jamstackを諦め、SSRで構築しています。

③ nuxt-highlightjsで特定のテーマが利用できない

これは大丈夫です。解決済みです。
Nuxtで構築するにあたって、便利そうなものをもろもろと入れています。その中にHighlightjsもあります。
Highlightjsとは、以下のようにコードを書くと、ハイライトをかけてくれるライブラリです。

var message = "Hello world";
console.log(message);

nuxt-highlightjsで、テーマ「GitHub Dark」が利用できませんでした。
色々試しましたが、正攻法では利用できず、結果、テーマのSCSSを nuxt.config.js で直読みしています。

  css: [
    '~/assets/icomoon_fonts/icomoon-style.css', 　//オリジナルsvgフォントファイル
    '~/assets/style/github-dark.scss', //HighlightJS テーマ
    '~/assets/style/main.scss'
  ],

感想

約２週間の突貫工事だったため、まだ色々と足りていない部分があります。
先ほどあげたつまづきも、力技でなんとかしているだけなので、いつかちゃんとした解消法を見つけて直していきたいです。

今後について

今後は、

ページ移動時のレスポンスの遅さを解消
Disqusの再導入

あたり進めていきたいなと思っています。

おわりに

いかがでしたでしょうか。作っていて楽しかったです。
みなさんもぜひ、Nuxt.js × microCMSでブログを作ってみてはいかがでしょうか。

N・S高等学校 Advent Calendar 2021 、明日以降もまだまだ続きますので、ぜひ、引き続きご覧ください。
以上、猫月遥歩（ねこづきあゆむ）でした。Thank you for Reading!