使用VitePress搭建个人博客
因为vitepress要求Node.js的版本必须大于等于18，所以我们首先需要查看一下Node.js的版本，确保Node.js的版本大于等于18。
使用如下命令查看Node.js的版本：
bash
$ node --version
v18.9.0下面，我们开始一步一步地使用vitepress创建个人博客啦。
1、创建博客根目录并进入目录：
bash
$ mkdir 15-vitepress-blog && cd 15-vitepress-blog笔者汪小成这里的博客根目录设置为15-vitepress-blog。
2、初始化项目：
bash
$ yarn init上面的命令用于初始化一个新的Node.js项目，会在项目的根目录下生成一个package.json文件。
3、安装vitepress、vue：
bash
$ yarn add -D vitepress vue4、使用vitepress设置向导快速创建一个基本项目：
bash
$ npx vitepress init
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./
│
◇ Site title:
│ 汪小成的日志
│
◇ Site description:
│ A VitePress Site
│
◇ Theme:
│ Default Theme + Customization
│
◇ Use TypeScript for config and theme files?
│ No
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run npm run docs:dev and start writing.在设置向导中，笔者汪小成做了如下设置：
- 网站标题：
汪小成的日志 - 网站描述：
A VitePress Site - 主题：
Default Theme + Customization，默认主题+个性定制 - 是否使用TypeScript：
否 - 是否在
package.json中添加VitePress npm脚本：是
5、预览项目
使用如下命令启动项目：
bash
$ yarn docs:dev待项目启动成功，在浏览器地址栏输入http://localhost:5173/会看下如下效果。
6、目录结构
项目目录如下所示：
.
├── .vitepress
│ ├── config.mjs # vitepress配置文件
│ └── theme # 样式和主题
│ ├── index.js # 自定义主题入口文件
│ └── style.css # 自定义样式
├── api-examples.md # 运行时 API 示例
├── index.md # 博客首页
├── markdown-examples.md # Markdown语法示例
└── package.json