洪涛的个人主页

主题

用 VitePress 搭建个人技术博客 ​

分享使用 VitePress 从零搭建个人博客站的完整过程，包括主题定制和部署方案。

为什么选择 VitePress ​

作为一个前端开发者，我需要一个满足以下条件的博客方案：

  • 轻量快速：不想用 WordPress 这种重型 CMS
  • Markdown 友好：直接用 Markdown 写文章
  • 可定制性强：能嵌入 Vue 组件做交互
  • 部署简单：静态站点，CDN 加速

VitePress 完美满足这些需求。它是 VuePress 的继任者，基于 Vite 构建，开发体验极佳。

快速开始 ​

bash
# 初始化项目
mkdir my-blog && cd my-blog
pnpm add -D vitepress
pnpm exec vitepress init

初始化向导会询问几个配置选项，按提示填写即可。完成后运行：

bash
pnpm exec vitepress dev

项目结构 ​

.
├── .vitepress/
│   ├── config.mts      # 站点配置
│   └── theme/          # 自定义主题
├── index.md            # 首页
├── guide/              # 文章目录
│   ├── getting-started.md
│   └── configuration.md
└── package.json

核心配置 ​

.vitepress/config.mts 是最关键的配置文件：

typescript
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: '我的技术博客',
  description: '记录前端开发的学习与思考',

  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '文章', link: '/guide/getting-started' }
    ],

    sidebar: [
      {
        text: '入门指南',
        items: [
          { text: '快速开始', link: '/guide/getting-started' },
          { text: '配置详解', link: '/guide/configuration' }
        ]
      }
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/yourname' }
    ],

    footer: {
      message: 'Released under the MIT License.',
      copyright: '© 2024 Your Name'
    }
  }
})

首页定制 ​

VitePress 支持在 Markdown 中使用 Vue 组件，这让首页可以非常灵活：

markdown
---
layout: home

hero:
  name: "我的博客"
  text: "前端技术分享"
  tagline: 记录学习与成长
  actions:
    - theme: brand
      text: 开始阅读
      link: /guide/getting-started

features:
  - title: 前端开发
    details: Vue3、TypeScript、性能优化
  - title: 工程化
    details: Vite、Webpack、CI/CD
  - title: AIGC
    details: AI 辅助开发、Stable Diffusion
---

部署 ​

VitePress 构建产物是纯静态文件，可以部署到任何静态托管服务：

bash
pnpm exec vitepress build

常见部署选择：

  • GitHub Pages：免费，适合个人博客
  • Vercel：自动部署，支持自定义域名
  • 国内云服务器：需要备案，但访问速度快

总结 ​

VitePress 是目前前端开发者搭建技术博客的最佳选择之一。它简单、快速、可扩展，让你专注于内容创作而不用操心博客系统本身的维护。