Skip to content

部署教程

思路:使用 Github Page 静态网站托管服务

步骤如下

准备工作:在 config.mjs 文件中的开头配置 base,代码如下

javascript
base:'vitepress', // 路由为 GitHub 仓库名称

(1)在根目录下添加.gitignore文件,文件内容如下

node_modules
.DS_Store
dist
dist-ssr
cache
.cache
.temp
*.local

在根目录下==添加空文件==,命名为.nojekyll

(2)使用 git 命令推送到 GitHub 仓库

(3)进入本仓库的 settings,找到 page,选择 GitHub Action

(4)选择仓库上方的 Actions,设置工作流

(5)创建deploy.yml脚本,提交更改

工作流脚本(截止 2025 年 6.18 前)

js
name: Deploy VitePress site to Pages
on:
  push:
    branches: [main]  # 监听 main 分支的 push 事件
permissions:
  contents: read    # 读取仓库内容
  pages: write      # 允许部署到 GitHub Pages
  id-token: write   # 允许使用 id-token 进行认证
concurrency:
  group: pages
  cancel-in-progress: false  # 保证每次只会有一个部署在进行中
jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0  # 保证检查所有提交尤其是需要获取历史信息时
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8.6.12  # 指定 pnpm 版本
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 18.20.4  # 使用 Node.js 18.20.4
          cache: pnpm  # 启用 pnpm 缓存
      - name: Setup Pages
        uses: actions/configure-pages@v4  # 配置 GitHub Pages
      - name: Install dependencies
        run: pnpm install  # 安装依赖
      - name: Build with VitePress
        run: |
          pnpm run docs:build  # 构建 VitePress 项目
          touch .vitepress/dist/.nojekyll  # 防止 GitHub Pages 使用 Jekyll 处理这个站点
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3  # 使用 v3 上传构建产物
        with:
          path: .vitepress/dist  # 上传 .vitepress/dist 目录
  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URL
    needs: build  # 确保部署在构建完成后进行
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4  # 使用 v4 部署构建产物

说明

注意:这里==使用的是 pnpm==,在 node 和 pnpm 版本号的代码中需要==换成本地对应的版本==

job 中的部分

yml
- name: Setup pnpm
    uses: pnpm/action-setup@v3
    with:
        version: 8.6.12  # 指定 pnpm 版本
    - name: Setup Node
    uses: actions/setup-node@v4
    with:
        node-version: 18.20.4  # 使用 Node.js 18.20.4
        cache: pnpm  # 启用 pnpm 缓存

每一次更新仓库都会==自动执行工作==流更新网站内容

如果失败了怎么办?

检查 job 部分中包含@的语句,其中的版本需要和官方文档保持一致,和官方文档一一对比修改即可

官方的工作流文件:https://vitepress.dev/zh/guide/deploy

(6)等待部署完成,在仓库 settings 中 page 界面查看域名

注意点:==markdown 文件的编写要规范,否则部署会报错==