my_nuxt_blog/content/zh/articles/nuxt3-blog-setup.md

title	description	date	tags	image
Nuxt 3 项目从零到部署：我的博客搭建实录	记录使用 Nuxt 3 + Nuxt Content + Tailwind CSS 搭建个人博客的完整过程，从项目初始化到部署上线。	2026-06-08	Nuxt 前端 博客

为什么选 Nuxt 3

搭博客的方案有很多：Hexo、Hugo、Gatsby、Next.js……我最终选了 Nuxt 3，几个原因：

• Vue 生态：我日常工作主要用 Vue，Nuxt 是最自然的选择
• Nuxt Content：基于文件的内容管理，Markdown 直接放仓库，不需要数据库
• 开箱即用：SSR / SSG / 自动路由 / 代码高亮 / SEO，配置量极少
• Tailwind CSS：通过 @nuxtjs/tailwindcss 模块一行引入

项目结构

my_nuxt_blog/
├── content/
│   ├── zh/articles/      # 中文文章
│   └── en/articles/      # 英文文章
├── pages/
│   ├── index.vue         # 首页文章列表
│   ├── [...slug].vue     # 文章详情（动态路由）
│   └── about.vue         # 关于页
├── app.vue               # 根布局
└── nuxt.config.ts

非常简洁，没有冗余。

关键实现

文章列表

<script setup lang="ts">
const { locale } = useI18n()
const { data: articles } = await useAsyncData(`home-articles-${locale.value}`, () =>
  queryContent(`/${locale.value}/articles`)
    .sort({ date: -1 })
    .find()
)
</script>

queryContent 是 Nuxt Content 提供的 composable，自动扫描 content/ 目录下的 Markdown 文件，解析 frontmatter 和正文。

动态路由

pages/[...slug].vue 是一个 catch-all 路由，通过 queryContent(route.path).findOne() 加载对应文章，404 时自动触发 createError。

文章样式

用自定义 prose 类控制 Markdown 渲染样式，字体选用 Noto Serif SC 和 Noto Sans SC，走温暖素雅的暖色调路线。

部署

构建输出是标准的 Node.js 服务，一条 npm run build 即可。搭配 Docker 或直接 Node 进程跑都很方便。

小结

整个博客从零到上线不到一天，Nuxt 3 的开发体验确实出色。接下来计划加入 RSS、sitemap、图片懒加载等小功能。