以前用VuePress 生成静态网站，现在换了玩 Vitepress。Vitepress 和 Vuepress 是两个用于生成静态网站的工具，都是由 Vue.js 核心团队开发和维护的。它们的主要用途是为文档和博客创建静态网站。
Vitepress 特点
- 基于 Vite：Vitepress 是基于 Vite 构建的。Vite 是一个现代的前端构建工具，提供了极快的开发服务器和高效的构建机制。与传统的构建工具相比，Vite 有显著的性能提升。
- 轻量级：Vitepress 是一个更轻量级的静态网站生成器，旨在提供一个更简洁、更高效的文档生成体验。
- Vue 3 支持：Vitepress 默认支持 Vue 3，这意味着你可以利用 Vue 3 的新特性和优化来构建你的文档站点。
- 更快的开发体验：由于 Vite 的快速热更新特性，Vitepress 提供了更快的开发体验。
VitePress 官方文档 vitepress.dev/zh/guide/ge…
创建工程
创建并进入新项目的目录。
$ mkdir vitepress-starter && cd vitepress-starter
用你喜欢的包管理工具初始化项目。
$ yarn init
添加 VitePress 和 Vue 作为项目的开发依赖项。
$ yarn add --dev vitepress vue
创建第一篇文档“Hello VitePress”。
$ mkdir docs && echo '# Hello VitePress' > docs/index.md
在 package.json 里添加一些脚本。
$ vim package.json
增加如下信息：
"scripts":{
"docs:dev":"vitepress dev docs",
"docs:build":"vitepress build docs",
"docs:serve":"vitepress serve docs"
}
在本地启动文档服务。
$ yarn docs:dev
输出如下，浏览器访问如下地址即可。
vitepress v1.3.1
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
部署项目
- 上传项目到Github仓库：首先在
Github上创建一个仓库，并且将你的VitePress项目上传到这个仓库中。 - 修改配置文件：在你的主题配置文件
docs/.vitepress/config.js中，将base属性设置为你的 GitHub 仓库的名称。 如果你打算将你的站点部署到https://foo.github.io/blog/，那么你应该将base设置为'/blog/'。 它应该始终以斜线开头和结尾。 - 设置Github部署文件：在项目的
.github/workflows目录中创建一个名为deploy.yml的文件，文件目录为.github/workflows/deploy.yml，内容如下：
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# 1.检查配置
- uses: actions/checkout@v3
with:
fetch-depth: 0
# 2.安装依赖
- uses: actions/setup-node@v3
with:
node-version: 20
cache: yarn
- run: yarn install --frozen-lockfile
# 3.构建
- name: Build
run: yarn docs:build
# 4.部署（创建并部署到当前仓库的gh-pages分支）
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist
# cname: example.com # if wanna deploy to custom domain
- 在 Github 仓库下的Settings 中设置 Actions，增加 Workflow 读写权限，以让 Action 可以创建名为
gh-pages的部署分支。
- 查看自动触发的部署情况，绿色勾勾表示正常部署完成。此时可以在仓库下查看是否创建了
gh-pages分支了。
- 在 Github 仓库 Settings 中设置 Pages 的部署分支。
此时即可正常访问站点了。
