部署

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

  • Markdown 源文件放置在你项目的 docs 目录；
  • 使用的是默认的构建输出目录 (.vuepress/dist) ；
  • 使用 Yarn classic 作为包管理器，当然也可以使用 NPM 。
  • VuePress 作为项目依赖安装，并在 package.json 中配置了如下脚本：
  1. {
  2.   "scripts": {
  3.     "docs:build": "vuepress build docs"
  4.   }
  5. }

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 文件来配置工作流。

::: details 点击展开配置样例

  1. name: docs
  3. on:
  4.   # 每当 push 到 main 分支时触发部署
  5.   push:
  6.     branches: [main]
  7.   # 手动触发部署
  8.   workflow_dispatch:
  10. jobs:
  11.   docs:
  12.     runs-on: ubuntu-latest
  14.     steps:
  15.       - uses: actions/checkout@v2
  16.         with:
  17.           # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
  18.           fetch-depth: 0
  20.       - name: Setup Node.js
  21.         uses: actions/setup-node@v1
  22.         with:
  23.           # 选择要使用的 node 版本
  24.           node-version: '14'
  26.       # 缓存 node_modules
  27.       - name: Cache dependencies
  28.         uses: actions/cache@v2
  29.         id: yarn-cache
  30.         with:
  31.           path: |
  32.             **/node_modules
  33.           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
  34.           restore-keys: |
  35.             ${{ runner.os }}-yarn-
  37.       # 如果缓存没有命中，安装依赖
  38.       - name: Install dependencies
  39.         if: steps.yarn-cache.outputs.cache-hit != 'true'
  40.         run: yarn --frozen-lockfile
  42.       # 运行构建脚本
  43.       - name: Build VuePress site
  44.         run: yarn docs:build
  46.       # 查看 workflow 的文档来获取更多信息
  47.       # @see https://github.com/crazy-max/ghaction-github-pages
  48.       - name: Deploy to GitHub Pages
  49.         uses: crazy-max/ghaction-github-pages@v2
  50.         with:
  51.           # 部署到 gh-pages 分支
  52.           target_branch: gh-pages
  53.           # 部署目录为 VuePress 的默认输出目录
  54.           build_dir: docs/.vuepress/dist
  55.         env:
  56.           # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
  57.           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

:::

::: tip 请参考 GitHub Pages 官方指南 来获取更多信息。 :::

GitLab Pages

  1. 设置正确的 base 选项。

    如果你准备发布到 https://<USERNAME>.gitlab.io/ ，你可以省略这一步，因此 base 默认就是 "/" 。

    如果你准备发布到 https://<USERNAME>.gitlab.io/<REPO>/ ，也就是说你的仓库地址是 https://gitlab.com/<USERNAME>/<REPO> ，则将 base 设置为 "/<REPO>/"。

  2. 创建 .gitlab-ci.yml 文件来配置 GitLab CI 工作流。

::: details 点击展开配置样例

  1. # 选择你要使用的 docker 镜像
  2. image: node:14-buster
  4. pages:
  5.   # 每当 push 到 main 分支时触发部署
  6.   only:
  7.   - main
  9.   # 缓存 node_modules
  10.   cache:
  11.     paths:
  12.     - node_modules/
  14.   # 安装依赖并运行构建脚本
  15.   script:
  16.   - yarn --frozen-lockfile
  17.   - yarn docs:build --dest public
  19.   artifacts:
  20.     paths:
  21.     - public

:::

::: tip 请参考 GitLab Pages 官方指南 来获取更多信息。 :::

Google Firebase

  1. 请确保你已经安装了 firebase-tools。

  2. 在你项目的根目录下创建 firebase.json 和 .firebaserc，并包含以下内容：

firebase.json:

  1. {
  2.   "hosting": {
  3.     "public": "./docs/.vuepress/dist",
  4.     "ignore": []
  5.   }
  6. }

.firebaserc:

  1. {
  2.   "projects": {
  3.     "default": "<YOUR_FIREBASE_ID>"
  4.   }
  5. }
  1. 在执行了 yarn docs:build 或 npm run docs:build 后, 使用 firebase deploy 指令来部署。

::: tip 请参考 Firebase CLI 官方指南 来获取更多信息。 :::

Heroku

  1. 首先安装 Heroku CLI；

  2. 在这里 注册一个 Heroku 账号；

  3. 运行 heroku login 并填写你的 Heroku 认证信息：

  1. heroku login
  1. 在你的项目根目录中，创建一个名为 static.json 的文件，并包含下述内容：

static.json:

  1. {
  2.   "root": "./docs/.vuepress/dist"
  3. }

这里是你项目的配置，请参考 heroku-buildpack-static 来获取更多信息。

Layer0

请查看 Layer0 Documentation > Framework Guides > VuePress 。

Netlify

  1. 前往 Netlify ，从 GitHub 创建一个新项目，并进行如下配置：

    • Build Command: yarn docs:build
    • Publish directory: docs/.vuepress/dist

  2. 设置 Environment variables 来选择 Node 版本：

    • NODE_VERSION: 14

  3. 点击 deploy 按钮。

Vercel

  1. 前往 Vercel ，从 GitHub 创建一个新项目，并进行如下配置：

    • FRAMEWORK PRESET: Other
    • BUILD COMMAND: yarn docs:build
    • OUTPUT DIRECTORY: docs/.vuepress/dist

  2. 点击 deploy 按钮。

云开发 CloudBase

云开发 CloudBase 是一个云原生一体化的 Serverless 云平台，支持静态网站、容器等多种托管能力，并提供简便的部署工具 CloudBase Framework 来一键部署应用。

  1. 全局安装 CloudBase CLI ：
  1. npm install -g @cloudbase/cli
  1. 在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 开通环境：
  1. cloudbase init --without-template
  2. cloudbase framework:deploy

CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认。

确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 GitHub Action 来持续部署 GitHub 上的 VuePress 应用。

也可以使用 cloudbase init --template vuepress 快速创建和部署一个新的 VuePress 应用。

::: tip 更多详细信息请查看 CloudBase Framework 的部署项目示例 :::

21 云盒子

请查看 21 云盒子 - 部署一个 VuePress 静态网页。