目录
使用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中查看设置。
到仓库的设置>通用>可见性，设置为“所有人”可见。
Copyright © 2022，枫糖， 版权所有，禁止转载、演绎、商用。
离开前，建议您浏览一下 归档 页面，或许有更多相关的、有趣的内容！
1 个评论