阿烈的博客

从Jekyll迁移到Hexo

我的博客以前由Jekyll搭建,但从 Jekyll 2升级到 Jekyll 3后,我发现自己开始关注于Jekyll及其模板本身而不是博文内容本身。故转而使用Hexo来搭建博客,并更换了更加简洁明快的next主题模板。如果想从Jekyll转到Hexo可以参考本文。

安装Hexo

安装

1
npm install -g hexo-cli

node与hexo环境版本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
➜ ~ node -v
v7.2.1
➜ ~ hexo -v
hexo-cli: 1.0.2
os: Darwin 16.3.0 darwin x64
http_parser: 2.7.0
node: 7.2.1
v8: 5.4.500.44
uv: 1.10.1
zlib: 1.2.8
ares: 1.10.1-DEV
modules: 51
openssl: 1.0.2j
icu: 58.1
unicode: 9.0
cldr: 30.0.2
tz: 2016g

部署

1
2
3
hexo init quxionglie.com
cd quxionglie.com
npm install

安装后目录

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
└── themes
4 directories, 2 files

Hexo常用命令

new - 生成新的blog

1
hexo new [layout] <title>

执行new命令,生成指定名称的文章至 source/posts/title.md。

其中layout是可选参数,默认值为post。scaffolds目录下的文件名称就是layout名称。你也可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是scaffolds/post.md

1
2
3
4
5
6
7
8
9
10
11
12
➜ ls -l scaffolds
total 24
-rw-r--r-- 1 quxl staff 33 Jan 26 19:18 draft.md
-rw-r--r-- 1 quxl staff 44 Jan 26 19:18 page.md
-rw-r--r-- 1 quxl staff 50 Jan 26 19:18 post.md
➜ cat scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
tags:
---

参考:writing

server - 启动服务器

1
hexo server

参考:server

运行后,可以在浏览器上打开http://localhost:4000查看效果。启动后,hexo会监听文件变化并自动更新,所以没必要重启服务器。

generate - 生成静态站点文件

1
hexo generate

生成静态文件并放于public目录(如果没有则生成)下。

参考:generate

deploy - 发布

将生成的静态文件发布到远程服务器上。

1
hexo deploy

修改站点配置文件_config.yml

1
2
3
deploy:
type: git
repo:

目前支持的类型有:

  • Git

需安装hexo-deployer-git插件。

1
npm install hexo-deployer-git --save

配置:

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message] #Default to `Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}`
  • Heroku
  • Rsync
  • OpenShift
  • FTPSync

或直接调用下面命令自动生成部署:

1
2
3
#下面命令是同样的效果
hexo generate --deploy
hexo deploy --generate

参考:
deploy
deployment

安装Next

参考:next getting-started

下载Next主题

克隆最新版本。
在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

1
2
cd quxionglie.com
git clone https://github.com/iissnan/hexo-theme-next themes/next

应用Next主题

与所有 Hexo 主题启用的模式一样。在根目录下找到_config.yml配置文件,找到 theme 字段,并将其值更改为 next :

1
theme: next

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新

Scheme 的切换通过更改主题配置文件themes/next/_config.yml,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可。

选择 Mist Scheme

1
2
3
#scheme: Muse
scheme: Mist
#scheme: Pisces

设置 语言

编辑 站点配置文件_config.yml, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

1
language: zh-Hans

设置 菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑主题配置文件themes/next/_config.yml,修改以下内容:

  • 设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。
1
2
3
4
5
6
7
8
menu:
home: /
categories: /categories
archives: /archives
tags: /tags
about: /about
#sitemap: /sitemap.xml
#commonweal: /404.html

主题设定

参考:next 主题配置

设置RSS

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 主题配置文件themes/next/_config.yml,设定 rss 字段的值:

  • false:禁用 RSS,不在页面上显示 RSS 连接。
  • 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
1
npm install hexo-generator-feed --save

站点配置文件_config.yml添加如下内容:

1
2
3
4
5
6
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
  • 具体的链接地址:适用于已经烧制过 Feed 的情形。

添加标签页面

1
2
cd quxionglie.com
hexo new page tags

关闭tags页面的评论,设置comments为false:

vi source/tags/index.md

1
2
3
4
title: 标签
date: 2017-01-26 22:23:01
type: "tags"
comments: false

新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。 底下代码是一篇包含标签的文章的例子:

1
2
3
4
5
title: 标签测试文章
tags:
- Testing
- Another Tag
---

添加分类页面

新建「分类」页面,并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。 底下代码是一篇包含分类的文章的例子:

1
hexo new page categories

vi source/categories/index.md

1
2
3
title: 分类测试文章
categories: Testing
---

添加about页面

1
hexo new page about

添加404页面

新建一个404.html文件,放到themes/next/source目录下,内容自定。

代码高亮

NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:

更改 highlight_theme 字段,将其值设定成你所喜爱的高亮主题,例如:

1
2
3
4
5
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

站点建立时间

这个时间将在站点的底部显示,例如 © 2013 - 2015。 编辑 主题配置文件themes/next/_config.yml,新增字段 since。

1
2
# Specify the date when the site was setup
since: 2013

sitemap

1
npm install hexo-generator-sitemap --save

hexo generate后自动生成sitemap.xml

robots.txt

robots.txt放在你的hexo站点的source文件下。

robots.txt

1
2
3
4
5
6
7
8
9
10
11
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /images/
Sitemap: https://www.quxionglie.com/sitemap.xml

第三方服务

评论系统

多说评论

修改主题配置文件themes/next/_config.yml中的duoshuo_shortname成你自己的。

1
duoshuo_shortname: your-duoshuo-shortname

备注:多说官方对头像和表情的 HTTPS 的支持并不完美。选择需谨慎!

Disqus

修改主题配置文件themes/next/_config.yml中的 disqus_shortname 成你自己的。

1
disqus_shortname: your-disqus-shortname

数据统计与分析

百度统计

修改主题配置文件themes/next/_config.yml中的baidu_analytics成你自己的。

1
2
# Baidu Analytics ID
baidu_analytics: c687eb847b3d4c33885670e6d25d63e7

集成

Jekyll

移动所有 Jekyll _posts 目录文件到 source/_posts 目录.

修改站点配置文件_config.ymlnew_post_name配置为:

1
new_post_name: :year-:month-:day-:title.md
1
2
3
4
5
6
7
8
9
# 修改前配置: new_post_name: :title.md
# 执行命令:
➜ quxionglie.com git:(master) ✗ hexo new page categories
INFO Created: ~/Documents/quxionglie.com/source/categories/index.md
# 修改后配置: new_post_name: :year-:month-:day-:title.md
# 执行命令:
➜ quxionglie.com git:(master) ✗ hexo new "test1"
INFO Created: ~/Documents/quxionglie.com/source/_posts/2017-01-26-test1.md