写在前面

近来，我又倒腾了这个中文博客，之前的博客我准备修改为纯英语的，中英混杂可能有些别扭。

由于使用 Firebase 托管网站，而源码放在 GitLab，照常来说更新一次博客需要推送 GitLab 一次，部署 Firebase 一次，还是有些麻烦的。这次 Jekyll 主题快完成的时候，我又照猫画虎利用 GitLab CI 简化博客部署流程，其实也就和 GitHub Pages 加 Travis CI 的搭配如出一辙，只是换了个地方吧，当然 Travis 我觉得更省心些。

Gulp

为了压缩 css, js, html 和图片文件，我加入了 gulp.js，这里不多说，直接扔出来吧。

var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    cache = require('gulp-cache'),
    imagemin = require('gulp-imagemin'),
    cssmin = require('gulp-clean-css'),
    jsmin = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin');

gulp.task('min-images', function(){
  return gulp.src('public/**/*.+(png|jpg|jpeg|gif|svg)')
         .pipe(cache(imagemin({
           interlaced: true
         })))
         .pipe(gulp.dest('public/'))
});

gulp.task('min-css', function(){
  return gulp.src('public/assets/**/*.css')
         .pipe(cssmin())
         .pipe(gulp.dest('public/assets/'))
});

gulp.task('min-js', function(){
  return gulp.src('public/assets/**/*.js')
         .pipe(jsmin())
         .pipe(gulp.dest('public/assets/'))
});

gulp.task('min-html', function(){
  return gulp.src('public/**/*.html')
         .pipe(htmlmin({
           collapseWhitespace: true,
           removeComments: true
         }))
         .pipe(gulp.dest('public/'))
});

gulp.task('min-all', function( callback ){
  runSequence('min-images', 'min-css', 'min-js', 'min-html', callback);
});

这里为了配合 Firebase 的默认设置，我将 Jekyll 的生成目录改成了 public，最后的 build task 利用 run-sequence 将需要的步骤联合在一起。

GitLab CI

Jekyll 生成使用 Ruby，而 Firebase 和 gulp 使用 Nodejs，所以 CI 配置中也将两个步骤分隔开。

stages:
  - build_jekyll
  - deploy_firebase

build_jekyll:
  image: ruby:latest
  stage: build_jekyll
  cache:
    key: "$CI_JOB_NAME"
    untracked: true
    paths:
      - .bundle
      - vendor/
  before_script:
    - bundle install --path vendor/
  script:
    - jekyll build -d public/
  artifacts:
    paths:
    - public
  only:
    - master

deploy_firebase:
  image: node:latest
  stage: deploy_firebase
  cache:
    key: "$CI_JOB_NAME"
    untracked: true
    paths:
      - vendor/
      - node_modules/
  before_script:
    - npm prune
    - npm install
    - npm install -g firebase-tools --unsafe --silent
  script:
    - node_modules/gulp/bin/gulp.js --gulpfile ./gulpfile.js min-all
    - firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
  only:
    - master

上面的配置有些繁琐，但是能用就好了（😜）。在 build_jekyll 这一步中生成静态文件到 public 文件夹中，deploy_firebase 中先用 gulp 处理压缩各类静态文件，再部署到 Firebase Hosting 中。

两个步骤都用到了 cache 文件，第一次在 GitLab CI 运行可能会比较慢，但是之后运行就不需要全新安装那些依赖库了，快了许多。

一开始 gulp 的运行我以为和本地环境一样，直接 gulp min-all 运行自定的 min-all 任务，结果 GitLab CI 中报错，没找到 gulp，需要在 CI 中先全局安装一次 npm install -g gulp 或使用：

node_modules/gulp/bin/gulp.js --gulpfile ./gulpfile.js min-all

Firebase 的安装也有些问题，使用 node 6.x 的时候 npm install -g firebase-tools 没问题，但是用 node 8.x (这里是 node:latest) 时就会遇到 gyp WARN EACCES user "nobody" does not have permission to access the dev dir... 这样的警告，所以需要增加 --unsafe 才能搞定，添加 --silent 是因为安装 Firebase 的 log 实在是太长了，当然有兴趣看看这些日志文件也可以把这个去掉。另外，Firebase 的 token 需要在本地先生成：firebase login:ci，根据提示得到 token 后在 GitLab 仓库中设置: Settings > CI/CD > Secret variables 即可。

这一番倒腾后，也就可以和 GitHub Pages 一样省心了，更新博客只需要推送 git 即可完成整个博客部署流程。