GitLab静态博客搭建

使用Gitlab仓库，构建静态博客。使用Gitlab的CI/DI自动化构建过程。

1. 原理

使用Gitlab创建自己的repository，这个repository有自己特殊的名字username.gitlab.io，Gitlab会自动识别，当访问这个username.gitlab.io这个路径的时候，Gitlab就会返回这个repository中的对应网页。

使用静态网页生成器 SSG（Static Site Generator ）生成网页，比如Jekyll、hexo、hugo等，更多查看https://www.staticgen.com 。用户只管写内容，这些生成器自动生成静态网页。

静态博客的缺点就是没有后端服务，不能处理用户动态请求，所有的动态部分（评论系统，页面统计等）都是集成的第三方服务。

2. 静态博客适合我吗

静态博客三个特点：省钱、费事、不安全。不用服务器、空间，域名都可以使用Gitlab的子域名，不用一毛钱。但是需要学习各种命令，比较麻烦。评论系统，页面统计只能使用第三方的，不安全。

3. 搭建环境

本人用的是windows，静态网页生成器使用Hexo。

3.1 搭建node.js

node.js是一个javascript执行引擎。原来javascript只能运行在浏览器，有了node.js就能运行在任何地方了。

window直接下载 Long Term Support (LTS) 版本安装。

3.2 安装npm

Node Package Manager，Node应用程序依赖包的管理工具，可以解决依赖关系。

node.js已经集成了npm。

# 更新
npm install [email protected] -g
npm --version

3.3 npm使用

# 生成npm包，实际给项目添加一个配置文件package.json，记录项目使用的包信息
npm init
# 安装一个包，默认安装最新稳定版本
npm install package_name
# 安装特定版本
npm install [email protected]
# 安装包到项目的node_modules 目录
# 在项目的package.json配置文件中，生成依赖package_name的信息。
# 这样共享项目，不用把package_name这个项目也共享了，只需要运行npm install就会自动安装原来的包
npm install package_name --save 或者 npm install package_name  -S
npm install package_name -g #全局安装，包安装到node的安装目录下。任何项目可以直接使用包

3.4 安装hexo

npm install hexo -g

4.hexo初始操作

4.1 初始化

创建xxx.gitlab.io文件夹，进入文件夹

# hexo会自动在目标文件夹种创建网站所需要的所有文件
hexo init
# 安装依赖包
npm install

4.2 试验

# 生成静态文件
hexo g
# 启动服务器，访问http://localhost:4000/，就可以看到网站了
hexo s

4.3 发布到gitlab

创建repository，格式必须为yourname.gitlab.io

# 安装deployer-git
npm install hexo-deployer-git --save

修改项目目录下的_config.yml文件（网站配置文件），注意：hexo的配置文件中任何’:’后面都是带一个空格的

deploy:
    type: git
    repository: https://gitlab.com/xxx/xxx.gitlab.io.git
    branch: master

# 部署网站到gitlab，访问https://xxx.gitlab.io
hexo d

熟悉Git，这就是多此一举，直接推送就好了。

5. hexo next主题配置

5.1 永久链接（Permalinks）

永久链接和SEO相关，提前想好，尽量不要动了。我配置的是分类名/文章名的格式。修改网站配置文件：

permalink: :category/:title/

文章名是中文的，转成链接不好看。我在文章的fontmater里面自己定义了一个值urlname，这样链接就好看了。

title: 极客U盘制作
urlname: geek-usb-disk

修改网站配置文件：

permalink: :category/:urlname/

6. gulp自动化

发布网站后，查看hexo产生的源码，发现html并没有压缩。这时候可以利用gulp压缩html、js、css和图片。gulp是一个前端的工作流工具。

6.1 安装gulp和gulp插件

npm install gulp --save
npm install gulp-htmlclean  --save
npm install gulp-htmlmin  --save
npm install gulp-imagemin  --save
npm install gulp-minify-css  --save
npm install gulp-uglify  --save

6.2 创建gulp脚本

在根目录下建立gulpfile.js

'use strict';
/**
 * 1. 压缩css
 * 2. 压缩html
 * 3. 压缩合并js
 * 4. 压缩图片
 */

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify'); //Minify JavaScript with UglifyJS3.
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin')

//1. 压缩 public 目录 css
gulp.task('minify-css', function() {
	// return: used to signal async completion
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
		//gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。
		//也就是输出到源目录
        .pipe(gulp.dest('./public'));
});

//2. 压缩 public 目录 html
gulp.task('minify-html', function() {
	// return: used to signal async completion
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,  //清除HTML注释
            collapseWhitespace: true,  //压缩HTML
            collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
            minifyJS: true,  //压缩页面JS
            minifyCSS: true  //压缩页面CSS
        }))
        .on('error', function(err) {
            console.log('html Error!', err.message);
            this.end();
        })
		//gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。
		//也就是输出到源目录
        .pipe(gulp.dest('./public'))
});

//3. JS压缩
gulp.task('js-minify', function() {
  // return: used to signal async completion
  return gulp.src('./public/**/*.js')
    .pipe(uglify())
	//gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。
	//也就是输出到源目录
    .pipe(gulp.dest('./public'));
});

//4. 压缩图片任务
gulp.task('img-minify', function () {
    // 1. 找到图片
	// return: used to signal async completion
    return gulp.src('./public/**/*.{png,jpg,gif,ico}')
    // 2. 压缩图片
	.pipe(imagemin({
		optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
        progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
        //multipass: true,       //类型：Boolean 默认：false 多次优化svg直到完全优化
	}))
	// 3. 另存图片
	//gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。
	//也就是输出到源目录
	.pipe(gulp.dest('./public'))
});

// 我们可以新建一个任务，用这个任务去启动其他任务!
// 如果在命令行输入gulp 会直接执行当前目录的名为default的任务
// gulp.series是gulp4.0的用法，gulp3使用gulp.task('build', ['minify-html','minify-css','minify-js','images']);
gulp.task('default', gulp.series('minify-css', 'minify-html', 'js-minify', 'img-minify',function (done) {
  console.log('success: all task complete!');
  // used to signal async completion
  // gulp automatically passes a callback function to your task as its first argument. Just call that function when you're done
  done();
}));

6.3 运行gulp default任务

gulp

7. Gitlab CI/CD

网站根目录创建.gitlab-ci.yml

#pull docker image
image: node:10.15.0

#For GitLab Pages, this job has a specific name, called pages, which tells the Runner you want that task to deploy your website with GitLab Pages
pages:
#If you want to cache the installation files for your projects dependencies, for building faster, you can use the parameter cache
  cache:
    paths:
    - node_modules/
  script:
#hexo-cli是hexo的命令行模式，-g全局安装，就可以直接使用命令了。
  - npm install hexo-cli -g
  - npm install gulp-cli -g
#自动安装package.json中的dependencies
  - npm install
  - hexo generate
#运行gulp default任务，压缩css,js,html,image
  - gulp
#We also need to tell the Runner that this job generates artifacts, which is the site built by Jekyll. Where are these artifacts stored? In the public directory:
  artifacts:
#GitLab Pages will only consider files in a directory called public
    paths:
    - public
#telling the Runner to only perform that job called pages on the master branch only
  only:
    refs:
      - master
    #只有修改数据文件夹，才进行构建
    changes:
      - source/**/*

推送项目修改到Gitlab后，会自动运行.gitlab-ci.yml中定义的任务，并且把生成的artifacts部署。

8. Gitlab pages设置

到项目的设置>Pages中查看设置。

到仓库的设置>通用>可见性，设置为“所有人”可见。

打赏作者

如果对你有帮助，还请多多支持！谢谢