部署

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

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

GitHub Pages

  • docs/.vuepress/config.js 中设置正确的 base

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

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO&gt;),则将 base 设置为 "/<REPO>/"

  • 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释):
  1. #!/usr/bin/env sh
  2. # 确保脚本抛出遇到的错误
  3. set -e
  4. # 生成静态文件
  5. npm run docs:build
  6. # 进入生成的文件夹
  7. cd docs/.vuepress/dist
  8. # 如果是发布到自定义域名
  9. # echo 'www.example.com' > CNAME
  10. git init
  11. git add -A
  12. git commit -m 'deploy'
  13. # 如果发布到 https://<USERNAME>.github.io
  14. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
  15. # 如果发布到 https://<USERNAME>.github.io/<REPO>
  16. # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
  17. cd -

提示

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

GitHub Pages and Travis CI

  • docs/.vuepress/config.js 中设置正确的 base

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

如果你打算发布到 https://<USERNAME or GROUP>.github.io/<REPO>/(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO&gt;),则将 base 设置为 "/<REPO>/"

  • 在项目的根目录创建一个名为 .travis.yml 的文件;

  • 使用 GitHub Pages 部署提供程序模板并遵循 Travis 文档

  1. language: node_js
  2. node_js:
  3. - lts/*
  4. script:
  5. - npm run docs:build
  6. deploy:
  7. provider: pages
  8. skip-cleanup: true
  9. local_dir: docs/.vuepress/dist
  10. github-token: $GITHUB_TOKEN # a token generated on github allowing travis to push code on you repository
  11. keep-history: true
  12. on:
  13. branch: master

GitLab Pages and GitLab CI

  • docs/.vuepress/config.js 中设置正确的 base

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

如果你打算发布到 https://<USERNAME or GROUP>.gitlab.io/<REPO>/(也就是说你的仓库在 https://gitlab.com/<USERNAME>/<REPO&gt;),则将 base 设置为 "/<REPO>/"

  • .vuepress/config.js 中将 dest 设置为 public

  • 在你项目的根目录下创建一个名为 .gitlab-ci.yml 的文件,无论何时你提交了更改,它都会帮助你自动构建和部署:

  1. image: node:9.11.1
  2. pages:
  3. cache:
  4. paths:
  5. - node_modules/
  6. script:
  7. - npm install
  8. - npm run docs:build
  9. artifacts:
  10. paths:
  11. - public
  12. only:
  13. - master

Netlify

  • 在 Netlify 中, 创建一个新的 GitHub 项目,使用以下设置:
  • Build Command: npm run build:docs 或者 yarn build:docs
  • Publish directory: docs/.vuepress/dist
  • 点击 deploy 按钮!

Google Firebase

  • 请确保你已经安装了 firebase-tools

  • 在你项目的根目录下创建 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. }
  • 在执行了 yarn docs:buildnpm run docs:build 后, 使用 firebase deploy 指令来部署。

Surge

  • 首先,假设你已经安装了 surge

  • 运行 yarn docs:build 或者 npm run docs:build

  • 想要使用 surge 来部署,你可以运行: surge docs/.vuepress/dist

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

Heroku

  • 首先安装 Heroku CLI

  • 在这里 注册一个 Heroku 账号;

  • 运行 heroku login 并填写你的 Heroku 证书:

  1. heroku login
  • 在你的项目根目录中,创建一个名为 static.json 的文件,并包含下述内容:static.json:
  1. {
  2. "root": "./docs/.vuepress/dist"
  3. }

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

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

Now

请查看 用 Now 部署一个 VuePress 的示例站点.