VitePress 博客搭建指南
本文将介绍如何从零开始搭建一个基于 VitePress 的个人博客。
环境准备
首先确保你的开发环境中已安装：
- Node.js 18 或更高版本
- pnpm（推荐的包管理器）
bash
# 安装 pnpm
npm install -g pnpm项目初始化
使用 @sugarat/theme 提供的脚手架工具可以快速创建项目：
bash
pnpm create @sugarat/theme或者手动创建项目并安装依赖：
bash
pnpm add vitepress @sugarat/theme vue目录结构
├── docs
│ ├── .vitepress
│ │ ├── blog-theme.ts # 主题配置
│ │ ├── config.mts # VitePress 配置
│ │ └── theme
│ │ └── index.ts # 主题入口
│ ├── posts # 博客文章目录
│ │ └── *.md
│ ├── about.md # 关于页面
│ └── index.md # 首页
├── package.json
└── vercel.json # Vercel 部署配置写作技巧
Frontmatter 配置
每篇文章都可以通过 frontmatter 设置元数据：
yaml
---
title: 文章标题
date: 2026-03-20
description: 文章描述
tags:
- 标签1
- 标签2
---代码高亮
VitePress 内置了代码高亮支持，使用三个反引号加语言标识即可：
js
console.log('Hello VitePress!')总结
VitePress + @sugarat/theme 的组合让博客搭建变得非常简单，专注于内容创作即可。