VuePress

目录

部署

下述的指南基于以下条件：

• Markdown 源文件放置在你项目的 docs 目录；

• 使用的是默认的构建输出目录 (.vuepress/dist) ；

• 使用 pnpm 作为包管理器，当然也支持使用 npm 或 yarn 。

• VuePress 作为项目依赖安装，并在 package.json 中配置了如下脚本：

  {
    "scripts": {
      "docs:build": "vuepress build docs"
    }
  }

Github Pages

1. 设置正确的 base 选项。
   如果你准备发布到 https://<USERNAME>.github.io/ ，你可以省略这一步，因为 base 默认就是 "/" 。
   如果你准备发布到 https://<USERNAME>.github.io/<REPO>/ ，也就是说你的仓库地址是 https://github.com/<USERNAME>/<REPO> ，则将 base 设置为 "/<REPO>/"。
2. 选择你想要使用的 CI 工具。这里我们以 GitHub Actions 为例。
   创建 .github/workflows/docs.yml 文件来配置工作流。

配置样例demo：（请参考 GitHub Pages 官方指南 来获取更多信息）

name: docs

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发部署
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          # 选择要使用的 pnpm 版本
          version: 8
          # 使用 pnpm 安装依赖
          run_install: true

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          # 选择要使用的 node 版本
          node-version: 18
          # 缓存 pnpm 依赖
          cache: pnpm

      # 运行构建脚本
      - name: Build VuePress site
        run: pnpm docs:build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          # 部署到 gh-pages 分支
          target_branch: gh-pages
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

GitLab Pages

Google Firebase

Heroku

Kinsta

Edgio

Netlify

Vercel

云开发 CloudBase

21 云盒子