GitLab静态博客搭建

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

旧博客：https://oldblog.maplesugar.top

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中查看设置。

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

离开前，建议您浏览一下归档页面，或许有更多相关的、有趣的内容！

枫糖

GitLab静态博客搭建

1. 原理

2. 静态博客适合我吗

3. 搭建环境

3.1 搭建node.js

3.2 安装npm

3.3 npm使用

3.4 安装hexo

4.hexo初始操作

4.1 初始化

4.2 试验

4.3 发布到gitlab

5. hexo next主题配置

5.1 永久链接（Permalinks）

6. gulp自动化

6.1 安装gulp和gulp插件

6.2 创建gulp脚本

6.3 运行gulp default任务

7. Gitlab CI/CD

8. Gitlab pages设置

打赏作者

1 个评论

添加评论取消回复

1. 原理

2. 静态博客适合我吗

3. 搭建环境

3.1 搭建node.js

3.2 安装npm

3.3 npm使用

3.4 安装hexo

4.hexo初始操作

4.1 初始化

4.2 试验

4.3 发布到gitlab

5. hexo next主题配置

5.1 永久链接（Permalinks）

6. gulp自动化

6.1 安装gulp和gulp插件

6.2 创建gulp脚本

6.3 运行gulp default任务

7. Gitlab CI/CD

8. Gitlab pages设置

打赏作者

1 个评论

添加评论 取消回复

添加评论取消回复