未分类

Hexo折腾记——基本配置篇

前言

人闲起来真是可怕,本来已经折腾过了jekyll和Ghost,静态和动态博客也都尝了遍鲜,然而还是按捺不住寂寞又折腾起来Hexo。话说我最早大概是两年前高考结束的时候知道的Hexo,那时在家里没事干想搭个博客玩,然后看见了jekyll和hexo,无奈那时候就一台windows,啥也不懂啥也不会,这两个博客工具楞是装不上去。而Jekyll的一个好处是可以不用在本地跑,Github 的Pages功能原生支持Jekyll,所以我只需要下载些别人的源文件,自己随便修改下,传到Github就能在线调试和运行了。

这次尝试Hexo的另一个原因是,想重头学习下这些工具的原理和逻辑,另外再添加些可以将性能发挥到极致的黑科技(下文会有介绍)。

至于Hexo如何安装配置,网上有太多教程了,可以直接按照文档操作 。 这里只作为进阶,列举一些进阶配置以及踩过的坑。

PS : 我用的Hexo 版本是3.2, 主题是 yilia

以下功能可能需要插件支持,我的package.json为:

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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.2.0"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-htmlclean": "^2.7.6",
"gulp-htmlmin": "^1.3.0",
"gulp-imagemin": "^2.4.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.3",
"hexo": "^3.2.0",
"hexo-deployer-git": "0.0.4",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-feed": "^1.0.2",
"hexo-generator-index": "^0.2.0",
"hexo-generator-sitemap": "^1.1.2",
"hexo-generator-tag": "^0.2.0",
"hexo-migrator-rss": "^0.1.2",
"hexo-renderer-ejs": "^0.2.0",
"hexo-renderer-marked": "^0.2.10",
"hexo-renderer-stylus": "^0.3.1",
"hexo-server": "^0.2.0",
"jgallery": "^1.5.4",
"qiniu": "^6.1.9"
}
}

文章永久链接

默认文章链结是以: http://xxx.com/2015/07/06/your-title/ 的格式的, 个人不是很喜欢这样的格式,而且末尾没有.html结尾有点动态页面的感觉,对搜索引擎是否友好也有疑问(如果你知道答案,请告诉我),于是,我改成了 http://xxx.com/posts/programming/2016-03-18-hello-world.html 这样的格式,具体方法是在 根目录下的 _config.yml 文件里:

1
permalink: posts/:category/:year-:month-:day-:title.html

开启目录支持

我本人并不是很喜欢以tag来分类文章的方式,但是hexo默认是以tag来分类的,于是我另外给它加了一个种类(Category)的选项,方法是在_config.yml 下:

1
2
3
4
5
default_category: uncategorized
category_map:
编程: programming
生活: life
其他: other

其中, category_map 是为了让url中尽量少出现中文,做的映射。

例如:
在文章开头,标柱目录为:

1
2
3
4
---
xxx: xxx
categories: 编程
---

则在url中, 会变成:

1
.../posts/programming/xxx.html

文章目录

默认不开启文章目录,若要开启:

1
2
3
4
---
xxx: xxx
toc: true
---

会自动根据标题权重进行目录生成。显示在最右边。 如需要更改格式, 可去 …/yilia/layout/_partial/archive.ejs 中修改

相册

一直很想要一个靠谱,方便,而且快捷的相册功能,以前用Jekyll的时候没弄懂如何动态生成界面,就直接用html写了一个相册界面,然后还用VC++写了一个windows下的把某个文件夹下所有图片名检索并自动生成相应的html相册页面的小工具,后来玩Ghost了, 天真地想把发布图片的功能集成到原生的管理面版上,然后最后还是失败了。

这次折腾hexo,我下定决心了一定要把相册功能给实现了!(然后我就浪费了一个下午 :(

一开始贪图方便,使用 yilian 主题 自带的 基于instagram API的相册展示功能,本来还想着如果instagram被墙,试试看反代它的地址来实现功能,后来发现我申请的client_id 死活不能用我也是醉了,最后腾了半天还弄不好我也就放弃了。

于是想自己造轮子,思路很简单,把照片全部放在本地某个目录下,然后跑个Python或者Node脚本把所有文件上传到某个地方(github/七牛),并把这些文件名全部保存为output.json 文件,之后相册页面通过get 这个json文件,来得到对应的所有照片url,生成界面。(这个流程参照了网上另一位仁兄的实现,然后我找不到链接了…下次找到了补充上来)

看了下七牛的Node SDK 文档,发现都不用写多少代码,直接能照着文档用,于是改了改,放在本地一键运行,成功!

一键上传七牛以及输出文件名json的代码如下:

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
const fs = require("fs");
const path = "../../photos";
var qiniu = require("qiniu");


//需要填写你的 Access Key 和 Secret Key
qiniu.conf.ACCESS_KEY = 'xxx';
qiniu.conf.SECRET_KEY = 'xxx';

//要上传的空间
bucket = 'hexo';


//构建上传策略函数
function uptoken(bucket, key) {
var putPolicy = new qiniu.rs.PutPolicy(bucket+":"+key);
return putPolicy.token();
}



//构造上传函数
function uploadFile(uptoken, key, localFile) {
var extra = new qiniu.io.PutExtra();
qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
if(!err) {
// 上传成功, 处理返回值
console.log('upload success : ',ret.hash, ret.key);
} else {
// 上传失败, 处理返回代码
console.log(err);
}
});
}

/**
* 读取文件后缀名称,并转化成小写
* @param file_name
* @returns
*/
function getFilenameSuffix(file_name) {
if(file_name=='.DS_Store'){
return '.DS_Store';
}
if (file_name == null || file_name.length == 0)
return null;
var result = /\.[^\.]+/.exec(file_name);
return result == null ? null : (result + "").toLowerCase();
}


fs.readdir(path, function (err, files) {
if (err) {
return;
}
var arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("./output.json", JSON.stringify(arr, null, "\t"));
return;
}

fs.stat(path + "/" + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
var suffix = getFilenameSuffix(files[index]);
if(!(suffix=='.js'|| suffix == '.DS_Store')){
//要上传文件的本地路径
filePath = path+'/'+files[index];
console.log('抓取到文件: '+files[index]);
//上传到七牛后保存的文件名
key = files[index];
//生成上传 Token
token = uptoken(bucket, key);
// 异步执行
uploadFile(token, key, filePath);
arr.push(files[index]);
}

}
iterator(index + 1);
})
}(0));
});

一键部署

全局 _config.yml 中,设置:

1
2
3
4
deploy:
type: git
repository: https://github.com/joway/hexo-blog.git
branch: master

执行

1
hexo deploy

即可上传至git 仓库

原文地址

分享到