1. vitepress项目初始化
参考官网,下载vitepress依赖,初始化项目
2. .vitepess目录下的重要配置文件
config.mts 所有的配置集成到这里 nav.ts 维护导航路由,已经维护好了,后期改动不大 sidebar.ts 维护侧边栏路由 custom.css 自定义样式
3. 博客的文档组织形式
导航作为大分类,侧边栏细化分类 大分类到语言层次、技术类型层次,侧边栏细化到技术层次
1. 新增文档
- 在合适的目录下创建md文档,以英文命名,格式统一为小写字母加下划线
- 在对应的侧边栏中增加新路由
- 编译,预览
- git push
2. 文档的组织形式:
中文
我的笔记 基础 算法 数据库 语言 后端 框架 中间件 技术栈 高并发 前端 vue 项目实践 在线预览 商城系统 参考资料 博客 文档 教程 关于我
英文
notes basics algo database lang be frame middleware tech-stack fe vue projects preview mall refs blogs docs tutorials about me
4. github actions
把文档源目录单独放到一个私有的仓库中,使用actions将文档打包的网页部署到github pages的公开仓库。 使用的公共actions是:eaceiris/actions-gh-pages@v3 参考部署文件:
yml
# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
#
name: Deploy to External Pages
on:
# 在针对 `main` 分支的推送上运行。如果你
# 使用 `master` 分支作为默认分支,请将其更改为 `master`
push:
branches: [main]
# 允许你从 Actions 选项卡手动运行此工作流程
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# 只允许同时进行一次部署,跳过正在运行和最新队列之间的运行队列
# 但是,不要取消正在进行的运行,因为我们希望允许这些生产部署完成
concurrency:
group: pages
cancel-in-progress: false
jobs:
# 构建工作
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # 如果未启用 lastUpdated,则不需要
- uses: pnpm/action-setup@v3 # 如果使用 pnpm,请取消此区域注释
with:
version: 9
# - uses: oven-sh/setup-bun@v1 # 如果使用 Bun,请取消注释
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm # 或 pnpm / yarn
- name: Install dependencies
run: pnpm install # 或 pnpm install / yarn install / bun install
- name: Build with VitePress
run: pnpm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
- name: Deploy to Pages Repo
uses: peaceiris/actions-gh-pages@v3
with:
# 目标仓库配置
personal_token: ${{ secrets.GH_PAGES_TOKEN }}
external_repository: username/username.github.io # 替换为你的 Pages 仓库
publish_dir: ./docs/.vitepress/dist
keep_files: false # 清除旧文件
commit_message: 'Deploy from vitepress-source'
# 如果目标仓库使用 main 分支:
publish_branch: main
github网站配置步骤: 1. 创建一个Personal access tokens,允许权限:repo、workflow、write:packages、admin:repo_hook、audit_log 2. 在私有仓库添加token 3. 私有仓库的设置中,开放action的工作流读写权限