Nuxt.jsでブログを作る場合はnuxt/contentが良さそうな件
以前、私はNuxt.jsといくつかのパッケージを組み合わせて自力でブログを作って公開していたことがありました。
当時作成したブログテンプレートについては以下の記事で紹介しているリポジトリを参照ください。
色々試行錯誤して作成してみたものの、やはりはてなブログの方が手軽であったためNuxt.jsのブログは閉鎖してしまいました。
静的サイトジェネレーターで作るブログはNuxt.jsでなくても、Gatzby.jsやHugoやHexo等たくさん種類があり、どれもかなり手軽に作成できる印象です。しかもデザインもテンプレートがあるため、わずか1時間程度でそれらしいデザインのブログをデプロイできちゃいます。
もはやNuxt.jsで苦労して作るメリットがあまりないような・・・と感じていましたが、たまたまNuxt.jsの公式でnuxt/contentというパッケージを使ってブログを作成する記事を見つけたので、試しに実装してみました。
nuxt/contentとは
https://content.nuxtjs.org/ja/
こちらの公式サイトには下記の特徴が書かれています。
contentというディレクトリを作ってそこにmarkdownで記事を書けば、あとはよしなにやってくれてhtmlを出力してくれます。
上記のブログ作成の解説記事ではmarkdownで書いた記事の表示、記事の目次、前後の記事への遷移、記事の一覧、記事の検索などブログとして最低限の機能の実装方法が紹介されています。
それほど難しいコードではないので、Vue.jsやNuxt.jsに慣れている方であれば苦労はしないと思います。Vue.js初心者の場合は少し厳しいかもしれません。。
ただ、解説記事に書かれているコードは以下のデモリポジトリで実装されていますので、無理して記事を読まなくてもこのデモリポジトリを元にカスタマイズすれば仕組みを把握することができ、かつそれらしいブログを構築できるのではないかと思います。
私はTypeScriptを使いたい・CSSをライブラリを使わず自力で書きたかったため、デモリポジトリは使わずcreate-nuxt-appで一からNuxt.jsアプリケーションを生成し、ブログの記事を元にコードを書いて自分用のサンプルリポジトリを作成しました。
nuxt/contentは以前自力で実装していた記事生成の仕組みが全てパッケージ化されたもの、という印象です（感動しました）。
まだ全機能を網羅的に把握したわけではありませんが、nuxt/contentで便利だと感じたのは、開発環境で起動していればブログ記事の編集をブラウザ上ですることができる、という機能です。ちょっとした修正をブラウザでできるのは便利ですね。
おわりに
今のままでは機能的に物足りないので、今後はGoogle AnalyticsやSNS連携など以前自力で作った知見を活かしてカスタマイズしたブログをGithub Pagesで公開したいと思います。
