7

将博客从Octopress迁移往Hexo

 3 years ago
source link: https://zackzheng.info/2016/03/06/migrate-to-hexo-from-octopress/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
  • 迁移到Hexo
  • 配置Hexo

之前一直使用Octopress,折腾过好多次,出问题不少,而且生成文章速度越来越慢,需要自己添加各种插件,还弄过支持TOC一直没成功。最近再看了下迁移到hexo的,好像蛮方便的,而且是基于Node的,这让我特别想试下,没想到结果出乎意料的好用!

迁移到Hexo

安装nodejs下载链接

安装Hexo

1
$ npm install -g hexo-cli

初始化目录

1
2
3
$ hexo init <blog>
$ cd <blog>
$ npm install

完成后便生成了以下目录结构:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

  • _config.yml:配置文件
  • source:文章目录
  • themes:主题目录

修改信息

修改_config.yml内容:

1
2
3
4
title: Just My Blog
subtitle: A Programmer Who Wants To Be A Poet .----尘世间一件迷途小码农
description: Zack Zheng's Blog
author: Zack Zheng

迁移文章

将以前Octopress的source/_post目录下的文章拷贝到Hexo的同名目录下即可。

安装hexo-deployer-git

1
$ npm install hexo-deployer-git --save

修改_config.yml最后面几行

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

配置域名

将之前的CNAME文件放到source目录下即可。

上传到Github

将原来在Github上的Repository删掉重建,格式依旧是<name>.github.io。

执行下面命令编译成静态文件并提交:

1
2
$ hexo generate
$ hexo deploy

配置Hexo

之前Octopress还弄过侧边栏、多说评论、摘要、访客记录、回到顶部、谷歌统计等,现在没有怪可惜的,但发现Hexo的主题Jacman居然已经帮忙支持了这些功能,还有TOC,这实在是令人欣喜!

安装主题

1
2
$ cd <blog>
$ git clone https://github.com/A-limon/pacman.git themes/pacman

使用主题

修改_config.yml文件如下:

1
2
3
theme: jacman
stylus:
compress: true

compress值为true,会自动压缩 CSS 文件。

更新主题

1
2
$ cd themes/jacman
$ git pull origin master

修改主题

  • 修改主题配置

根据自己的需要修改themes/jacman/_config.yml文件。

去掉Widgets下不需要的组件,如以下修改:

1
2
3
4
5
6
7
8
9
10
11
#### Widgets
widgets:
- github-card
- category
- tag
## - links
## - douban
- rss
## - weibo
- duoshuo_visitor
- flag_counter

duoshuo_visitor和flag_counter不是自带的,是后面需要另外加的。

修改底部footer,如以下修改:

1
2
3
4
5
#### Author information
author:
intro_line1: "Hello ,I'm Zack Zheng." ## your introduction on the bottom of the page
intro_line2: "This is my blog." ## the 2nd line
email: [email protected] ## e.g. [email protected]

在duoshuo_shortname: 后面空格输入你的多说用户名即可支持评论。

后边还支持对谷歌统计、百度统计的配置。

  • 替换默认图片资源

替换themes\jacman\source\img下的几个图片

  • 增加多说访问统计和flag_counter
  1. 在_config.yml的widgets下面加入插件名
  2. 在themes/jacman/layout/_widget目录下新建文件duoshuo_visitor.ejs、flag_counter.ejs。

duoshuo_visitor.ejs(short_name后面是多说用户名):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section>
<br/>
<h1>最近访客</h1>
<br/>
<ul class="ds-recent-visitors" data-num-items="20"></ul>
<script type="text/javascript">
var duoshuoQuery = {short_name:"zackzheng"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<br/>
</section>

flag_counter.ejs(a href后面替换成自己在Flag Counter获取的链接):

1
2
3
4
5
<section>
<h1>访客统计</h1>
<br/>
<a href="http://s07.flagcounter.com/more/2SH"><img src="http://s07.flagcounter.com/count/2SH/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_20/viewers_3/labels_0/pageviews_1/flags_0/" alt="Flag Counter" border="0"></a>
</section>

hexo new ““ #新建文章
hexo new page ““ #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

hexo deploy -g #生成加部署
hexo server -g #生成加预览

命令简写:

hexo n = hexo new
hexo g = hexo generate
hexo s = hexo server
hexo d = hexo deploy

总体来说,切换到Hexo和Jacman主题后,可以很方便设置多说评论、谷歌统计、百度统计,并自带分享、侧边栏,支持TOC,不用接触ruby等代码,不易出问题,生成速度快。

-END-
欢迎到我的博客交流:https://zackzheng.info


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK