Skip to content

1. vitepress项目初始化

参考官网,下载vitepress依赖,初始化项目

2. .vitepess目录下的重要配置文件

config.mts 所有的配置集成到这里 nav.ts 维护导航路由,已经维护好了,后期改动不大 sidebar.ts 维护侧边栏路由 custom.css 自定义样式

3. 博客的文档组织形式

导航作为大分类,侧边栏细化分类 大分类到语言层次、技术类型层次,侧边栏细化到技术层次

1. 新增文档

  1. 在合适的目录下创建md文档,以英文命名,格式统一为小写字母加下划线
  2. 在对应的侧边栏中增加新路由
  3. 编译,预览
  4. 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的工作流读写权限

Released under the MIT License.