12月のこの時期に公開しましたが、どこかのアドベントカレンダーとは全く関係ないです。グダグダ書いていたらたまたまこの時期になっただけです。
閑話休題。
あたらにBlogを作り直したのは、阿部寛を超えるための技術: はてなブログからNuxtに移行した話を読んで、Google BloggerのLighthouse Performance Scoreを測ってみたところ、思った以上に評価が低かった(キャプチャをとっわすれてしまったが50～60点台が多かった)。
そしてNuxt.js + buefy で作成して、ビルドからホスティングを netlify でおこなう構成に替えました。
この構成にしたのはVue.jsを使ったことがあったこととbulmaのVueラッパーがbuefyで、netlifyという面白そうなホスティングサービスがあるので試してみたかったです。
netlifyにはnetlify cmsというCMS機能を付加するのOSSもあり、またnetlifyにはテンプレートまで用意されています。 デザインを選んでDeployボタン一つでGithubにForkして、Netliftのビルド設定からコンテンツの公開までしてくれるという非常に便利なOSSでした。
私が試した限りでは、このCMSはデプロイするレポジトリがPublicになっていない場合に、CMSの編集画面上で画像などのメディアのプレビューがロードできないという問題ありました。(ビルドして公開したコンテンツからは問題なく画像は表示されました)
やっぱり下書きとか保存したいし、リポジトリはPrivateがよかったという気持ちが強いので、自分で作成することにしました。(OSSなので先の問題を解決するという方法もありましたが、Nuxt.js初心者がいきなり改善するにはハードルが高すぎると判断)
このOSSで Awake, A Nuxt Blog Templateのデザインが非常に気に入ったため、このデザインを残しつつ自分なりのカスタマイズを入れていくことにしました。
変えた点は以下のとおり。
- netlify cmsからの依存を削除(元のテンプレートの売りの1つでもあると思うけど。。)
- コメント機能の削除 (netlify cmsの機能なのかわからなかったが、当分は使いこなせそうにないので削除した)
- 1日1記事以上は公開することはないとして、Markdownとそれに付随する画像は同じディレクトリで管理する。(元のテンプレートはアップロードした画像とコンテンツが別のディレクトリで管理されていて、どの記事でどの画像を使っているのかが把握しづらいと思った)
- ブログに機能を絞り自分で管理しやすいようにする(企業サイト向けのテンプレートのため多機能な感じで、ブログだけとして使うには高機能すぎた)
Bloggerから移行したことによって失った物
- コメント機能(もともとコメントが来ることはなかったし困ることではないが、いずれは追加したい機能の一つ)
- Google AbsenceやGoogle AnalyticsなどのGoogle純正サービスとの容易な連携 (これは自分で1つずつ設定すれば良いだけの話)
作り方などのはすでに大量に他のサイトでも公開されているので、このブログを作成するにあたって参考にしたサイトを列挙しておきます。(そのうちこのサイトのコードはGithubで公開する予定です)
- Nuxt.js で Markdown ベースのブログを構築する（Markdown 編）
- marinaaisa/nuxt-markdown-blog-starter
- Nuxt.jsで構築したブログをカイゼンした話
そして肝心なLighthouse Performance Scoreはどうなったかというと、デスクトップ版では上がりましたが、モバイル版は逆にだいぶ低くなってしまいました。
モバイル版もデスクトップ版でも画像コンテンツの最適化などが十分ではないらしくスコアが低くなってしまいました。とくにモバイル版はデスクトップ版と同じ画像を使い回しているので、不必要に画像サイズが大きくなっていることがスコアを下げた要因のようです。
この辺りは今後の改善点で、Screen sizeでImageを切り替えたり、WebPを使うなどもう少し工夫が必要なようです。
話しのオチとしてはBloggerから移行する意味あったのかみたいな十分面白い感じになりましたが、Nuxt.jsの知識と新しい環境を手に入れることが出来たので、個人的には十分満足です。
というわけで、当分はPCから見てもらう方が快適かも知れません。。。。