最新のNuxtは周りエコシステムだけでブログが作れる!

はじめに

こんにちは！Eita Kobayashiと申します。
最近は高校生になり、OSSのCSSフレームワーク「PitaCSS(α版)」を作ったりしてます。

本題です。最近のNuxtとそのエコシステムの進化スピートは著しく速く、現在ではNuxtのエコシステムだけで、ブログの構築から運用までが驚くほど簡単になりました。

この記事では、Nuxtのエコシステムだけでブログは構築できるということを紹介したいと思います。

今回は具体的なやり方などは説明しません。そしたらすごい長さになります...
もしかしたら、今後書くかもしれないです

あくまで、「最新のNuxtではこういうことができるんだよ」ということを伝えたいです。取っ掛かりになれば幸いです。

定義

• エコシステム: Nuxt周辺のモジュールや技術
• 最新のNuxt: 2024年後期～2025年現在(06/21)のNuxtとその周りのエコシステムたち

今回使用した技術スタック

今回のブログ制作で使用した技術は以下の通りです

• Nuxt: Vue.jsベースのフレームワーク
• Nuxt Content: GitベースのCMS
• Nuxt Studio: Nuxt ContentのためのCMS管理機能
• Nuxt Hub (β版): NuxtでCloudflare上にデプロイするのを簡潔化するためのプラットフォーム

各エコシステムの紹介

Nuxt: 今回の中心的な技術

Vue.jsをベースとしたフレームワーク、近年大きく進化しているエコシステムを持っています。

何がすごいのか？

進化し続けるエコシステム: Nuxtは、Nuxt ContentやNuxt Studio、Nuxt Hubといった強力な公式エコシステムを持っています、また有志によるモジュール開発も盛んです。

高い拡張性と開発の簡略化: Nuxt Contentのような拡張機能を追加したり、Nuxt Hubを使ってアプリケーションのデプロイを驚くほど楽にしたりすることができます。

https://nuxt.com/

Nuxt Content：GitベースのCMS

Nuxt Contentは、Nuxtに特化したGitベースのCMSです 。Markdown、JSON、YAML、CSVファイルなどでコンテンツを作成できます。

何がすごいのか？

Gitベースの管理: エンジニアにとって慣れ親しんだ、Gitでのバージョン管理が可能です。

パフォーマンス: 内部でWASM（WebAssembly）上で動作するSQLiteを利用しており、大量のコンテンツがあっても非常に高速に動作します。開発者側で特別な設定をしなくても大丈夫です。

https://content.nuxt.com/docs/getting-started
https://content.nuxt.com/docs/advanced/database#wasm-sqlite-in-browser

Nuxt Studio：直感的なCMS管理画面

Nuxt Studioは、Nuxt Content(GitベースのCMS)と連携して動作する、ブラウザで利用可能なCMS管理機能です。
Nuxt ContentがあるGitHubリポジトリと連携したら、すぐに利用可能です。(スターターセットもある)

何がすごいのか？

2つの編集モードがあり、Notionのようなビジュアルエディタと、Markdownのコードエディタを、状況に応じて自由に切り替えられます 。エンジニア以外の人でも直感的に記事を編集できます。

カスタムコンポーネントの埋め込みができ、自分で作成したVueコンポーネントを「カスタムブロック」として、エディタ上から簡単に記事内に挿入できます 。例えば、注意を促すボックスなどをコンポーネント化しておくと非常に便利です。

基本的にCMSで必要な機能は網羅されており、全体的にシンプルで使いやすいです。

https://content.nuxt.com/docs/studio/setup

Nuxt Hub (β版)：Nuxtのデプロイを格段に楽に

Nuxt Hubは、NuxtアプリケーションをCloudflare上に手軽にデプロイ・管理できるプラットフォームです。

何がすごいのか？

これまでCloudflare Pages、WorkersにNuxtアプリをデプロイする場合、環境変数の設定など、少し面倒な手順が必要でした。

しかしNuxt Hubを使えば、これらの設定をほとんど自動で行ってくれます。
Nuxt HubのモジュールをインストールしたリポジトリをGitHubでインポートすれば、npx nuxthub deploy コマンドを実行するだけで、速攻でデプロイできます。

データベースや、その他Cloudflareのソリューションとシームレスに連携できます。

https://hub.nuxt.com/

これらの技術で作られたブログ(私の)

リポジトリ

まとめ

最近のNuxtとそのエコシステムは大きく進化しており、Nuxtのエコシステムだけでブログの構築から運用までを完結させることが可能です。

具体的な役割は以下のようになります。

• コンテンツ管理: GitベースのCMSである「Nuxt Content」
• コンテンツの編集・GUI管理: ブラウザから直感的に操作できる管理機能「Nuxt Studio」
• デプロイ: 「Nuxt Hub」を利用することで、デプロイ作業を簡略化