Nuxt Content v3 + Nuxt Hub を使って爆速で個人ブログを作って公開する
#Nuxt.js
#Vue.js
#Cloudflare
#Tailwind CSS
2025 年 1 月にリリースされた Nuxt Content v3 とNuxt Hubを使って個人ブログを爆速で作っていきます。
はじめに
はじめまして、フリーランスのエンジニアとして働いているつきやまです。
Vue, Nuxt, CSS が好きです。
技術以外だと最近はポケポケと短歌を嗜んでいます。
この度、個人ブログを作る運びとなり、本記事は記念すべき一本目の記事です。
せっかくなので一本目の記事は本ブログのような個人ブログを爆速で作る方法の記事を書こうと思います。
対象読者
✅ 個人ブログを Vue / Nuxt で作ろうと考えている方
✅ Nuxt Content v3 の機能に興味がある方
✅ Nuxt Hub を使って Web サイトを公開したい方
事前準備
本記事では Nuxt Hub を利用してデプロイを行います。
Nuxt Hub を利用する際に必要なアカウント類の登録を行います。
（すでにアカウントお持ちの方は飛ばしてください。）
GitHub
GitHub アカウントと公開するサービスのリポジトリを用意をお願いします。
Cloudflare
Cloudflare Pages にホスティングするのでアカウントの作成をお願いします。
Nuxt Hub
Nuxt Hub を用いて Cloudflare にデプロイするのでアカウント作成をお願いします。
環境構築
Nuxt インストール
https://nuxt.com/docs/getting-started/installation
$ npm create nuxt sample-blog
プロジェクト名は任意の名前をつけてください。
インストールの際にいくつか質問されるので適当に答えます。
インストールが済んだらディレクトリを移動して、開発サーバーを起動してみましょう。
cd sample-blog
npm run dev
localhost:3000にアクセスして Welcome ページが表示されていれば完了です。
Nuxt Content インストール
https://content.nuxt.com/docs/getting-started/installation
npx nuxi module add content
Nuxt Hub インストール
https://hub.nuxt.com/docs/getting-started/installation
npx nuxi module add hub
Zod インストール
https://www.npmjs.com/package/zod
コンテンツのスキーマ定義で使用するバリデーションライブラリです。
npm install zod
Tailwind CSS (Nice to Have)
https://tailwindcss.com/docs/installation/using-vite
npm install tailwindcss @tailwindcss/vite
nuxt.config.tsに vite plugins を追加します。
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
// ...
vite: {
plugins: [tailwindcss()],
},
});
~/assets/css/tailwind.cssを新規作成します。
@import "tailwindcss";
デプロイしてみる
一通りの環境構築を終えたのでこの段階で一旦デプロイしてみましょう。
デプロイコマンド
npx nuxthub deploy
デプロイコマンドを実行するといくつか質問されます
基本的にデフォルトの回答で大丈夫だと思います。
region だけ Asia Pacific を選びました。
$ npx nuxthub deploy
NuxtHub CLI
ℹ No project is linked with the NUXT_HUB_PROJECT_KEY environment variable.
│
◇ Deploy ~/projects/sample-blog to NuxtHub?
│ Yes
│
◇ Select a project
│ Create a new project
│
◇ Project name
│ sample-blog
│
◇ Select a region for the storage
│ Asia Pacific
│
◇ Production branch (git)
│ main
✔ Project sample-blog created
✔ Connected to tsukiyama-3 team.
✔ Linked to sample-blog project.
問題なければビルドが走ります。
ビルドに成功するとデプロイ先の URL が表示されるのでアクセスしてみましょう。
Welcome ページが表示されていたら完了です。
Nuxt Content の機能の紹介
ブログの実装に入る前に軽く Nuxt Content の機能に触れておきます。
Nuxt Content は 2025 年 1 月に v3 がリリースされました。
v3 の主な機能は公式ブログにまとめられています。
https://content.nuxt.com/blog/v3
コンテンツの管理方法
v3 では従来のファイルベースの管理から SQL のデータベースシステムに移行しました。
ファイル管理の方法が変わったからといって内部でいい感じに .sqlite ファイルを生成してくれているので使う際に特に意識する必要はないと思います。
コンテンツはルート直下に/contentを作成して管理します。
引き続き、markdownの他にもjsonファイルやyaml csvファイルの管理も可能です。
コンテンツコレクション
Nuxt Content v3 ではコレクションを定義してコンテンツを管理します。
コレクションとは、関連するコンテンツのグループです。
コレクションの定義はcontent.config.tsで行います。
import { defineContentConfig, defineCollection, z } from "@nuxt/content";
export default defineContentConfig({
collections: {
blog: defineCollection({
type: "page",
source: "blog/*.md",
}),
},
});