科技猎Hexo：独立博客新玩法 | 周良博客
- 环境准备
- Github
- 安装
- 初始化
- 生成静态页面
- 本地启动
- 写文章
- 主题安装
- 评论框
- 自定义页面
- 404页面
- 图床
- 申请域名（可选）
- 命令
Hexo，这个逼格极高的程序猿写作方式，我喜欢。就连 Hexo 的发音都像是黑客哦！如果你跟我一样纠结哪里写博，那就来到GitHub吧，让我们一起hexo！H人希绝对不会让你失望，相信很快hexo就会流行起来。
Hexo出自台湾大学生 tommy351 之手，是一个基于 Node.js 的静态博客程序，其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages，BAE，SAE等平台上。先看看tommy是如何吐槽Octopress的——《Hexo颯爽登場》。
搭建过程你或许觉得有那么点小繁琐，但一旦搭建完成，写文章是极简单，极舒服的。
只需要几个简单命令，你就可以完成一切。
hexo n http://www.aips.me写文章
hexo g http://www.aips.me生成
hexo d http://www.aips.me部署 http://www.aips.me 可与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。
首先设置你的用户名密码：
1 2 | git config --global user.email "你的邮箱" git config --global user.name "你的用户名" |
生成密钥：
1 | ssh-keygen -t rsa -C "你的邮箱" |
输入文件路径：
1 2 3 4 5 6 7 8 9 | 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，最后两步：
- 用文本编辑器打开ssh.pub文件，拷贝其中的内容，将其添加到Add SSH Key
- 将id_rsa和id_rsa.pub拷贝至你Git安装目录下的.ssh目录，如H:\PortableGit-1.8.4\.ssh
可以验证一下：
1 | ssh -T git@github.com |
若有问题，请重新设置。常见错误请参考：
GitHub Help &http://www.aips.me8211; Generating SSH Keys
GitHub Help &http://www.aips.me8211; Error Permission denied (publickey)
安装
Node和Git都安装好后，可执行如下命令安装hexo：
1 | npm install -g hexo |
初始化
然后，执行init命令初始化hexo到你指定的目录：
1 | hexo init |
也可以cd到目标目录，执行hexo init。
好啦，至此，全部安装工作已经完成！
生成静态页面
cd 到你的init目录，执行如下命令，生成静态页面至hexo\public\目录。
1 | hexo generate |
【注】命令必须在init目录下执行，否则不成功，但是也不报错。
当你修改文章Tag或内容，不能正确重新生成内容，可以删除hexo\db.json后重试，还不行就到public目录删除对应的文件，重新生成。
本地启动
执行如下命令，启动本地服务，进行文章预览调试。
1 | hexo server |
浏览器输入 http://localhost:4000 就可以看到效果。
请使用高级浏览器，否则可能…你懂的！
写文章
执行new命令，生成指定名称的文章至hexo\source\_posts\postName.md。
1 | hexo new [layout] "postName" http://www.aips.me新建文章 |
其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md
1 2 3 4 | title: {{ title }} date: {{ date }} tags: --- |
我想添加categories，以免每次手工输入，只需要修改这个文件添加一行，如下：
1 2 3 4 5 | title: {{ title }} date: {{ date }} categories: tags: --- |
postName是md文件的名字，同时也出现在你文章的URL中，postName如果包含空格，必须用&http://www.aips.me8221;将其包围，postName可以为中文。
【注】所有文件：后面都必须有个空格，不然会报错。
看一下刚才生成的文件hexo\source\_posts\postName.md，内容如下：
1 2 3 4 5 6 | title: postName http://www.aips.me文章页面上的显示名称，可以任意修改，不会出现在URL中 date: 2014-05-16 15:30:16 http://www.aips.me文章生成时间，一般不改，当然也可以任意修改 categories: http://www.aips.me文章分类目录，可以为空，注意:后面有个空格 tags: http://www.aips.me文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格 --- 这里开始使用markdown格式输入你的正文。 |
接下来，你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法，可以参考《Markdown 语法说明》
fancybox
可能有人对这个 Reading 页面中图片的 fancybox 效果感兴趣，这个是怎么做的呢。
很简单，只需要在你的文章*.md文件的头上添加photos项即可，然后一行行添加你要展示的照片：
1 2 3 4 5 6 7 | layout: photo title: 我的阅历 date: 2085-01-16 07:33:44 tags: &http://www.aips.me91;hexo&http://www.aips.me93; photos: - http://aipsme.qiniudn.com/2013/11/27/reading/photos-0.jpg - http://aipsme.qiniudn.com/2013/11/27/reading/photos-1.jpg |
【注】经过测试，文件头上的layout: photo可以省略。
不想每次都手动添加怎么办？同样的，打开您的hexo\scaffolds\photo.md
1 2 3 4 5 6 7 | layout: &http://www.aips.me123; &http://www.aips.me123; layout &http://www.aips.me125; &http://www.aips.me125; title: &http://www.aips.me123; &http://www.aips.me123; title &http://www.aips.me125; &http://www.aips.me125; date: &http://www.aips.me123; &http://www.aips.me123; date &http://www.aips.me125; &http://www.aips.me125; tags: photos: - --- |
然后每次可以执行带layout的new命令生成照片文章：
1 | hexo new photo "photoPostName" http://www.aips.me新建照片文章 |
description
markdown文件头中也可以添加description，以覆盖全局配置文件中的description内容，请参考下文_config.yml的介绍。
1 2 3 4 5 6 | title: hexo你的博客 date: 2013-11-22 17:11:54 categories: default tags: &http://www.aips.me91;hexo&http://www.aips.me93; description: 你对本页的描述 --- |
hexo默认会处理全部markdown和html文件，如果不想让hexo处理你的文件，可以在文件头中加入layout: false。
文章摘要
在需要显示摘要的地方添加如下代码即可：
1 2 | 以上是摘要 <!--more-->以下是余下全文 |
more以上内容即是文章摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。
【注】hexo中所有文件的编码格式均是UTF-8。
主题安装
萝卜白菜各有所爱，玩博客换主题是必不可少的，hexo的主题列表 Hexo Themes。
我比较喜欢 pacman，modernist、ishgo，raytaylorism。Pacman最为优秀，简洁大方小清新，同时移动版本支持的也很好，但作者并没有把很多参数分离出来给出可配置项，我最终选择了modernist。
安装主题的方法就是一句git命令：
1 | git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist |
目录是否是modernist无所谓，只要与_config.yml文件一致即可。
安装完成后，打开hexo\_config.yml，修改主题为modernist
1 | theme: modernist |
打开hexo\themes\modernist目录，编辑主题配置文件_config.yml：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | menu: http://www.aips.me配置页头显示哪些菜单 http://www.aips.me Home: / Archives: /archives Reading: /reading About: /about http://www.aips.me Guestbook: /about excerpt_link: Read More http://www.aips.me摘要链接文字 archive_yearly: false http://www.aips.me按年存档 widgets: http://www.aips.me配置页脚显示哪些小挂件 - category http://www.aips.me - tag - tagcloud - recent_posts http://www.aips.me - blogroll blogrolls: http://www.aips.me友情链接 - bruce sha - bruce sha's javaeye: http://buru.iteye.com - bruce sha - bruce sha's baidu space: http://hi.baidu.com/iburu fancybox: true http://www.aips.me是否开启fancybox效果 duoshuo_shortname: buru http://www.aips.me多说账号 google_analytics: rss: |
更新主题
1 2 | cd themes/modernist git pull |
评论框
静态博客要使用第三方评论系统，hexo默认集成的是Disqus，因为你懂的，所以国内的话还是建议用多说。
直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说，做一下基本设置。如果使用modernist主题，在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可。你也可以在多说后台自定义一下多说评论框的格式，比如评论框的位置，对于css设置，可以参考这里，我是在 HeroicYang 的基础上修改的。
如果你是有的其他第三方评论系统，将通用代码粘贴到 hexo\themes\modernist\layout\_partial\comment.ejs 里面，如下：
1 2 3 4 | <% if &http://www.aips.me40;config.disqus_shortname && page.comments&http://www.aips.me41;&http://www.aips.me123; %> <section id="comment">http://www.aips.me你的通用代码 <% &http://www.aips.me125; %> |
自定义页面
执行new page命令
1 | 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文件，里面写上域名即可。
命令
常用命令：
1 2 3 4 5 | hexo new "postName" http://www.aips.me新建文章 hexo new page "pageName" http://www.aips.me新建页面 hexo generate http://www.aips.me生成静态页面至public目录 hexo server http://www.aips.me开启预览访问端口（默认端口4000，'ctrl + c'关闭server） hexo deploy http://www.aips.me将.deploy目录部署到GitHub |
常用复合命令：
1 2 | hexo deploy -g hexo server -g |
简写：
1 2 3 4 | hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy |
至此，基本操作介绍完毕，如果你对Hexo这种博客方式有兴趣，可以移步到我的代码博客查看相关的教程：
http://www.aips.me/code/category/hexo
