用Hexo3来写博客

至于什么是Hexo,请移步这里。本次使用的Hexo是3.x版本,新版本实现了更高的模块化,具体可参见这里。如果你之前使用的是2.x,请根据官方迁移指南,自主迁移。

本人使用的是Mac,下面来讲讲在OS X(Yosemite 10.10.3)上搭建Hexo环境。

本文中Hexo默认是指3.x版本

Pre准备工作

虽然安装Hexo之前要先安装GitNode.js这些准备工作,但是安装它们之前也还是要做一些准备工作的准备工作(其实就是避开一些坑)。

下面按照依赖关系依次予以说明:

Xcode

安装Xcode是因为后期安装一些依赖包或者库需要用到gcc, make等工具来编译出包。

一般可通过App Store来进行安装升级,目前最新版本是6.3.2。另外,还需要确保Command Line Tools已经安装,可通过以下命令进行安装或者确认:

1
$ xcode-select --install

如果已安装会提示

1
xcode-select: error: command line tools are already installed, use "Software Update" to install updates

有时App Store会抽疯,更新太慢或者无法更新(比如提示您尝试购买的项目已停止供货),这时你可以手动下载安装或者更新。友情提示:这里需要你的AppleID登录。

GoagentX

这个你懂得,使用可参考官方说明(主要是goagent配置)。

另外,你也可选择自己喜欢的“姿势”。本篇后续一些操作将以Goagent为例进行说明,其它方式大同小异,聪明的你可自行解决。

由于大部分操作是在terminal(或者iTerm2)中完成的,为了方便使用代理,这里可以这样设置:

1
2
$ echo '\n#alias for proxy\nalias "export http_proxy=http://127.0.0.1:8087 https_proxy=http://127.0.0.1:8087" \
alias stopproxy="unset http_proxy https_proxy"' >> ~/.zshrc && source ~/.zshrc

如果你使用bash shell,请将命令中的.zshrc改为.bashrc。需要使用代理前执行startproxy,不需要时执行stopproxy

HomeBrew

安装很容易,执行以下命令即可:

1
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

注:OS X中已自带ruby和curl

安装完成后执行brew doctor来检查是否正确安装。使用也很简单,一般只有记住:

  • brew doctor : 顾名思义,检测HomeBrew状态是否正常
  • brew search [foo] : 搜索formula,不指定关键字会列出全部
  • brew install FORMULA… : 安装指定的formula
  • brew uninstall FORMULA… : 卸载指定的formula
  • brew list [FORMULA…] : 列出目前已经安装的formula,如果指定formula会列出与其相关文件安装路径
  • brew update : 更新HomeBrew自身,不要和下面的命令搞混
  • brew upgrade [–all | FORMULA…] : 更新指定的formula,未指定时更新全部已安装的formula(等同于–all)
  • brew help : 命令忘记了,可以求助它

有时执行brew update会由于某些网络原因失败,这时就需要设置代理

1
2
$ git config --global http.proxy=http://127.0.0.1:8087 #这里使用的是Goagent默认代理设置
$ git config --global http.sslverify=false #避开Goagent证书认证问题

GitHub

这里你需要注册一个github账号,并且配置好Github Pages。另外,如果你想更有逼格一点,可能需要注册一个域名。

准备工作

Node.js

这里通过brew来安装,目的是方便以后统一管理。你也可以直接下载npm的pkg包进行安装,如果这样做请直接跳过这一小节。

1
2
$ brew update #确保安装的formula为最新版本
$ brew install node --without-npm #目前版本为0.12.4

可能下载安装包时速度比较慢(目前国内也没有很好的镜像),这里可以采用离线安装方式进行hack。

  1. 先到淘宝npm镜像下载源码包
  2. 将下载好的源码包拷贝到HomeBrew缓存目录下cp ./node-v0.12.4.tar.gz $(brew --cache)
  3. 删除缓存目录下node-0.12.4.tar.gz.incomplete文件(如果有),并将上一步拷贝的源码包改名为node-0.12.4.tar.gz(注意那个v)
  4. 再次执行brew install node --without-npm,安装完毕

NPM

如果先前你通过pkg包方式安装,请直接跳过该小节。

