Hexo:独立博客新玩法

52

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。
首先设置你的用户名密码:
[cce]
git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"
[/cce]

生成密钥:
[cce]ssh-keygen -t rsa -C "你的邮箱"[/cce]
输入文件路径:
[cce]
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
[/cce]

上面有个bug,文件路径中的盘符H必须大写,否则会报错。

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

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

可以验证一下:
[cce]ssh -T git@github.com[/cce]

若有问题,请重新设置。常见错误请参考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)

安装

Node和Git都安装好后,可执行如下命令安装hexo:
[cce]npm install -g hexo[/cce]

初始化

然后,执行init命令初始化hexo到你指定的目录:
[cce]hexo init [/cce]

也可以cd到目标目录,执行hexo init。
好啦,至此,全部安装工作已经完成!

生成静态页面

cd 到你的init目录,执行如下命令,生成静态页面至hexo\public\目录。
[cce]hexo generate[/cce]
【注】命令必须在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
[cce]
title: {{ title }}
date: {{ date }}
tags:
---
[/cce]
我想添加categories,以免每次手工输入,只需要修改这个文件添加一行,如下:

[cce]
title: {{ title }}
date: {{ date }}
categories:
tags:
---
[/cce]
postName是md文件的名字,同时也出现在你文章的URL中,postName如果包含空格,必须用"将其包围,postName可以为中文。

【注】所有文件:后面都必须有个空格,不然会报错。

看一下刚才生成的文件hexo\source\_posts\postName.md,内容如下:
[cce_cs]
title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2014-05-16 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格
---
这里开始使用markdown格式输入你的正文。[/cce_cs]

接下来,你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法,可以参考《Markdown 语法说明

fancybox
可能有人对这个 Reading 页面中图片的 fancybox 效果感兴趣,这个是怎么做的呢。
很简单,只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片:
[cce_cs]
layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://aipsme.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://aipsme.qiniudn.com/2013/11/27/reading/photos-1.jpg
[/cce_cs]

【注】经过测试,文件头上的layout: photo可以省略。

不想每次都手动添加怎么办?同样的,打开您的hexo\scaffolds\photo.md
[cce_cs]
layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
-
---
[/cce_cs]
然后每次可以执行带layout的new命令生成照片文章:

[cce_cs]hexo new photo "photoPostName" #新建照片文章[/cce_cs]

description
markdown文件头中也可以添加description,以覆盖全局配置文件中的description内容,请参考下文_config.yml的介绍。
[cce_cs]
title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你对本页的描述
---
[/cce_cs]
hexo默认会处理全部markdown和html文件,如果不想让hexo处理你的文件,可以在文件头中加入layout: false。

文章摘要
在需要显示摘要的地方添加如下代码即可:
[cce_cs]
以上是摘要
<!--more-->以下是余下全文
[/cce_cs]

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

主题安装

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

安装主题的方法就是一句git命令:
[cce_cs]git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist[/cce_cs]

目录是否是modernist无所谓,只要与_config.yml文件一致即可。

安装完成后,打开hexo\_config.yml,修改主题为modernist
[cce_cs]theme: modernist[/cce_cs]

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

[cce_cs]
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 duapp wordpress: http://ibruce.duapp.com
- bruce sha's javaeye: http://buru.iteye.com
- bruce sha's oschina blog: http://my.oschina.net/buru
- bruce sha's baidu space: http://hi.baidu.com/iburu

fancybox: true #是否开启fancybox效果

duoshuo_shortname: buru #多说账号

google_analytics:
rss:
[/cce_cs]

更新主题
[cce_cs]
cd themes/modernist
git pull
[/cce_cs]

评论框

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

如果你是有的其他第三方评论系统,将通用代码粘贴到 hexo\themes\modernist\layout\_partial\comment.ejs 里面,如下:
[cce_cs]
<% if (config.disqus_shortname && page.comments){ %>

#你的通用代码
<% } %>
[/cce_cs]

自定义页面

执行new page命令
[cce_cs]
hexo new page "about"
[/cce_cs]
在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文件,里面写上域名即可。

命令

常用命令:
[cce_cs]
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
[/cce_cs]

常用复合命令:
[cce_cs]
hexo deploy -g
hexo server -g
[/cce_cs]

简写:
[cce_cs]
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
[/cce_cs]

至此,基本操作介绍完毕,如果你对Hexo这种博客方式有兴趣,可以移步到我的代码博客查看相关的教程:

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

本文经原作者同意后进行转载,原文地址这里

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 52 条评论

  1. APP雄起 回复

    网站不错

    1. 周良 (文章作者) 回复

      谢谢

  2. APP雄起 回复

    网站不错

    1. 周良 (文章作者) 回复

      谢谢

  3. microk 回复

    这个比官方用的那套配置容易多了

    1. 周良 (文章作者) 回复

      是的

  4. microk 回复

    这个比官方用的那套配置容易多了

    1. 周良 (文章作者) 回复

      是的

  5. linmumu 回复

    写得忒详细了。。。

    1. 周良 (文章作者) 回复

      哈哈

  6. linmumu 回复

    写得忒详细了。。。

    1. 周良 (文章作者) 回复

      哈哈

  7. Meiun 回复

    各种折腾...

  8. Meiun 回复

    各种折腾...

  9. 唐哲浩 回复

    可以做教程了。但是国内这货还是怕github大姨妈。

  10. 唐哲浩 回复

    可以做教程了。但是国内这货还是怕github大姨妈。

  11. 手机回收 回复

    学习了

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

返回顶部