通过 Gitlab-CI 将 Hugo blog 自动部署至 G

教大家用 Hugo 建个人博客的文章太多了，这次我要介绍的是用 Gitlab-CI 自动部署( 持续集成 ) Hugo blog 到 Github Pages 上 (P.S. 当然前提是你必须有 Gitlab 账号哦 )，其核心就是一个配置文件.gitlab-ci.yml:

# alpine linux 
#其包管理是 apk
image: alpine:3.4

before_script:
  - apk update 
  - apk add openssl && apk add git && apk add nodejs
  - npm install
  - wget 
  - echo "37ee91ab3469afbf7602a091d466dfa5  hugo_0.16_linux-64bit.tgz" | md5sum -c
  - tar xf hugo_0.16_linux-64bit.tgz && cp ./hugo /usr/bin
  - hugo version

pages:
  cache:
    paths:
    - node_modules/

  script:
  - git clone https://<your personal access  user name>/<your repository name> public
  - npm run build
  - cd ./public
  - git config user.name "<your user name>"
  - git config user.email "<your email>"
  - git config --global push.default simple
  - git add .
  - git commit -m "update site"
  - git push --set-upstream "https://<your personal access  user name>/<your repository name>"
  artifacts:
    paths:
    - public
  only:
  - master

我这里使用的是 Hugo 的 1.6 版本，当然你也可以安装当前最新的 1.7 版本。
由于我使用了gulp压缩 html 和 js 文件，所以需要安装nodejs。下面是gulp的配置文件gulpfile.babel.js的内容：

import gulp from 'gulp'
import htmlmin from 'gulp-htmlmin'
import uglify from 'gulp-uglify'
import runSequence from 'run-sequence'
import shell from 'gulp-shell'

gulp.task('hugo-build', shell.task(['hugo']))

gulp.task('minify-html', () => {
  return gulp.src('public/**/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true,
      removeComments: true,
      useShortDoctype: true,
    }))
    .pipe(gulp.dest('./public'))
})

gulp.task('minify-js', () => {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('build', ['hugo-build'], (callback) => {
  runSequence('minify-html','minify-js', callback)
})

这里用gulp-shell这个包，执行hugo这个命令。
package.json的内容:

{
  "private": true,
  "scripts": {
    "build": "gulp build"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "babel-register": "^6.5.2",
    "gulp": "^3.9.1",
    "gulp-cli": "^1.2.1",
    "gulp-htmlmin": "^1.3.0",
    "gulp-uglify": "^2.0.0",
    "gulp-shell": "^0.5.2",
    "run-sequence": "^1.1.5"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

由于gulpfile.babel.js采用ECMAScript 6标准，使用了最新的 JavaScript 语法，需要用babeljs将其语法转化。
这些做完之后就可以在.gitlab-ci.yml中用npm run build部署你的 blog 了。