这里不推荐使用brew来安装,虽然大多数情况下,它还是不错的。我的brew(version=0.9.5)已经不能通过brew install npmjs来安装了。

1
2
3
4
5
$ brew search npmjs
No formula found for "npmjs".
Searching pull requests...
Closed pull requests:
Added sudo to "curl http://npmjs.org/install.sh | sudo sh" since the com... (https://github.com/Homebrew/homebrew/pull/9570)

怎么办呢?可以跟着这个gist做。

另外,我们也可以设置npm的源来提高使用体验,具体可以参考淘宝NPM镜像

安装Hexo

现在可使用npm安装Hexo-cli

1
$ npm install -g hexo-cli

初始化目录

1
$ hexo init johntse.me

你会看到类似于以下的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ tree -L 2
.
├── _config.yml
├── node_modules #默认安装的插件
│   ├── hexo-generator-archive
│   ├── hexo-generator-category
│   ├── hexo-generator-index
│   ├── hexo-generator-tag
│   ├── hexo-renderer-ejs
│   ├── hexo-renderer-marked
│   ├── hexo-renderer-stylus
│   └── hexo-server
├── package.json #插件的配置,使用npm install xxx --save 会写入这里
├── scaffolds #模板
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts #文章
└── themes
└── landscape #默认主题

切换到johntse.me目录中,并安装hexo

1
2
$ cd johntse.me/
$ npm install hexo --save

Hexo3开始支持多个hexo版本共存,你应该注意到以上命令中并没有使用-g选项。另外这里--save的作用是依赖写入到package.json中,具体可参见npm的官方说明

由于Hexo3的高度模块化和扩展性,我们可以通过安装插件的方式,来使用一些功能。下面列出一些必备插件:

1
2
3
4
5
$ npm install hexo-deployer-git --save #deploy到github pages上
$ npm install hexo-generator-feed --save #提供rss订阅功能
$ npm install hexo-generator-sitemap --save #sitemap
$ npm install hexo-fs --save #其他插件依赖
$ npm install hexo-renderer-mathjax --save #支持Latex公式

更多插件参见官网插件列表

这里你也可以通过直接修改package.json中的dependencies节点配置来安装插件,比如:

1
2
3
4
5
"dependencies": {
....
"hexo": "^3.1.1", #指定版本
"hexo-deployer-git": "*" #不关心具体版本
}

保存执行npm install即可安装所配置的插件了。

配置Hexo

配置分为站点配置和主题配置,其中站点配置为johntse.me/_config.yml,主题配置为johntse.me/themes/具体主题/_config.yml

站点配置

站点配置主要涉及_config.yml文件中的网站(#Site),网址(#URL),扩展(#Extensions)以及部署(#Deployment)这几个配置段。其它配置可以先保持默认。

具体配置可以参考官网或者配置文件中德注释部分,下面主要讲讲一些易错的。

  • 所有配置要注意:后面的那个空格
  • 网站配置中的language的取值要根据选择主题而定,比如我使用的next主题就要求设置为zh-Hans而不是zh_CN
  • 网站配置中timezone可以为空,跟着你的电脑走
  • 主题默认为light,你可以下载主题,在下面的主题配置中具体讲
  • 部署配置中,如果你部署到Github Pages上,请增加repo: pages的repository url,注意在repo前面加两个空格。如果需要多个部署请遵循以下格式:
1
2
3
4
5
deploy:
- type: git
truetrue repo:
- type: heroku
truetrue repo:

主题配置

hexo3提供的默认主题是light,另外也有其它主题可供选择。

可通过以下方式获取主题:

1
2
$ cd johntse.me/
$ git clone <theme\'s repository url> themes/主题名

使用主题时,可以配置johntse.me/_config.yml中的theme: 主题名

每个主题都是可以通过johntse.me/themes/_config.yml来进行配置,各家不同。具体可以参考相应主题的GitHub Wiki。

开始写博客

1
$ hexo new post "title"

其中post指定了layout,默认为post。可以通过修改johntse.me/_config.yml中的default_layout参数指定默认layout。另外,建议不要改动文档的字符编码(默认是UTF-8)。

该命令会在johntse.me/source/_post/下创建名为title.md的文件,也就是你要写的博客文章。Hexo使用的Markdown语法来编写文章,这里推荐使用Mou来作为Markdown的编辑器。

文章开头有一段称为Front-matter的以---分割的区域。默认情况下采用YAML格式,当然也可以采用JSON格式,具体参见front-matter设置。一般常用变量项:

1
2
3
4
5
6
7
8
9
10
11
title: 用Hexo3来写博客 #文章标题,必填
date: 2015-05-31 09:20:44 #文章生成时间,必填
categories: #文章分类目录,顺序敏感(A, B 不等于 B, A),可以省略
true- cate1
true- cate2
true...
tags: #文章标签,顺序不敏感,可以省略
true- tag1
true- tag2
true...
description: #你对本篇文章的描述,可以省略

当然,根据你使用的主题不同,可能有些变量不会被识别。

另外,我们也可以使用<!--more-->来设置文章摘要:

1
2
3
... #这里将作为文章摘要
<!--more-->
... #这里是余下正文,即点击更多后展示的

设置摘要的好处是在首页可以展示更多文章,便于读者浏览阅读。

预览和生成博客

预览

通过预览我们可以提前欣赏自己的劳动成果,给自己前进的动力。

1
$ hexo s #即hexo server,3.x版本支持更短命令了

此时,没有问题的话会有以下提示:

1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

打开浏览器,访问http://localhost:4000,即可欣赏自己的劳动成果了。你也可以一边修改文章,一边刷新浏览器来实现伪REPL(如果修改了文章名称、配置请重新运行hexo s)。这样可以方便自己微调。

当你使用Ctrl+C退出时,hexo每次打印的退出消息可能不一样噢。比如:

1
2
3
4
5
INFO Bye!
INFO Good bye
INFO See you again
INFO Catch you later
...

大家可以试试。

生成

所谓生成就是将前面的文章、主题等渲染生成静态文件。

1
$ hexo g #即hexo generate

如果有频繁的改动,又不想每次都执行一遍hexo g,可以使用

1
$ hexo g --watch

这样一旦有文件改动,hexo就会实时的生成。当然,只生成和改动文件相关的。

执行生成后,会在当前目录(johntse.me/),生成一个public文件夹,其中即包含了相关静态文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
├── public
│   ├── 2015
│   ├── archives
│   ├── atom.xml
│   ├── categories
│   ├── css
│   ├── favicon.ico
│   ├── fonts
│   ├── images
│   ├── index.html
│   ├── js
│   ├── sitemap.xml
│   ├── tags
│   └── vendors
...

部署

这里假定你已经完成了GitHub Pages设置了,在_config.yml中修改deploy,如下:

1
2
3
deploy:
type: git
repo: <GitHub Pages的repo>

开始部署:

1
$ hexo d --generate # 表示在部署前先生成,避免生成部署期间的改动丢失需要再执行deploy的问题

现在你可以在浏览器中访问你的博客了,nice!

更多

你还可以为你的博客做这些:

  • 增加评论系统(比如disqus),如何使用disqus可参考这篇文章。怎样在自己的博客中集成,可以查看相关主题配置
  • 添加favicon.ico,可以通过这个网站来生成
  • 注册一个自己的域名,域名注册使用godaddy,DNS用国内的dnspod
  • 创建个性404页面,about页面…
  • 配置robots.txt

现在开始开始写博客吧,Enjoy:)

#FAQ
解决Hexo相关问题的最好方法,就是去看Hexo的issues或者在上面提问。下面列出一些我遇到的:

brew无法更新

可行的解决方法

  • 请直接上代理
  • 如果出现Error: Failure while executing: git pull -q origin refs/heads/master:refs/remotes/origin/master,请参考这个issues

npm运行报错

可行的解决方法

  • 请确保未使用brew来安装
  • 执行where npm,看是否安装了多个。如果安装了多个,请保留非brew安装版本
  • 设置npm源,可参看淘宝npm源
  • 更新到最新版本npm install npm -g
  • 查看npm的issues

hexo运行报错

1
2
3
4
'hexo' command shows the error message:
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

可行的解决方法

0%