部署

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

  • Markdown 源文件放置在你项目的 docs 目录;
  • 使用的是默认的构建输出目录 (.vuepress/dist) ;
  • 使用 Yarn classic在新窗口打开 作为包管理器,当然也可以使用 NPM 。
  • 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 文件来配置工作流。

点击展开配置样例
name: docs

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

jobs:
  docs:
    runs-on: ubuntu-latest

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

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          # 选择要使用的 node 版本
          node-version: '14'

      # 缓存 node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 如果缓存没有命中,安装依赖
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

      # 运行构建脚本
      - name: Build VuePress site
        run: yarn 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 }}

提示

请参考 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在新窗口打开 工作流。

点击展开配置样例
# 选择你要使用的 docker 镜像
image: node:14-buster

pages:
  # 每当 push 到 main 分支时触发部署
  only:
  - main

  # 缓存 node_modules
  cache:
    paths:
    - node_modules/

  # 安装依赖并运行构建脚本
  script:
  - yarn --frozen-lockfile
  - yarn docs:build --dest public

  artifacts:
    paths:
    - public

提示

请参考 GitLab Pages 官方指南在新窗口打开 来获取更多信息。

Google Firebase

  1. 请确保你已经安装了 firebase-tools在新窗口打开

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

firebase.json:

{
  "hosting": {
    "public": "./docs/.vuepress/dist",
    "ignore": []
  }
}

.firebaserc:

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

提示

请参考 Firebase CLI 官方指南在新窗口打开 来获取更多信息。

Heroku

  1. 首先安装 Heroku CLI在新窗口打开

  2. 在这里在新窗口打开 注册一个 Heroku 账号;

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

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

static.json:

{
  "root": "./docs/.vuepress/dist"
}

这里是你项目的配置,请参考 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 :
npm install -g @cloudbase/cli
  1. 在项目根目录运行以下命令一键部署 VuePress 应用,在部署之前可以先 开通环境在新窗口打开
cloudbase init --without-template
cloudbase framework:deploy

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

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

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

提示

更多详细信息请查看 CloudBase Framework 的部署项目示例在新窗口打开

21 云盒子

请查看 21 云盒子 - 部署一个 VuePress 静态网页在新窗口打开