Nuxt+Cloudflare Pagesでのブログ環境実装

近年、Jamstack構成による高速かつセキュアなWebサイト構築が注目されています。本記事では、Nuxt（Nuxt 3）とCloudflare Pagesを組み合わせて、シンプルで高速なブログ環境を構築する方法を解説します。

目次

1. 構成概要
2. 前提条件
3. Nuxtプロジェクトの作成
4. ブログ機能の実装（Contentモジュール）
5. Cloudflare Pagesへのデプロイ
6. 独自ドメイン設定
7. まとめ

1. 構成概要

• フロントエンド：Nuxt 3
• コンテンツ管理：@nuxt/content
• ホスティング：Cloudflare Pages
• デプロイ：Git連携（GitHub推奨）

2. 前提条件

• Node.js（v18以上推奨）
• npm または pnpm
• GitHubアカウント
• Cloudflareアカウント

3. Nuxtプロジェクトの作成

npx nuxi init nuxt-blog
cd nuxt-blog
npm install

4. ブログ機能の実装（@nuxt/content）

npm install @nuxt/content

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

5. Cloudflare Pagesへのデプロイ

• Build command: npm run build
• Output directory: .output/public

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})

6. 独自ドメイン設定

Cloudflare Pagesの「Custom domains」から設定可能です。

7. まとめ

Nuxt + Cloudflare Pagesの構成は、高速・セキュア・低コストでブログ運用が可能です。