Nuxt Contentでブログを作ってみた

この記事はしおだいふく Advent Calendar 2020 5日目の記事です。

今日はこのブログの中心技術のひとつであるNuxt Contentについて紹介します。

Nuxt Contentとは

Nuxt ContentとはNuxt.js（Vue.jsのメタフレームワーク¹）の拡張モジュールのひとつです。 細かいことを脇においておくと、Markdownファイル²をいいかんじにパースしてHTMLを生成する仕事を担当しています。 Markdownファイルを使って静的コンテンツを中心に並べるWebサイトを簡単に作ることができます。

公式サイトの宣伝文句を借りれば、GitベースのHeadless CMSのように振る舞うモジュールです。

Nuxt Contentはここがすごい

外にCMSを持たなくてもGitHubにMarkdownを並べていくだけでこんなかんじのブログが簡単に作れてしまうだけでなく、Nuxt Contentにはこのブログを触っているだけでは気づかない以下のような特徴があります。

全文検索機能内蔵

Nuxt ContentはMongoDBに類似したAPIを備えており、Markdownで記述したコンテンツの全文検索をかけることができます。 バックエンドを置かずに検索エンジン相当の機能を用意することができる点が優れています。

そんな便利な機能がありながら、当ブログの検索フォームが仕事をしていないのは僕の怠慢以外の何物でもありません。 申し訳ありません。

ブラウザ上でMarkdownを編集できる

developmentモードでアプリケーションを実行している間、ブラウザ上で直接Markdownファイルを編集することができます。 ローカル環境で執筆した記事をブラウザでチェックしているときに、ちょっとした誤字をなおしたりするのにいちいちエディタに戻らなくていいところが非常に便利です。

Nuxt.jsのSSGが超強化された

ちょうど僕がNuxt Contentを検討し始めたころ、Nuxt.jsのバージョン2.13.0でstaticモードがかなり強化されました。 （これを解説し始めると長くなるので、詳しくはNuxt.js公式のブログ記事を参照してください。） Nuxt Contentのような静的コンテンツの生成技術とNuxt.jsのこのアップデートがいい感じに噛み合っていて、静的コンテンツ中心のWebサイト開発技術としてかなり便利になりました。

VuePressとは何が違うのか

（Vue 3.0界にはVitePressというやつも控えてますが、色々不安定なのでいったんおいておくと）Vue.jsベースの静的コンテンツ生成技術としては、VuePressというやつがいます。 これと比較すると、正直Nuxt Contentは単純な静的コンテンツジェネレータとしてはまだまだ劣っている部分があります。 細かいスタイリングとかはVuePressのほうがかんたんですし、他にもNuxt Contentには気になる細かな制約がちょいちょいあります。

Nuxt Contentの強みはNuxt.jsをベースとしている、つまりWebアプリケーションの開発を念頭においているところです。 このブログでは単なる静的コンテンツサイト生成のために使ってしまっていますが、このような利用にとどまらず『Webアプリケーションのコンテンツの一部をMarkdownで書きたい』といったユースケースで真価を発揮します。 たとえばWebサービスを1個作ろうとすると、利用規約とかプライバシーポリシーのような静的コンテンツのページが必要になります。 こういうVue.jsの範囲でどうにも管理しにくいページをMarkdownに掃き出して管理できるところが非常に便利です。

お詫び

今日は私事につき一日中外出していたため、技術の単なる紹介・やってみた系記事という僕自身が最も忌み嫌う内容に終わってしまい大変申し訳ありません。 もうちょい入り組んだ話は後日書きますのでそれで許して下さい。

この記事の内容の善し悪しは置いておいて、Nuxt Contentというやつは本当によくできているすごいやつなのでみなさんもぜひ使ってみてください。