Hexo 出自台湾大学生SkyArrow之手,是一个基于 Node.js 的静态博客框架,编译上百篇文字只需要几秒。在已经有 Octopress 和 jekyll的情况下,SkyArrow为什么要自己造轮子呢,可以他的这篇文章:Hexo颯爽登場!

Hexo的特点:

  • 极速生成静态页面
  • 支持Markdown
  • 一键部署博客
  • 丰富的插件支持

Hexo 依赖于 git 和 Node.js,在安装 hexo 之前,需要确保这两个工具正确安装。git 很早就已经安装完成了就不去翻教程了,看官自行 Google ~ 附 Node.js 下载地址,Mac 下安装也是很方便。

以下内容基于 Hexo 3.2.0 版本

安装 Hexo

npm install hexo -g

一步到位,除了家里的网速让人比较捉急,安装还是很简单的。

初始化

用命令行工具创建将要用来存放 hexo 文件的目录,并进入该目录下

mkdir hexo
cd hexo
hexo init

初始化之后,目录结构如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
└── themes

3 directories, 2 files

Ps: 不知道用梯子是否会快一些,反正博主安装的时候特别慢!慢!慢!

初始化之后就可以把整个 hexo 目录同步到 Github 或者其他的代码托管平台,可以做版本控制,防止文章丢失,也可以一次初始化,各处同步,避免重复进行配置操作。需要注意的是 node_modules 由于文件太多,建议不做同步。在需要同步的设备上,先 init 一个新的 hexo,再吧文件夹拷贝过来即可。

本地预览

hexo server
hexo s

两条指令二选一,运行本地服务后,可以通过浏览器访问 http://yourusername.github.io/,预览效果。

生成静态文件

hexo generate
hexo g

两条指令二选一,该命令会在 public 目录导出静态 html 文件。注意导出的静态文件由于链接尚未修改,不能直接使用浏览器预览。鉴于 hexo 支持直接将文章发布到 Github Pages,足以满足博主需求,也就没有纠结这个问题的必要。

更换主题

安装依赖包,此处需要自备梯子,如果没有,可以试试这个 VPN

npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save

如果安装过程中出现错误,先卸载掉之前安装出问题的包

npm uninstall  hexo-renderer-jade --save
npm uninstall hexo-renderer-sass --save

再切换到 淘宝的NPM镜像

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

使用淘宝的 cnpm 安装依赖包

cnpm install hexo-renderer-jade --save
cnpm install hexo-renderer-sass --save

准备工作完成后,开始安装主题,首先找到你喜欢的 主题,hexo 换主题很是方便,因此博主先挑了一个还算顺眼的主题先用着 maupassant。强迫症患者一枚,需要深度自定义自家博客的样式,找到主题的第一时间就是 fork 一份到自己的 Github。

clone 主题到 hexo 的 themes 目录

git clone https://github.com/CodingPub/maupassant-hexo themes/maupassant

如果你跟我一样使用 git 同步 hexo,可以把主题作为 hexo 的 submodule,而不是执行上面的 clone 指令

git submodule add -b master --force https://github.com/CodingPub/maupassant-hexo themes/maupassant

在需要同步 hexo 的设备上同步主题需要执行以下命令

git submodule init
git submodule update

这样主题就可以作为 hexo 的一个子模块单独配置了,然后你就可以用同一套主题,开 N 个博客了 ~

将主题放到 hexo 的指定目录后,再修改 hexo 根目录下的 _config.yml 文件,指定 theme 为 选定的 maupassant 主题就可以了。重新运行 hexo 看看效果吧。

maupassant 的深度定制等博主捣鼓好,再另外写篇博客记录吧。

新建文章

hexo new "blog title"
hexo n "blog title"

两条指令二选一,会在 hexo/source/_posts 目录下生成对应名称的文件,建议使用 markdown 编辑器写博客,Mac 下可以使用 MacDown,用了一阵子感觉还不错,目前还没有找到更好的替代品,欢迎推荐。

文章头部内容如下

---
title: blog title
date: 2016-04-03 22:18:43
categories: 分类1
tags: 标签1
---

其中标签或者分类可以有多个,如:[标签1, 标签2]

新建页面

hexo new page "about"

使用 hexo/scaffolds/page.md 模板创建一个新的页面,hexo 默认情况下并没有生成 about 页面,这里使用该命令创建了一个主题的_config.yml文件中配置的 about 页面:

menu:
- page: home
directory: .
icon: fa-home
- page: archive
directory: archives/
icon: fa-archive
- page: about
directory: about/
icon: fa-user

hexo/source目录下多了一个 about 文件夹,编写其中的 index.md 文件就可以实现关于页面,格式同文章一致。

这里可能需要用到一些常用图标,建议使用 Font Awesome,可以选择需要的图标,并按照指定规范引入,

如:

预览: <i class="fa fa-user"></i>

预览:

新建草稿

hexo new draft "just a draft"

hexo/source/_drafts目录下生成一篇新的草稿,该草稿不会生成到hexo/public目录,也不会发不到 Github Pages 等托管平台。

预览草稿

方案一:

如下方式启动 server

hexo server --drafts

方案二:

修改 hexo/_config.yml 下的 render_drafts 配置为 true

render_drafts: true

个人建议还是方案一,方案二也需要重启 server。

发布草稿

hexo publish "just-a-draft"

文章将被迁移到hexo/_posts目录,并自动加上当前时间。

发布博客到 Github Pages

第一次发布需要修改 hexo/_config.yml 的 deploy 配置

deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

安装 hexo-deployer-git 插件,执行

npm install hexo-deployer-git --save

完成后在 hexo 目录执行发布命令,二选一

hexo deploy
hexo d

发布过程中如果出现以下错误

FATAL fatal: unable to access 'https://github.com/xxx/xxx.github.io.git/': Could not resolve host: github.com

说明本机未配置好 SSH Key,参考《Mac 下配置 SSH key》配置好后,再执行一次发布命令即可。

更新

  • 查看 hexo 版本

    hexo version
  • 更新hexo

    npm update -g hexo
  • 更新插件

    npm update

重装 hexo

cd <YOUR_HEXO_DIR>
rm -rf node_modules
npm uninstall -g hexo-cli
npm uninstall -g hexo
npm install -g hexo-cli
npm install

参考