修改记录：

  • 2016-08-09 发布
  • 2016-10-3 添加常用命令

前段时间看到唐巧大大将博客从Octopress迁移到了Hexo，当时顿觉新奇，在本地搭建了下hexo。发现搭建起来确实简单方便，而且npm的安装方式也特别顺手，当然这是因为开发react-native久了就有这么个感觉。不过，当时只是在本地搭建了，并没有什么其他想法。但是，不久之后，硬盘被锁，无力回天，只能施展重装系统大法才解决。但是，此法有一后遗症，那就是电脑上的软件都没有了，博客系统也没有了。

至此之后，耽搁了一段时间没有写博客，最近想捡回来，重装了Octopress之后发现评论、百度SEO不见了，不想折腾Octopress，随之换了个Hexo试试，下面是一篇简单总结。

一、安装Hexo

Hexo的安装主要参考Hexo的官方文档https://hexo.io/zh-cn，这里只列出简单的安装方式。

在安装Hexo之前，你需要首先安装Node.js，这我们可以不翻墙到http://nodejs.cn/下载。

安装完node.js之后，使用下面命令全局安装Hexo

1
$ npm install -g hexo-cli

到此，我们安装好了Hexo，之后我们开始搭建博客。

1
2
3
4
#初始化博客
hexo init myblog
cd myblog
npm install

安装完这一切之后，我们就可以查看Hexo效果了

1
2
3
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器里面输入localhost:4000，我们就看到了效果。这样，Hexo就安装好了，是不是很简单？

二、配置

Hexo安装之后，我们当然要做一些配置，这一步特别简单，只需要在myblog目录下编辑_config.yml文件，修改下相关配置就行了。这里，我只列出修改的选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Site
title: 刘春桂的博客 #博客的标题
author: liuchungui #博客的作者
language: zh-CN #博客的语言，zh-CN代表中文
# URL
url: http://www.liuchungui.com #博客域名
# Writing
new_post_name: :year-:month-:day-:title.md #新建博客时的命名方式
highlight:
  auto_detect: false #是否自动检测代码高亮
# Pagination
per_page: 20 #每一页20条博客
# Extensions
theme: landscape #主题

三、修改主题

1、安装主题

如果你觉得默认的主题不符合胃口，可以到https://hexo.io/themes/找一个你喜欢的。主题找来找去，我最后选择了maupassant这个主题，感觉它非常的简洁美观。

按照maupassant作者的一篇博客大道至简——Hexo简洁主题推荐进行了安装，步骤如下：

1
2
3
4
#将主题安装到themes/maupassant目录下
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

需要注意的是，安装上面的内容是在myblog目录下进行的。

在npm install hexo-renderer-sass --save安装时，我失败了，然后使用cnpm进行了安装就没有了问题。

安装好之后，在themes目录下多了个maupassant，然后我们编辑Hexo的配置文件_config.yml，将theme的值改为maupassant。

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

注：Hexo的配置文件和主题的配置文件名字都是_config.yml，我们需要区别开来。下面我称主题的配置文件为maupassant的_config.yml。

安装好这一切之后，我们使用hexo server开启服务器，刷新本地的页面，我们就看到了简洁的博客页面出现我们眼前。

2、修改主题配置

整个主题，有些东西我觉得它还不够简洁，于是我在maupassant的_config.yml文件中注释了一些东西，去掉了菜单的about和rss。

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  # - page: about #去掉about页面
  #   directory: about/
  #   icon: fa-user
  # - page: rss #去掉rss页面
  #   directory: atom.xml
  #   icon: fa-rss

关闭友情链接和tag

1
2
3
4
5
6
7
widgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.
  - search
  - category
  # - tag #去掉tag
  - recent_posts
  - recent_comments
  # - links #关闭友情链接

加上多说评论和百度统计

1
2
duoshuo: liuchungui
baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 8006843039519956000

之后，主题就看起来简洁多了。

三、将Octopress迁移到Hexo

迁移这个非常简单，将以前Octopress博客中source/_posts目录下的所有markdown文件复制到Hexo目录下的source/_posts就行了。

不过，在迁移中就说说碰到的一些问题：

  1. 在有一篇博客中英文太长导致不换行，然后出现了排列不是特别好看，这里我的解决的办法是修改maupassant主题下的css/style.scss文件中.post-content样式的text-align样式，将justify改成left就行了
  2. 对html写的table适配的不是特别好，会出现一大片空白，问题见https://github.com/hexojs/hexo/issues/1388。暂时没有什么解决的办法，最后是将表格截了一张图放在上面显示。
  3. #后面没有空格，导致标示标题的#出现文中，最后将整个博客调了一遍，改成## + 空格 + 标题的方式。
  4. 三个反引号里面放一段代码时，由于结尾的反引号后面有空格，导致代码和正文排版混乱。最后删除了空格，就没什么问题了。

四、发布博客

安装hexo-deployer-git

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

然后修改Hexo中的配置，

1
2
3
4
deploy:
  type: git #git的方式部署博客
  repo: [email protected]:liuchungui/liuchungui.github.io.git #博客仓库地址
  branch: master #存储在master分支下

最后，我们将博客上传到github上

1
2
3
4
#生成博客网页文件
$ hexo generate
#部署
$ hexo deploy

注：如果我们是使用github page服务，注意在public文件中加上对应的CNAME文件。

常用命令

1
2
3
4
5
6
7
8
9
10
#新建一个博客
$ hexo init [folder]
#新建一篇文章
$ hexo new [layout] <title>
#生成静态文件
$ hexo generate
#启动服务器
$ hexo server
#部署到博客
$ hexo deploy

参考

https://hexo.io/zh-cn/docs/commands.html

大道至简——Hexo简洁主题推荐