目录
使用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中查看设置。
到仓库的设置>通用>可见性,设置为“所有人”可见。
反馈:您觉得本站怎么样?(此评价不会公开,也不会对博主产生任何实际利益。)
- 非常优秀
- 可以
- 一般
- 垃圾
- 超级恶心
1 个评论