用 Nuxt 3 搭建个人博客：从设计稿到 Cloudflare 上线

这个博客从一张设计稿开始，到部署上线，总共花了不到一周的业余时间。这篇文章记录技术选型和实现细节，也当作给自己的一份文档。

为什么不用现成的博客主题

我试过三个流行的博客主题，最后都放弃了。原因很简单：它们都在解决别人的问题。

我需要的是：

• 首屏要有一个能承载情绪的视觉区域
• 文章列表要能同时展示「精选」和「常规」两种密度
• 分类、标签、归档三种浏览方式并存
• 移动端不能只是「能看」，要好用

这些需求用现成主题改，比自己写还慢。

内容层：Markdown 即数据库

文章就是仓库里的 .md 文件，frontmatter 存元信息：

---
title: "文章标题"
description: "用于列表和 SEO 的描述"
date: 2025-10-18
category: 技术
tags: [Nuxt, Vue]
views: 512
featured: true
---

构建时用 Vite 的 import.meta.glob 把所有 Markdown 内联进产物：

const rawFiles = import.meta.glob('~~/content/posts/*.md', {
  query: '?raw',
  import: 'default',
  eager: true,
})

这样做的最大好处是：不需要数据库，也不需要运行时文件系统，因此可以直接跑在 Cloudflare Workers 上。

渲染：marked + highlight.js

Markdown 转 HTML 用 marked，代码高亮用 highlight.js 的核心包，只注册用得到的语言：

import hljs from 'highlight.js/lib/core'
import typescript from 'highlight.js/lib/languages/typescript'

hljs.registerLanguage('typescript', typescript)

只注册需要的语言，能把高亮部分的体积从 900KB 压到 80KB 左右。

样式：Tailwind v4 + CSS 变量

配色不写死在类名里，而是定义成 CSS 变量，再由 @theme inline 映射给 Tailwind：

:root {
  --c-surface: #ffffff;
  --c-text: #0d1526;
}

.dark {
  --c-surface: #0c1322;
  --c-text: #e9eefb;
}

@theme inline {
  --color-surface: var(--c-surface);
  --color-ink: var(--c-text);
}

这样切换深色模式只需要在 <html> 上加一个 dark 类，所有组件自动适配。

部署：一个 wrangler 配置搞定

{
  "name": "yunmasoft-blog",
  "main": ".output/server/index.mjs",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],
  "assets": {
    "directory": ".output/public",
    "binding": "ASSETS"
  }
}

构建命令 nuxt build，部署命令 wrangler deploy。所有页面在构建时预渲染成静态资源，Workers 只负责兜底路由。

性能数据

上线后跑了一次 Lighthouse：

首屏 HTML 只有 28KB（gzip 后 9KB），没有任何阻塞渲染的外部字体请求。

小结

这个博客的核心设计原则是：能静态就静态，能构建期做就构建期做。

没有数据库、没有运行时依赖、没有第三方服务，一个 wrangler deploy 就能上线。对个人项目来说，这是最省心的架构。