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.