这里我们只介绍 GitLab 和 GitHub 的 pages 功能的部署#17
打开项目设置的 GitHub Pages 模块,将 Source 设置为 gh-pages,这样我们就可以将博客项目放在 master 分支,而部署到 gh-pages 分支。
GitHub Pages
Source
gh-pages
master
在根目录建一个 deploy.sh 文件:
deploy.sh
# 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果发布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果发布到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd -
::: warning 如果你用的 MAC,在项目根目录借助 终端 执行 bash deploy.sh 即可;如果你使用的是 WINDOWS,在项目根目录借助 Git Bash 执行 bash deploy.sh 即可。 :::
终端
bash deploy.sh
Git Bash
GitHub 的自动部署需要借助 travis-ci 。
GitHub
travis-ci
Manage repositories on GitHub
settings
token
Developer settings
Personal access tokens
Environment Variables
GITHUB_TOKEN
Cron Jobs
Branch
Interval
monthly
Options
Always run
.travis.yml
language: node_js node_js: - lts/* script: - npm run build deploy: provider: pages skip-cleanup: true local_dir: docs/.vuepress/dist # 项目打包后生成的文件的目录 github-token: $GITHUB_TOKEN # 这里这个变量就是刚才配置 token 时填写的那个变量 keep-history: true on: branch: master # 项目源码所在的分支
设置输出目录为 public:
public
由于 GitLab 的 pages 功能的指定文件夹是 public,所以我们要将项目的输出目录改为 public,也就是将 config.js 的 dest 设置为 public;
GitLab
pages
config.js
dest
本地编译,然后将项目提交到 GitLab 即可。
.gitlab-ci.yml
image: node:9.11.1 pages: cache: paths: - node_modules/ # 缓存 node_modules,加速编译 script: - npm install - npm run docs:build artifacts: paths: - public only: - master
GitHub
打开项目设置的
GitHub Pages模块,将Source设置为gh-pages,这样我们就可以将博客项目放在master分支,而部署到gh-pages分支。手动部署
在根目录建一个
deploy.sh文件:# 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果发布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果发布到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd -::: warning
如果你用的 MAC,在项目根目录借助
终端执行bash deploy.sh即可;如果你使用的是 WINDOWS,在项目根目录借助Git Bash执行bash deploy.sh即可。:::
自动部署
GitHub的自动部署需要借助travis-ci。GitHub登录;Manage repositories on GitHub按钮,将需要自动部署的项目导入进来;settings按钮,点击进去将进行配置:token:进入github的设置页面,点击Developer settings按钮,点击Personal access tokens按钮,在当前页面生成token,名字随便写,只是起到区分作用;token:将上面生成的token添加在项目的设置页面的Environment Variables,切记,名字不可随便写,在这里你写成GITHUB_TOKEN;Cron Jobs:(如果你的项目就在master分支,可以不用配置这里)Branch选择 你存放项目源码的分支,Interval选择monthly,Options选择Always run,添加成功后便会生效。.travis.yml(配置规范):language: node_js node_js: - lts/* script: - npm run build deploy: provider: pages skip-cleanup: true local_dir: docs/.vuepress/dist # 项目打包后生成的文件的目录 github-token: $GITHUB_TOKEN # 这里这个变量就是刚才配置 token 时填写的那个变量 keep-history: true on: branch: master # 项目源码所在的分支travis-ci的控制台就能看到你的项目在部署了。GitLab
手动部署
设置输出目录为
public:由于
GitLab的pages功能的指定文件夹是public,所以我们要将项目的输出目录改为public,也就是将config.js的dest设置为public;本地编译,然后将项目提交到
GitLab即可。自动部署
public;GitLab自带 CI,所以就省去了很多的配置步骤,只需要在项目根目录创建.gitlab-ci.yml(配置规范):image: node:9.11.1 pages: cache: paths: - node_modules/ # 缓存 node_modules,加速编译 script: - npm install - npm run docs:build artifacts: paths: - public only: - masterGitLab即可。