Hexo：基于 Node.js 的静态博客程序

Hexo，这个逼格极高的程序猿写做方式，我喜欢。就连 Hexo 的发音都像是黑客哦！若是你跟我同样纠结哪里写博，那就来到GitHub吧，让咱们一块儿hexo！H人希绝对不会让你失望，相信很快hexo就会流行起来。

Hexo出自台湾大学生 tommy351 之手，是一个基于 Node.js 的静态博客程序，其编译上百篇文字只须要几秒。hexo生成的静态网页能够直接放到GitHub Pages，BAE，SAE等平台上。先看看tommy是如何吐槽Octopress的——《Hexo颯爽登場》。

搭建过程你或许以为有那么点小繁琐，但一旦搭建完成，写文章是极简单，极舒服的。

只须要几个简单命令，你就能够完成一切。

hexo n #写文章
hexo g #生成
hexo d #部署 # 可与hexo g合并为 hexo d -g

下面逐步介绍，进入正题。

环境准备

安装Node
到Node.js官网下载相应平台的最新版本，一路安装便可。我用的是node-v0.10.22-x86.msi

安装Git
Git的客户端不少，详细的能够看一些这篇文章的安装教程：《使用 Github Pages 建独立博客》

安装Sublime（可选）
Sublime Text 2在这里仅仅做为一个文本编辑器使用，支持各类编程语言和文件格式，固然也支持Markdown语法，实在是个不可多得的练码奇才。喜欢追鲜的也能够尝试处于beta版本的Sublime Text 3。

Github

• 首先注册一个『GitHub』账号，已有的默认默认请忽略
• 创建与你用户名对应的仓库，仓库名必须为『your_user_name.github.com』
• 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』

前两步忽略，只说第三步，添加SSH-Key。
首先设置你的用户名密码：

git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"

生成密钥：

ssh-keygen -t rsa -C "你的邮箱"

输入文件路径：

H:\hexo\blog>ssh-keygen -t rsa -C "xiaowu@aips.me（你的邮箱）"
Generating public/private rsa key pair.
Enter file in which to save the key (//.ssh/id_rsa): H:\git\myssh\ssh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in H:\git\myssh\ssh.
Your public key has been saved in H:\git\myssh\ssh.pub.
The key fingerprint is:
b0:0c:2e:67:33:ab:c1:50:10:40:0a:ba:c1:80:59:22 xiaowu@aips.me

上面有个bug，文件路径中的盘符H必须大写，不然会报错。

上述命令若执行成功，会在H:\git\myssh目录下生成两个文件id_rsa和id_rsa.pub，最后两步：

1. 用文本编辑器打开ssh.pub文件，拷贝其中的内容，将其添加到Add SSH Key
2. 将id_rsa和id_rsa.pub拷贝至你Git安装目录下的.ssh目录，如H:\PortableGit-1.8.4\.ssh

能够验证一下：

ssh -T git@github.com

如有问题，请从新设置。常见错误请参考：
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)

安装

Node和Git都安装好后，可执行以下命令安装hexo：

npm install -g hexo

初始化

而后，执行init命令初始化hexo到你指定的目录：
[cce]hexo init [/cce]

也能够cd到目标目录，执行hexo init。
好啦，至此，所有安装工做已经完成！

生成静态页面

cd 到你的init目录，执行以下命令，生成静态页面至hexo\public\目录。

hexo generate

【注】命令必须在init目录下执行，不然不成功，可是也不报错。
当你修改文章Tag或内容，不能正确从新生成内容，能够删除hexo\db.json后重试，还不行就到public目录删除对应的文件，从新生成。

本地启动

执行以下命令，启动本地服务，进行文章预览调试。
[cce]hexo server[/cce]
浏览器输入 http://localhost:4000 就能够看到效果。

请使用高级浏览器，不然可能…你懂的！

写文章

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md。
[cce]hexo new [layout] "postName" #新建文章[/cce]
其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。固然你能够添加本身的layout，方法就是添加一个文件便可，同时你也能够编辑现有的layout，好比post的layout默认是hexo\scaffolds\post.md

title: {{ title }}
date: {{ date }}
tags:
---

我想添加categories，以避免每次手工输入，只须要修改这个文件添加一行，以下：

title: {{ title }}
date: {{ date }}
categories:
tags:
---

postName是md文件的名字，同时也出如今你文章的URL中，postName若是包含空格，必须用"将其包围，postName能够为中文。

【注】全部文件：后面都必须有个空格，否则会报错。

看一下刚才生成的文件hexo\source_posts\postName.md，内容以下：

title: postName #文章页面上的显示名称，能够任意修改，不会出如今URL中
date: 2014-05-16 15:30:16 #文章生成时间，通常不改，固然也能够任意修改
categories: #文章分类目录，能够为空，注意:后面有个空格
tags: #文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格
---
这里开始使用markdown格式输入你的正文。

接下来，你就能够用喜好的编辑器尽情书写你的文章。关于markdown语法，能够参考《Markdown 语法说明》

fancybox
可能有人对这个 Reading 页面中图片的 fancybox 效果感兴趣，这个是怎么作的呢。
很简单，只须要在你的文章*.md文件的头上添加photos项便可，而后一行行添加你要展现的照片：

