这里我们只介绍 GitLab 和 GitHub 的 pages 功能的部署 | CNB博客

GitHub

打开项目设置的 GitHub Pages 模块，将 Source 设置为 gh-pages，这样我们就可以将博客项目放在 master 分支，而部署到 gh-pages 分支。

手动部署

在根目录建一个 deploy.sh 文件：

bash

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> <span class="token parameter variable">-e</span>

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run docs:build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.example.com' > CNAME</span>

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> <span class="token parameter variable">-A</span>
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">'deploy'</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME>.github.io</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME>/&lt;USERNAME>.github.io.git master</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME>.github.io/&lt;REPO></span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME>/&lt;REPO>.git master:gh-pages</span>

<span class="token builtin class-name">cd</span> -

::: warning
如果你用的 MAC，在项目根目录借助 终端 执行 bash deploy.sh 即可；如果你使用的是 WINDOWS，在项目根目录借助 Git Bash 执行 bash deploy.sh 即可。
:::

自动部署

GitHub 的自动部署需要借助 travis-ci 。

打开 travis-ci，使用 GitHub 登录；
进入设置页面，点击 Manage repositories on GitHub 按钮，将需要自动部署的项目导入进来；
项目列表中，项目后面有一个 settings 按钮，点击进去将进行配置：
1. 获取 token：进入github的设置页面，点击 Developer settings 按钮，点击 Personal access tokens 按钮，在当前页面生成 token，名字随便写，只是起到区分作用；
2. 配置 token：将上面生成的 token 添加在项目的设置页面的 Environment Variables，切记，名字不可随便写，在这里你写成 GITHUB_TOKEN；
3. 配置 Cron Jobs：（如果你的项目就在 master 分支，可以不用配置这里）Branch 选择你存放项目源码的分支，Interval 选择 monthly，Options 选择 Always run，添加成功后便会生效。

在根目录下创建 .travis.yml（配置规范）：

yml

<span class="token key atrule">language</span><span class="token punctuation">:</span> node_js
<span class="token key atrule">node_js</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> lts/*
<span class="token key atrule">script</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> npm run build
<span class="token key atrule">deploy</span><span class="token punctuation">:</span>
  <span class="token key atrule">provider</span><span class="token punctuation">:</span> pages
  <span class="token key atrule">skip-cleanup</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">local_dir</span><span class="token punctuation">:</span> docs/.vuepress/dist <span class="token comment"># 项目打包后生成的文件的目录</span>
  <span class="token key atrule">github-token</span><span class="token punctuation">:</span> $GITHUB_TOKEN <span class="token comment"># 这里这个变量就是刚才配置 token 时填写的那个变量</span>
  <span class="token key atrule">keep-history</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">on</span><span class="token punctuation">:</span>
    <span class="token key atrule">branch</span><span class="token punctuation">:</span> master <span class="token comment"># 项目源码所在的分支</span>

现在去提交一下代码试试吧，在你提交成功后 travis-ci 的控制台就能看到你的项目在部署了。

GitLab

手动部署

设置输出目录为 public：

由于 GitLab 的 pages 功能的指定文件夹是 public，所以我们要将项目的输出目录改为 public，也就是将 config.js 的 dest 设置为 public；
本地编译，然后将项目提交到 GitLab 即可。

自动部署

由于 GitLab 自带 CI，所以就省去了很多的配置步骤，只需要在项目根目录创建 .gitlab-ci.yml（配置规范）：

yml

<span class="token key atrule">image</span><span class="token punctuation">:</span> node<span class="token punctuation">:</span>9.11.1

<span class="token key atrule">pages</span><span class="token punctuation">:</span>
  <span class="token key atrule">cache</span><span class="token punctuation">:</span>
    <span class="token key atrule">paths</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> node_modules/ <span class="token comment"># 缓存 node_modules，加速编译</span>

  <span class="token key atrule">script</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> npm install
  <span class="token punctuation">-</span> npm run docs<span class="token punctuation">:</span>build
  <span class="token key atrule">artifacts</span><span class="token punctuation">:</span>
    <span class="token key atrule">paths</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> public
  <span class="token key atrule">only</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> master

将项目提交到 GitLab 即可。

GitHub

手动部署

自动部署

GitLab

手动部署

自动部署

评论