部署

    • 文档放置在项目的 目录中;
    • 使用的是默认的构建输出位置;
    • VuePress 以本地依赖的形式被安装到你的项目中,并且配置了如下的 npm scripts:
    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
    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. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
    14. # 如果发布到 https://<USERNAME>.github.io/<REPO>
    15. # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
    16. cd -

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

    GitLab Pages and GitLab CI

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

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

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

    3. 在你项目的根目录下创建一个名为 .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
    1. 在 Netlify 中, 创建一个新的 Github 项目,使用以下设置:

      • Build Command: npm run build-docs 或者 yarn build-docs
      • Publish directory: docs/.vuepress/dist
    2. 点击 deploy 按钮!

    Google Firebase

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

    firebase.json:

    .firebaserc:

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

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

    你也可以通过 surge docs/.vuepress/dist yourdomain.com 来部署到 。

    Heroku

    1. 首先安装 ;

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

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

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

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

    1. 配置 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. 部署你的网站:
    1. # 发布网站
    2. git push heroku master
    3. heroku open