搭博客用 VitePress 很快，半小时就能跑起来。

但默认主题长得都一样。想让它有点个性，得花些功夫折腾。

自定义主题

VitePress 的主题系统其实挺灵活的，核心是在 .vitepress/theme/index.ts 里扩展默认主题：

import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'
import './custom.css'

export default {
  extends: DefaultTheme,
  Layout: MyLayout,
}

用这个方式你可以：

• 覆盖默认布局，加自定义的 Header、Footer
• 插入全局组件（比如文章列表、标签云）
• 引入自定义 CSS 变量改颜色

改颜色方案

VitePress 用 CSS 变量控制配色，在 custom.css 里覆盖就行：

:root {
  --vp-c-brand-1: #5b8af5;
  --vp-c-brand-2: #3a6ce0;
  --vp-c-brand-soft: rgba(91, 138, 245, 0.14);
}

改完立刻生效。我在这上面花了一个下午调色，虽然最后和原来差别不大。

文章列表页

VitePress 默认没有博客文章列表，需要自己写。核心是用 createContentLoader 获取所有文章：

import { createContentLoader } from 'vitepress'

export default createContentLoader('posts/*.md', {
  transform(rawData) {
    return rawData.sort((a, b) => {
      return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
    })
  }
})

然后写个 Vue 组件渲染列表。这部分代码比较多就不贴了，思路就是拿到数据后用 v-for 循环显示。

性能优化

VitePress 本身已经很快了，但还有几个可以优化的点。

图片处理

博客文章里的图片是大头。我的做法是：

1. 用 WebP 格式替代 PNG/JPG
2. 图片宽度控制在 800px 以内
3. 后来直接用了图床，本地不存图了

字体加载

引入 Google Fonts 会拖慢首屏加载。我的解决方案是用 font-display: swap，先显示系统字体，等自定义字体下载完再替换。

用户感知上几乎没有延迟。

部署到 Cloudflare Pages

之前用 Vercel，速度一般。换到 Cloudflare Pages 之后快了不少。

配置很简单：

1. GitHub 仓库连接到 Cloudflare Pages
2. 构建命令：npm run docs:build
3. 输出目录：.vitepress/dist
4. 提交代码自动部署

免费额度完全够个人博客用，而且自带 CDN，国内访问也不慢。

自定义域名

Cloudflare 本身就是 DNS 服务商，加域名特别方便：

1. 域名的 NS 记录指向 Cloudflare
2. Pages 设置里添加自定义域名
3. SSL 证书自动签发

整个过程十分钟搞定。

踩过的坑

• 热更新偶尔抽风：改了 CSS 变量后不生效，需要重启 dev server。这个问题在 Vite 5 之后好了很多
• Markdown 里用 Vue 组件：语法正确但渲染不出来，通常是组件没有全局注册
• 构建后路由 404：SPA fallback 没配对，Cloudflare Pages 需要加 _redirects 文件

现在的效果

折腾完之后，博客加载速度在 Lighthouse 上能跑到 95+ 分。

样式也算有了一点自己的感觉。虽然和那些精心设计的主题博客比还差得远，但至少不完全是默认样式了。

够用就行。