简化博客部署

简化博客部署

小小博客也弄上 CI

写在前面

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

由于使用 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 即可完成整个博客部署流程。

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Host Jekyll Site on Google Firebase with free SSL

Tutorials

2016.07.02

Host Jekyll Site on Google Firebase with free SSL

Firebase Hosting is a developer focused static web hosting provider that is super fast, secure and reliable. You can quickly and easily deploy your static websites to a global content-delivery network (CDN) with a single command.

给博客换新颜

小日子

2019.06.28

给博客换新颜

最近给博客匆匆换了主题,顺便打理一下这个荒废了很长一段时间的博客,重新投入使用。

TOC / 目录

TRENDING