一、VitePress
vitepress官网：vitepress.dev/zh/
1. 什么是vitepress
官方语言：VitePress 是一个静态站点生成器(SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
大概原理就是用 Markdown 编写的内容 生成可以轻松部署到任何地方的静态 HTML 页面。
2.使用场景
-
技术文档：例如 API 文档、开发者指南、安装手册等。
-
产品说明文档：为产品提供使用指南、安装教程等文档支持。
-
博客：如果你希望用 Markdown 格式管理博客内容，VitePress 也可以作为一个简洁的博客引擎。
-
学习资源：个人或团队的学习笔记、教程等。
二、项目创建
前置准备：
1.创建项目：
mkdir vitepress-demo
cd vitepress-demo
2.配置项目：
pnpm init //项目初始化
pnpm add -D vitepress //安装vitePress
pnpm vitepress init //初始化vitepress
初始化之后，会有如下几个问题需要回答：
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title: //首页标题
│ My Blog
│
◇ Site description: //首页描述
│ vitepress分享
│
◆ Theme: //主题
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme + Customization
│ ○ Custom Theme
└
3.项目结构
生成的文件结构应该是这样的：
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md
└─ package.json
docs 目录作为 VitePress 站点的项目根目录。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的位置。public目录下，存放静态资源。配置文件 (.vitepress/config.js) 能够自定义 VitePress 站点的各个方面，最基本的选项是站点的标题和描述：
export default {
// 站点级选项
title: "My Blog",
description: "vitepress分享",
themeConfig: {
// 主题级选项
}
}
4.运行项目
pnpm run docs:dev
可以看到我们设置的标题和描述已经展示出来了。
三、项目部署 （内容开发部分会在下一篇文章单独讲）
1.新建一个github项目
2.构建 VitePress 项目
2.1 设置 config 中的 base：
export default defineConfig({
base: '/vitepress-share/',
...,
})
2.2 项目打包
运行pnpm run docs:build
当打包完成后，会生成dist文件夹
2.3 项目发布
- clone新创建的github项目，并把刚才打包后的dist文件夹中的内容（不包含dist），发布到main分支。
3. github Page部署
- 点击 Setting 按钮
- 点击 Pages 按钮
- 选择 main 分支，并点击save。
- 等待几分钟后刷新页面，当出现 Visit site 时，就部署成功了。
点击 Visit site 就可以进入到我们的个人博客首页啦。
4. 更新项目
当文档内容需要更新的时候，在开发完成之后，重新构建完成，把 dist 文件夹中内容重新发布到 main 分支即可，点击 Setting-> Pages 模块刷新页面，可以看到这下面有部署的时间点。
到此，整个构建vitepress项目并部署github page的流程就完成了。剩下的就是完善我们页面中的内容啦。
最后附上我的个人样例：zhouzh429.github.io/vitepress-d…
