之前一直想着把博客从Octopress迁移到Hexo。由于前阵子工作比较繁忙，所以这个想法就被搁置下来了。今天有时间，就开始着手博客搬家吧！Hexo主题非常多，好友刘春桂给我推荐了一款简洁的主题Maupassant。现在用着，感觉还不错。下面我就简单的整理一下迁移Hexo步骤：

一、Hexo安装

安装Hexo之前先检查一下电脑中是否安装了：Node.js，Git。如果没有安装，请先自行安装，下面的教程是默认用户的电脑中已经安装好了以上应用程序（不会安装，请点这）。

开始安装Hexo:

1
$ npm install -g hexo-cli

二、创建新博客目录

执行下面的命令，创建新博客目录：（以目录名为blog为例）

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

命令执行完成后，blog文件夹目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml		//网站配置信息
├── package.json	//应用程序信息
├── scaffolds	//模板文件夹
├── source	//资源文件夹，博客文章目录
|   ├── _drafts
|   └── _posts
└── themes	//存放博客主题文件

三、安装主题Maupassant

安装主题与渲染器：

1
2
3
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

编辑blog目录下的_config.yml文件，将theme值改为maupassant。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant

注意：
如果npm install hexo-renderer-sass安装时报错，解决方法如下：
可以先安装cnpm:

1
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

然后再定位到blog根目录下，执行：

1
2
sudo cnpm install hexo-renderer-jade --save
sudo cnpm install hexo-renderer-sass --save

如果发现如下错误：

造成原因：renderer没有安装成功，按照上面解决方法解决即可。

三、主题配置

我们可以对maupassant主题进行配置。找到blog(根目录)/themes/maupassant目录下的_config.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
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
fancybox: true	#是否启用Fancybox图片效果
duoshuo: yangshebing #添加多说评论
disqus: #添加Disqus评论
google_search: true #使用谷歌搜索
baidu_search: #使用百度搜索
swiftype: #Swiftype站内搜索key
tinysou: #微搜索key
self_search: #基于jQuery的本地搜索引擎。需要安装hexo-generator-search插件。
google_analytics: #Google Analytics ID
baidu_analytics: ad5152aa4d2164ce1cc1c3fbada6f5ec # 百度统计ID
show_category_count: false #是否显示侧边栏分类数目
shareto: true #是否使用分享按钮。
busuanzi: true #是否使用不蒜子页面访问计数。
widgets_on_small_screens: false #是否在移动设备屏幕底部显示侧边栏
menu:	//自定义菜单
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  # - page: rss
  #   directory: atom.xml
  #   icon: fa-rss

widgets: #选择和排列侧边栏显示的项目：搜索，分类，标签，最新发布，最新评论，链接
  - search
  - category
  # - tag
  - recent_posts
  - recent_comments
  - links

links:
  - title: 刘春桂的技术博客
    url: http://www.liuchungui.com/

timeline:
  - num: 1
    word: 2014/06/12-Start
  - num: 2
    word: 2014/11/29-XXX
  - num: 3
    word: 2015/02/18-DDD
  - num: 4
    word: More

# Static files
js: js
css: css

# Theme version
version: 0.0.0

配置的过程中需要注意的是：

  • 添加多说评论时，注意创建站点。找到short_name。
1
duoshuo: yangshebing

  • 百度统计：

    1
    baidu_analytics: ad5152aa4d2164ce1cc1c3fbada6f5ec

  • 菜单和侧边栏工具可根据需求自行添加。
    菜单中我去掉了rss订阅功能。侧边栏中我去掉了tag标签。

  • 关于如何创建“关于”（about）页面的解决方式:
    在blog(根目录)文件夹下的source目录中创建一个“about”文件夹，然后在about文件夹中添加一个index.md文件。（解决方式出处点这里）

四、迁移Octopress博文

将以前Octopress目录下source/_post目录中的markdown文件拷贝到blog(博客根目录)中的source/_post目录下。并修改blog(根目录)文件夹下的_config.yml文件中的new_post_name参数。

1
new_post_name: :year-:month-:day-:title.md

迁移完成后，我们可以本地进行预览一下博客：

1
$ hexo server

启动服务器，默认情况下访问：http://localhost:4000/。

五、发布文章

1、新建文章

1
hexo new "Hexo博客搭建中遇到的问题"

2、生成静态文件

1
$ hexo generate

3、部署服务器

1
$ hexo deploy

在使用一键部署功能之前，你需要先安装hexo-deployer-git:(以git的方式部署)

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

然后再修改blog(根目录)下的_config.yml文件中的参数。如下：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/yangshebing/yangshebing.github.io.git
  branch: master

最后，如果使用了github page服务，需要在blog(根目录)下的public文件夹（部署后生成）中添加对应的CNAME文件：

暂时先写到这，以后碰到问题再补上。

六、参考博客资料：