使用 VitePress 搭建个人博客的完整指南

VitePress 是 Vue 团队推出的静态站点生成器，它基于 Vite 构建，拥有极快的开发体验和出色的性能表现。

为什么选择 VitePress？

在众多静态站点生成器中，我最终选择了 VitePress，原因如下：

1. 极致的性能

VitePress 使用 Vite 作为构建工具，开发时热更新几乎是即时的。生产构建采用 SSG（静态站点生成），首屏加载速度极快。

2. Vue 3 驱动

如果你熟悉 Vue，那么 VitePress 会让你如鱼得水。你可以在 Markdown 中直接使用 Vue 组件，实现各种交互效果。

3. 开箱即用

VitePress 自带了很多实用的功能：

• 自动生成侧边栏
• 全文搜索
• 深色模式
• 国际化支持

快速开始

初始化项目

# 创建项目目录
mkdir my-blog && cd my-blog

# 初始化 npm 项目
npm init -y

# 安装 VitePress
npm install -D vitepress

# 初始化 VitePress
npx vitepress init

项目结构

my-blog/
├── .vitepress/
│   ├── config.ts      # 配置文件
│   └── theme/         # 自定义主题
├── posts/             # 博客文章
├── public/            # 静态资源
└── index.md           # 首页

配置文件

// .vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "我的博客",
  description: "分享技术与生活",
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: '/about' }
    ]
  }
})

主题定制

VitePress 的主题定制非常灵活。你可以：

1. 覆盖默认 CSS 变量
2. 扩展默认主题
3. 从零开始创建自定义主题

自定义样式

/* .vitepress/theme/style.css */
:root {
  --vp-c-brand-1: #10b981;
  --vp-c-brand-2: #059669;
  --vp-font-family-base: 'Noto Sans SC', sans-serif;
}

部署

VitePress 构建的静态站点可以部署到任何静态托管服务：

• GitHub Pages（免费）
• Vercel（推荐）
• Netlify
• Cloudflare Pages

GitHub Pages 部署

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: .vitepress/dist

总结

VitePress 是一个非常优秀的静态站点生成器，特别适合用来搭建技术博客。如果你正在寻找一个现代化、高性能的博客解决方案，强烈推荐尝试一下 VitePress！

---

如果这篇文章对你有帮助，欢迎分享给更多的人！