从Ghost迁移到Hexo

前言

迁移的原因,大概是因为node的后端崩了懒得起,又或者是觉得Github Pages很cool,总之一时心血来潮就迁移过来了。

Hexo是一个博客框架,可以生成静态页面并托管到Github上,用户可以用Html,Markown来编写文章。不用Jekyll的原因啊是因为要捣鼓Ruby的gem,而Hexo是运行在Node.js上的,装起来比较省事。

安装Hexo

身为一名前端开发,早已装好Git和Node.js了,如果没有其实Hexo的教程里都有步骤。
https://hexo.io/docs/

首先是安装Hexo

Mac下会有DTrace报错的问题,每次运行都会报错但是不影响使用。解决该问题,在安装hexo的时候加上 --no-optional 即可。
https://hexo.io/docs/troubleshooting.html#Error-with-DTrace-Mac-OS-X

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
$ sudo npm install -g hexo-cli
……
$ hexo init blog
INFO Cloning hexo-starter to ~/Documents/nodejs/blog
……
INFO Install dependencies
……
> node install
……
INFO Start blogging with Hexo!
$ cd blog
//解决Mac下DTrace错误,需要补刀
$ npm install hexo --no-optional
……
$ hexo
Usage: hexo <command>
Commands:
clean Removed generated files and cache.
config Get or set configurations.
deploy Deploy your website.
generate Generate static files.
help Get help on a command.
init Create a new Hexo folder.
list List the information of the site
migrate Migrate your site from other system to Hexo.
new Create a new post.
publish Moves a draft post from _drafts to _posts folder.
render Render files with renderer plugins.
server Start the server.
version Display version information.
Global Options:
--config Specify config file instead of using _config.yml
--cwd Specify the CWD
--debug Display all verbose messages in the terminal
--draft Display draft posts
--safe Disable all plugins and scripts
--silent Hide output on console
For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/
$ ls
_config.yml package.json source
node_modules scaffolds themes

这样就生成了一个名为blog的目录,里面有以下文件

_config.yml

配置文件

package.json

项目描述文件

scaffolds

脚手架目录,里面是模板文件,要写一篇新文章的时候,会以scaffolds里的模板生成新文章。

source

源文件目录,_posts文件夹里放着文章,除此之外以_为前缀的文件夹都会被忽略。所有的页面最终会渲染在public目录下。

themes

主题目录,渲染出静态页面的时候会把source里的页面(文章)套用这里的主题。

配置Hexo

编辑_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Site
title: JS工作室
author: j3l11234
language: zh-CN
timezone: Asia/Shanghai
# URL
url: http://blog.j3l11234.com
root: /
#Writing
new_post_name: :year-:month-:day-:title.md
# Deployment
deploy:
type: git
repo: https://github.com/j3l11234/j3l11234.github.io.git
branch: master

new_post_name 是source/_posts里文章的命名格式,笔者习惯以日期作为前缀,这样好排序。
deploy里的repo根据实际情况填写,使用git做提交的话,需要额外安装一个包
npm install --save hexo-deployer-git

运行Hexo

生成的项目里,已经有source/_posts/hello-world.md一篇文章作为示例了。这时可以运行看看效果。

1
2
3
4
5
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
//其实运行 hexo s 就可以

https://hexo.io/docs/server.html 有详细的介绍,比如指定端口和ip什么的。

这时候打开http://localhost:4000/就可以看到效果了。如果这时候修改source下的文件,直接刷新页面就可以看到修改。

创建新文章

直接创建一篇的新的文章。post可以省略,因为_config.yml里配置了default_layout: post

1
2
$ hexo new post test1
INFO Created: ~/Documents/nodejs/blog/source/_posts/2017-02-24-test1.md

也可以先创建草稿,编写完成后再publish。

1
2
3
4
5
$ hexo new draft test2
INFO Created: ~/Documents/nodejs/blog/source/_drafts/test2.md
$ hexo publish test2
INFO Published: ~/Documents/nodejs/blog/source/_posts/2017-02-24-test2.md

从ghost迁移到hexo

标准方法

从ghost里导出得到source.json,放在blog目录下。

修改 scaffolds/post.md文件,添加tag

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags: {{ tags }}
---

1
2
$ npm install hexo-migrator-ghost
hexo migrate ghost source.json

旁门左道

当时手头只有一个ghost.db,也就是ghost的数据库,在懒得装ghost的情况下,手动去读取并生成文件。
各位看看就好,请勿模仿。

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
var sqlite3 = require('sqlite3');
sqlite3.verbose();
var fs = require('fs');
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function item2File(row) {
var fileName = new Date(row.created_at).Format("yyyy-MM-dd") + "-" + row.slug +".md" ;
var content = "\
---\n\
title: "+row.title+"\n\
date: "+new Date(row.created_at).Format("yyyy-MM-dd hh:mm:ss")+"\n\
updated: "+new Date(row.updated_at).Format("yyyy-MM-dd hh:mm:ss")+"\n\
tags:\n\
---\n"+row.markdown;
//console.log(content);
fs.appendFile("./source/_posts/"+fileName, content, function(err){
if(err)
console.log("fail " + err);
else
console.log(fileName);
console.log("created the post file");
});
}
var db = new sqlite3.Database("ghost.db", sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE,
function(err) {
if (err) {
console.err('FAIL on open database ' + err);
process.exit(-1);
}
});
db.each("SELECT title,slug,markdown,created_at,updated_at,published_at FROM posts", [],function(err, row) {
if (err) {
console.err('FAIL on select database ' + err);
}
//时间修正
if (row.published_at && row.created_at > row.published_at)
row.created_at = row.published_at;
if (row.published_at && row.updated_at > row.published_at)
row.updated_at = row.published_at;
item2File(row);
});

部署

为了迎合Github Pages的自定义域名,我们新建source/CNAME,里面写上域名

1
blog.j3l11234.com

这样在push到github之后就不需要在手动设置自定义域名了。如果你使用xxxxx.giuhub.io这样的原生域名,可以忽略该步骤。

然后是生成页面并部署

1
2
3
4
5
6
7
$ hexo generate
INFO Start processing
INFO Files loaded in 266 ms
INFO Generated: index.html
……
INFO 28 files generated in 1.05 s
$ hexo deploy

配置多说评论

按照教程可以很简单的弄完。
http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9

有一个小坑,_config.yml里边的duoshuo_shortname:,指的是你在多说的域名,比如我的是j3l11234.duoshuo.com ,那么就应该这么填

1
2
#DuoShuo
duoshuo_shortname: j3l11234

我建议将data-thread-key="<%= post.layout %>-<%= post.slug %>"改为data-thread-key="<%= post.slug %>",把slug作为多说文章的key,这样从ghost迁移之后,原来文章的评论也可以一起同步过来。

1
2
3
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->

总结

Hexo用起来还是很畅快淋漓的,渲染出静态页面之后,爱放哪放哪。感觉很Geek,很符合『轻博客』的原则。