挥一拍

主题

在 VitePress 中搭建个人主页与 Blog ​

本文记录我如何用 VitePress 搭建本站点。它纯静态、构建快、Markdown 友好,非常适合个人主页与博客。

为什么选择 VitePress ​

  • 纯静态输出: vitepress build 会生成静态 HTML/CSS/JS,可直接部署到任意静态托管
  • Vue 生态: 与 Vue3 技术栈天然契合
  • Markdown 写作: 用 .md 写内容,内置代码高亮
  • 开箱即用: 自带本地搜索、深色模式、sitemap 支持

初始化项目 ​

bash
# 在 blog 目录下
pnpm add -D vitepress

# 创建 package.json 并添加脚本
# "dev": "vitepress dev .", "build": "vitepress build ."

目录结构 ​

blog/
├── .vitepress/
│   ├── config.mjs        # 站点配置
│   └── theme/            # 主题定制
├── index.md              # 首页
├── about.md              # 关于页
├── projects.md           # 项目展示
├── blog/                 # 博客文章
│   └── tech/             # 技术笔记
├── public/               # 静态资源
└── package.json

配置站点 ​

核心在 .vitepress/config.mjs,包括站点标题、导航、侧边栏、搜索等。

生成 sitemap ​

VitePress 默认不直接生成 sitemap.xml,可以写一个小脚本在 build 后扫描 dist/ 下的 HTML 生成,方便提交给搜索引擎(详见站长平台收录与推流指南)。

部署 ​

把 dist/ 上传到任意静态托管即可,例如 Nginx、GitHub Pages、Cloudflare Pages、Vercel。