未加星标

通过 Gitlab-cl 将 Hugo blog 自动部署至 GitHub

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

教大家用 Hugo 建个人博客的文章太多了,这次我要介绍的是用 Gitlab-cl 自动部署( 持续集成 ) 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 https://github.com/spf13/hugo/releases/download/v0.16/hugo_0.16_linux-64bit.tgz - 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 tokens>@github.com/<your 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 tokens>@github.com/<your 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 了。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:通过 Gitlab-cl 将 Hugo blog 自动部署至 GitHub
本站链接:http://www.codesec.net/view/484714.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(26)