layout: photo
title: 个人阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://cnd.aips.me/photos-0.jpg
- http://cdn.aips.meing/photos-1.jpg

【注】通过测试，文件头上的layout: photo能够省略。

不想每次都手动添加怎么办？一样的，打开您的hexo\scaffolds\photo.md

layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
----

而后每次能够执行带layout的new命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章

description
markdown文件头中也能够添加description，以覆盖全局配置文件中的description内容，请参考下文_config.yml的介绍。

title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你对本页的描述
---

hexo默认会处理所有markdown和html文件，若是不想让hexo处理你的文件，能够在文件头中加入layout: false。

文章摘要
在须要显示摘要的地方添加以下代码便可：

以上是摘要
<!--more-->

more以上内容便是文章摘要，在主页显示，more如下内容点击『> Read More』连接打开全文才显示。
【注】hexo中全部文件的编码格式均是UTF-8。

主题安装

萝卜白菜各有所爱，玩博客换主题是必不可少的，hexo的主题列表 Hexo Themes。
我比较喜欢 pacman，modernist、ishgo，raytaylorism。Pacman最为优秀，简洁大方小清新，同时移动版本支持的也很好，但做者并无把不少参数分离出来给出可配置项，我最终选择了modernist。

安装主题的方法就是一句git命令：

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

目录是不是modernist无所谓，只要与_config.yml文件一致便可。

安装完成后，打开hexo_config.yml，修改主题为modernist

theme: modernist

打开hexo\themes\modernist目录，编辑主题配置文件_config.yml：

menu: #配置页头显示哪些菜单
# Home: /
Archives: /archives
Reading: /reading
About: /about
# Guestbook: /about

excerpt_link: Read More #摘要连接文字
archive_yearly: false #按年存档

widgets: #配置页脚显示哪些小挂件
- category
# - tag
- tagcloud
- recent_posts
# - blogroll

blogrolls: #友情连接
- bruce sha's wordpress: http://www.aips.me
- bruce sha's Design blog: http://ww.aips.me/blog/
- bruce sha's Dribbble: http://dribbble.com/xiaowu

fancybox: true #是否开启fancybox效果

duoshuo_shortname: buru #多说帐号

google_analytics:本身写上来

rss:本身写上来

更新主题

cd themes/modernist
git pull

评论框

静态博客要使用第三方评论系统，hexo默认集成的是Disqus，由于你懂的，因此国内的话仍是建议用多说。
直接用你的微博/豆瓣/人人/百度/开心网账号登陆多说，作一下基本设置。若是使用modernist主题，在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname便可。你也能够在多说后台自定义一下多说评论框的格式，好比评论框的位置，对于css设置，能够参考这里，我是在 HeroicYang 的基础上修改的。

若是你是有的其余第三方评论系统，将通用代码粘贴到 hexo\themes\modernist\layout_partial\comment.ejs 里面，以下：

<% if (config.disqusshortname && page.comments){ %>

#你的通用代码 

<% } %>

自定义页面

执行new page命令

hexo new page "about"

在hexo\source\下会生成about目录，里面有个index.md，直接编辑就能够了，而后在主题的_config.yml中将其配置显示出来。
上述步骤，也能够手工生成，在hexo\source\下手工新建about和index.md也是彻底等价的。

由于markdown对table的支持很差，我是在about中直接创建index.html，里面书写页面内容，hexo会帮你加上头和尾。

404页面

GitHub Pages 自定义404页面很是容易，直接在根目录下建立本身的404.html就能够。可是自定义404页面仅对绑定顶级域名的项目才起做用，GitHub默认分配的二级域名是不起做用的，使用hexo server在本机调试也是不起做用的。
其实，404页面能够作更多有意义的事，来作个404公益项目吧。
目前有以下几个公益404接入地址，我选择了腾讯的。404页面，每一个人能够作的更多。

腾讯公益404
404公益_益云(公益互联网)社会创新中心
失蹤兒童少年資料管理中心404

图床

考虑到博客的速度，同时也为了便于博客的迁移，图床是必须的。我强烈推荐七牛云存储，访问速度极快，支持日志、防盗链和水印。

免费用户有每个月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求，这对我的博客来讲足够，不够的话点这个活动页面，也可经过邀请好友得到奖励，我也求一下七牛邀请。有一点要说明的是，七牛没有目录的概念，可是文件名能够包含/，好比2013/11/27/reading/photos-0.jpg，参考这里关于key-value存储系统。
若是你对七牛web版的文件管理界面不满意，能够用官方的七牛云存储工具。

申请域名（可选）

GitHubPages 默认为每一个用户分配了一个二级域名『your_user_name.github.com』或『your_user_name.github.io』（具体能够看这里）。

若是你对上述域名不满意，能够本身去申请一个本身的域名（周良常年代理注册，价格比官网便宜许多），而后绑定到GitHub Pages。绑定方法很简单，在repo根目录下创建一个CNAME文件，里面写上域名便可。

命令

经常使用命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub

经常使用复合命令：

hexo deploy -g
hexo server -g

简写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

至此，基本操做介绍完毕，若是你对Hexo这种博客方式有兴趣，能够移步到个人代码博客查看相关的教程：

http://www.aips.me/code/category/hexo

本文经原做者赞成后进行转载，原文地址这里