0%

gitlab静态博客搭建

它是如何实现的

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

手动写html太费事,就有了静态网页生成器 SSG(Static Site Generator ),比如Jekyll、hexo、hugo等,更多查看https://www.staticgen.com 。 用户只管写内容,这些生成器自动生成静态网页,和wordpress后台编辑器作用差不多,只是wordpress动态生成静态网页。

所以,静态博客的缺点就是没有后端服务,不能处理用户动态请求,所有的动态部分都是集成的第三方服务。

搭建环境

本人用的是windows。

搭建node.js

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

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

安装npm

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

最新的node.js已经集成了npm。

1
2
npm install npm@latest -g #更新
npm --version

npm使用

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

安装hexo

npm install hexo -g

hexo初始操作

初始化

创建xxx.github.io文件夹,进入文件夹

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

试验

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

发布到github

创建repository,格式必须为yourname.github.io

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

修改项目目录下的_config.yml文件(网站配置文件),hexo的配置文件中任何’:’后面都是带一个空格的

1
2
3
4
deploy:
type: git
repository: https://github.com/xxx/xxx.github.io.git
branch: master

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

hexo next主题配置

克隆主题到本地

1
2
cd xxx.github.io  #进入hexo目录
git clone https://github.com/iissnan/hexo-theme-next themes/next #把next主题克隆到themes/next

更新主题

1
2
cd themes/next
git pull

启用主题

修改你的博客根目录下的config.yml配置文件(网站配置文件)中的theme属性,将其设置为next。

选择 Scheme(网页布局)

博客根目录下\themes\next\config.yml(主题配置文件)中,修改scheme: Gemini

配置博客信息

修改网站配置文件

1
2
3
4
5
6
7
8
# Site
title: 枫糖
subtitle: Male Geek
description: From rookie to master
keywords:
author: 枫糖
language: zh-Hans
timezone:

配置菜单

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
#about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

添加菜单页面

1
2
cd xxx.github.io  #进入根目录
hexo new page tags #添加「标签」页面

修改\source\tags\index.md

1
2
3
4
title: tags
date: 2018-12-27 13:33:26
type: "tags"
comments: false

hexo new page categories #添加「分类」页面
修改\source\categories\index.md

1
2
3
4
title: categories
date: 2018-12-27 13:35:51
type: "categories"
comments: false

设置头像

放置在主题的source/images/ 目录下
修改主题配置文件:avatar: /images/maple-leaf-avatar.jpg

RSS订阅链接

npm install hexo-generator-feed --save #安装插件

插件链接:https://github.com/hexojs/hexo-generator-feed
修改网站配置文件

1
2
3
4
5
6
7
8
9
10
feed:
type: atom
path: atom.xml
limit: false
hub:
content: true
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png

参数说明:

1
2
3
4
5
6
7
8
9
type - Feed type. (atom/rss2)
path - Feed path. (Default: atom.xml/rss2.xml)
limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
hub - URL of the PubSubHubbub hubs (Leave it empty if you don't use it)
content - (optional) set to 'true' to include the contents of the entire post in the feed.
content_limit - (optional) Default length of post content used in summary. Only used, if content setting is false and no custom post description present.
content_limit_delim - (optional) If content_limit is used to shorten post contents, only cut at the last occurrence of this delimiter before reaching the character limit. Not used by default.
order_by - Feed order-by. (Default: -date)
icon - (optional) Custom feed icon. Defaults to a gravatar of email specified in the main config.

侧边栏社交链接

修改主题配置文件

1
2
3
social:
GitHub: https://github.com/xxx || github
E-Mail: mailto:xxx@gmail.com || envelope

腾讯公益404页面

新建 404.html 页面,放到主题的 source 目录下,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站点建立时间

修改主题配置文件

since: 2017

设置背景动画

修改主题配置文件

canvas_nest: true

DISQUS评论

disqus网站建立免费的评论,在设置中记录shortname。

修改主题配置文件

1
2
3
4
disqus:
enable: true
shortname: xxx
count: true

npm install hexo-generator-searchdb --save #安装插件
修改网站配置文件,新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

修改主题配置文件,启用本地搜索功能:

1
2
3
# Local search
local_search:
enable: true

设置预览摘要

首页显示文章的预览摘要,修改主题配置文件

1
2
3
auto_excerpt:
enable: true #将原有的false改为true
length: 300 #设置预览的字数

显示每篇文章字数

npm install hexo-wordcount --save #安装插件
修改主题配置文件

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true #修改为true
min2read: false
totalcount: true
separated_meta: true

文章版权

修改主题配置文件

1
2
3
4
post_copyright:
enable: true#修改为true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

网站favicon

修改主题配置文件

1
2
3
4
5
6
#图片存放在theme/next/source/images目录下
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/favicon-safari_pinned_tab.png

Google 分析

google_analytics:https://analytics.google.com/analytics/web/ 添加网站,得到以 UA- 开头的Google 跟踪 ID。

修改主题配置文件

google_analytics: UA-xxx

提交谷歌收录

npm install hexo-generator-sitemap --save #安装站长地图插件

修改网站配置文件,URL修改为自己的域名

url: https://xxx.gitlab.io/

谷歌验证自己拥有网站

设置Google 分析后验证过,就不用再验证了,当然再验证也不会有什么错误。

谷歌网站站长:https://www.google.com/intl/zh-CN/webmasters/#?modal_active=none
下载验证文件:https://search.google.com/search-console/welcome

配置好后,下载html文件,放到网站根目录即可。

谷歌提示:为了保持已完成验证的状态,请不要移除该文件(即使是在成功通过验证后)。

为了使得hexo生成html时候,不对这个html文件处理,通过在谷歌验证文件html的最开始加上

1
2
3
---
layout: false
---

并把这个文件放到根目录/source文件夹下面。这样hexo g命令就会返回正确的html。
通过验证后,在谷歌search console中提交站地图,这样谷歌就会定期抓取网站链接。

文章加密

npm install hexo-encrypt --save #安装加密插件

插件链接:https://github.com/edolphin-ydf/hexo-encrypt

插件features:

  • encrypt one post content with AES
  • use qiniu private space as you img repository(if you want use this feature, you should get an qiniu account first, search google for help)
  • encode a local img into base64 type, then inline it in html

修改网站配置文件

1
2
3
4
5
# encrypt
encrypt:
password: xxx
replace_all_url: true
type: base64

参数说明

1
2
3
4
5
6
7
8
9
10
11
# encrypt
encrypt:
pwdfile: encrypt_password # this store the password in a file, the whole content of this file will be regarded as the password
#password: 123456 # this set password here
replace_all_url: true # this will replace img url in all posts
base_url: http://you img base url/ # this will connect with you img url in you post, except full url(start with http://)
qiniu_ak: your qiniu access key
qiniu_sk: your qiniu secrect key
img_url_ttl: 3600 # 3600 second, the ttl for qiniu img url
type: qiniu # or base64, if base64, the base_url, qiniu_ak, qiniu_sk and img_url_ttl is unnecessary
template: 'user defined decrpyt ui template' # optional, it's html template include html and js. in js, you should call doDecrypt(password, onErrorCallbackFunc) with you password

单独文章密码,文章开头加入

1
2
3
4
categories: admin #需要把文章的category设置为admin。避免谷歌robots爬去,当然不设置也没什么错误。
comments: false
encrypt: true
enc_pwd: xxxx

配置robots.txt

npm install hexo-generator-robotstxt --save #安装插件

修改网站配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
robotstxt:
useragent: "*"
disallow:
- /admin/
- /vendors/
- /js/
- /css/
- /fonts/
- /fancybox/
- /fonts/
- .js$
- .css$
- .jpg$
- .jpeg$
- .gif$
- .png$
- .bmp$
allow:
- /
- /archives/
- /categories/
- /tags/
sitemap: /sitemap.xml

Disallow: /admin/的作用:加密的文章避免谷歌爬取。需要把文章的category设置为admin。

永久链接(Permalinks)

修改网站配置文件
permalink: :category/:title/

返回顶部的箭头显示百分数

修改主题配置文件

scrollpercent: true

hexo发布文章

hexo文档:https://hexo.io/zh-cn/docs/index.html

新建post

假设我们的文章名为 “hello world”,在命令行键入以下命令即可:
hexo new “hello world”
上述命令的结果是在 ./hexo/source/_posts 路径下新建了一个 hello world.md 文件。
然后,打开markdown编辑器写作。
由于hexo不能分文件夹,所以文件名可以使用categorie-title命名。

引用资源

使用相对路径引用资源:修改网站配置文件,post_asset_folder: true
上面的操作会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new

命令创建新文章时自动创建一个同名文件夹,于是我们便可以将文章所引用的相关资源放到这个同名文件夹下,然后通过相对路径引用。<br>在文章中引用你的资源。

1
2
3
4
5
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
{% asset_img example.jpg This is an example image %}
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

通过这种方式,图片将会同时出现在文章和主页以及归档页中。
设置图片位置需要html,单纯的markdown就不适合了。

文章摘要

next会自动生成文章摘要。也可以自己设置。
设置文章摘要

1
2
3
4
5
6
7
8
title: gitlab静态博客搭建
date: 2019-01-14 21:12:36
tags:
- 静态博客
categories: hexo
摘要
<!-- more -->
正文

文章标签插件(Tag Plugins)

查看更多:https://hexo.io/zh-cn/docs/tag-plugins

1
2
3
4
5
6
在文章中插入 Youtube 视频。
{% youtube video_id %}
引用文章
引用其他文章的链接。
{% post_path slug %}
{% post_link slug [title] %}

日常命令

1
2
3
4
5
6
#清除本地站点文件夹下的缓存文件(db.json)和已有的静态文件(public)。
hexo clean
#生成静态文件
hexo g
#推送到github
hexo d

gulp自动化

发布网站后,查看hexo产生的源码,发现html并没有压缩。

这是可以利用gulp压缩html、js、css和图片。gulp是一个前端的工作流工具,读一下文档就能上手了。感觉自从有了node.js,前端就把后端的很多工具和思想都借鉴去了。

安装gulp和gulp插件

1
2
3
4
5
6
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

创建gulp脚本

在根目录下建立gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
'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();
}));

