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 |
初始化之后,目录结构如下:
. |
Ps: 不知道用梯子是否会快一些,反正博主安装的时候特别慢!慢!慢!
初始化之后就可以把整个 hexo 目录同步到 Github 或者其他的代码托管平台,可以做版本控制,防止文章丢失,也可以一次初始化,各处同步,避免重复进行配置操作。需要注意的是 node_modules 由于文件太多,建议不做同步。在需要同步的设备上,先 init 一个新的 hexo,再吧文件夹拷贝过来即可。
本地预览
hexo server |
两条指令二选一,运行本地服务后,可以通过浏览器访问 http://yourusername.github.io/
,预览效果。
生成静态文件
hexo generate |
两条指令二选一,该命令会在 public 目录导出静态 html 文件。注意导出的静态文件由于链接尚未修改,不能直接使用浏览器预览。鉴于 hexo 支持直接将文章发布到 Github Pages,足以满足博主需求,也就没有纠结这个问题的必要。
更换主题
安装依赖包,此处需要自备梯子
,如果没有,可以试试这个 VPN
npm install hexo-renderer-jade --save |
如果安装过程中出现错误,先卸载掉之前安装出问题的包
npm uninstall hexo-renderer-jade --save |
再切换到 淘宝的NPM镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org |
使用淘宝的 cnpm 安装依赖包
cnpm install hexo-renderer-jade --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 |
这样主题就可以作为 hexo 的一个子模块单独配置了,然后你就可以用同一套主题,开 N 个博客了 ~
将主题放到 hexo 的指定目录后,再修改 hexo 根目录下的 _config.yml 文件,指定 theme 为 选定的 maupassant 主题就可以了。重新运行 hexo 看看效果吧。
maupassant 的深度定制等博主捣鼓好,再另外写篇博客记录吧。
新建文章
hexo new "blog title" |
两条指令二选一,会在 hexo/source/_posts
目录下生成对应名称的文件,建议使用 markdown 编辑器写博客,Mac 下可以使用 MacDown,用了一阵子感觉还不错,目前还没有找到更好的替代品,欢迎推荐。
文章头部内容如下
--- |
其中标签或者分类可以有多个,如:[标签1, 标签2]
新建页面
hexo new page "about" |
使用 hexo/scaffolds/page.md
模板创建一个新的页面,hexo 默认情况下并没有生成 about 页面,这里使用该命令创建了一个主题的_config.yml
文件中配置的 about 页面:
menu: |
在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: |
安装 hexo-deployer-git 插件,执行
npm install hexo-deployer-git --save |
完成后在 hexo 目录执行发布命令,二选一
hexo deploy |
发布过程中如果出现以下错误
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> |
参考