部署

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

  • 文档放置在项目的 docs 目录中；
  • 使用的是默认的构建输出位置；
  • VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts:
  1. {
  2.   "scripts": {
  3.     "docs:build": "vuepress build docs"
  4.   }
  5. }

GitHub Pages

  1. 在 docs/.vuepress/config.js 中设置正确的 base。

    如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

    如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

  2. 在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:

  1. #!/usr/bin/env sh
  3. # 确保脚本抛出遇到的错误
  4. set -e
  6. # 生成静态文件
  7. npm run docs:build
  9. # 进入生成的文件夹
  10. cd docs/.vuepress/dist
  12. # 如果是发布到自定义域名
  13. # echo 'www.example.com' > CNAME
  15. git init
  16. git add -A
  17. git commit -m 'deploy'
  19. # 如果发布到 https://<USERNAME>.github.io
  20. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
  22. # 如果发布到 https://<USERNAME>.github.io/<REPO>
  23. # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
  25. cd -

::: tip
你可以在你的持续集成的设置中，设置在每次 push 代码时自动运行上述脚本。
:::

GitLab Pages and GitLab CI

  1. 在 docs/.vuepress/config.js 中设置正确的 base。

    如果你打算发布到 https://<USERNAME or GROUP>.gitlab.io/，则可以省略这一步，因为 base 默认即是 "/"。

    如果你打算发布到 https://<USERNAME or GROUP>.gitlab.io/<REPO>/（也就是说你的仓库在 https://gitlab.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

  2. 在 .vuepress/config.js 中将 dest 设置为 public。

  3. 在你项目的根目录下创建一个名为 .gitlab-ci.yml 的文件，无论何时你提交了更改，它都会帮助你自动构建和部署：
  1. image: node:9.11.1
  3. pages:
  4.  cache:
  5.    paths:
  6.    - node_modules/
  8.  script:
  9.  - npm install
  10.  - npm run docs:build
  11.  artifacts:
  12.    paths:
  13.    - public
  14.  only:
  15.  - master

Netlify

  1. 在 Netlify 中, 创建一个新的 Github 项目，使用以下设置：

    • Build Command: npm run build-docs 或者 yarn build-docs
    • Publish directory: docs/.vuepress/dist

  2. 点击 deploy 按钮！

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 指令来部署。

Surge

  1. 首先，假设你已经安装了 surge；

  2. 运行 yarn docs:build 或者 npm run docs:build；

  3. 想要使用 surge 来部署，你可以运行： surge docs/.vuepress/dist；

你也可以通过 surge docs/.vuepress/dist yourdomain.com 来部署到 自定义域名。

Heroku

  1. 首先安装 Heroku CLI；

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

  3. 运行 heroku login 并填写你的 Heroku 证书：

    1. heroku login

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

static.json:

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

这里是你项目的配置，请参考 heroku-buildpack-static 了解更多。

  1. 配置 Heroku 的 git 远程仓库：
  1. # 版本变化
  2. git init
  3. git add .
  4. git commit -m "My site ready for deployment."
  6. # 以指定的名称创建一个新的 heroku 应用
  7. heroku apps:create example
  9. # 为静态网站设置构建包
  10. heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
  1. 部署你的网站：
  1. # 发布网站
  2. git push heroku master
  4. # 打开浏览器查看 Helku CI 的 dashboard
  5. heroku open