运行gulp default任务

gulp

gitlab静态博客搭建

上述都是在github上建立静态博客的步骤,gitlab上建立静态博客有什么不同?

参考GitLab Pages:https://docs.gitlab.com/ee/user/project/pages

gitlab的特性

项目网站,用户和用户组网站

Project Websites
You created a project called blog under your username john, therefore your project URL is https://gitlab.com/john/blog/. Once you enable GitLab Pages for this project, and build your site, it will be available under https://john.gitlab.io/blog/.
You created a group for all your websites called websites, and a project within this group is called blog. Your project URL is https://gitlab.com/websites/blog/. Once you enable GitLab Pages for this project, the site will live under https://websites.gitlab.io/blog/.
User and Group Websites
Under your username, john, you created a project called john.gitlab.io. Your project URL will be https://gitlab.com/john/john.gitlab.io. Once you enable GitLab Pages for your project, your website will be published under https://john.gitlab.io.
Under your group websites, you created a project called websites.gitlab.io. your project’s URL will be https://gitlab.com/websites/websites.gitlab.io. Once you enable GitLab Pages for your project, your website will be published under https://websites.gitlab.io.

Enable shared Runners,运行CI/DI

You can take advantage of the free shared Runners available on GitLab.com. All your builds will run on distinct Virtual Machines which use the latest Docker Engine. This will effectively eliminate any possible security issues, as there is no potential of breaking outside the container. However, you are free to set up your own Runner for your project.

To deploy your site, GitLab will use its built-in tool called GitLab CI/CD, that will build your site and publish it to the GitLab Pages server. The sequence of scripts that GitLab CI/CD runs to accomplish this task is created from a file named .gitlab-ci.yml, which you can create and modify at will.

可以创建私有仓库

gitlab总是把public文件夹发布。这样就可以上传完整的hexo源码,而不是像github一样必须创建公开仓库。
These projects can be either public, internal, or private, at your own choice. GitLab will always deploy your website from a very specific folder called public in your repository.

自定义域名和SSL/TLS

自己查阅文档吧

操作步骤

创建私有仓库 xxx.gitlab.io

删除网站根目录\themes\next主题中的.git文件夹

修改网站配置文件中deploy信息,用不到了

1
2
deploy:
type:

验证项目根目录.gitignore

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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自动运行.gitlab-ci.yml中定义的任务,并且把生成的artifacts部署。

gitlab pages设置

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

github页面自动跳转到gitlab

修改\themes\next\layout\_layout.swig,在head标签里添加:

1
<script language="javascript" type="text/javascript">window.location.href='https://xxx.gitlab.io/';</script>

参考文档

hexo文档:https://hexo.io/zh-cn/docs/index.html

GitLab Pages:https://docs.gitlab.com/ee/user/project/pages

Static sites and GitLab Pages domains:https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html

补充

2019年10月,gitlab升级造成需要登录才能访问

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