使用Hexo和Gitcafe搭建个人博客

　　之前找工作，经常逛IT面试网站，一次循着一篇文章找到了Jark’s Blog，感觉界面很清爽，访问速度很快，就打算自己也开一个这样的博客。

前奏

　　本博客用Hexo+Gitcafe搭建，博客内容需要用Markdown编写。总体来说有点麻烦，但是具有高度的自由度。

　　Hexo的由来参见作业的博文：Hexo 颯爽登場！。其他介绍：从 Octopress 到 Hexo、Hexo 简明入门教程（一）。

　　如果不想从博客园转过来，但是喜欢Hexo风格主题的，也可以参考：将博客园界面打造成Hexo经典主题Light。Hexo还支持导入其他博客的博文：从博客园迁移到Hexo、抛弃Wordpress正式用Hexo-迁徙之路。

购买并设置域名（可选）

　　专属域名首先比较个性，从长远来看，当网站访问量比较大时，还可以拿来谋点财富。之所以先谈域名购买，是因为域名购买后有一个生效时间。如果不打算购买，可以跳过。

购买域名

　　大家都选国外的Godaddy网站（至于原因，自行谷歌去），点此可以找到优惠码或优惠链接，首选com和me域名，年费60元左右，图文购买教程见：2013年10月新版godaddy域名注册图文教程。

更改域名默认的DNS

　　在Godaddy上购买的域名默认使用的是国外的DNS来解析的，我们在国内，为了解析速度，需要找一个国内的DNS，大家都选DNSPod，免费版就够用了，具体步骤见图文教程：2013年10月新版godaddy更改DNS服务器。DNSPod的免费DNS为f1g1ns1.dnspod.net和f1g1ns2.dnspod.net，参见：DNSPod各个套餐的DNS地址。全球DNS服务器同步完成最多需要72个小时。如果运气好，也许不到一天，国内就都可以正常访问了。我的运气比较好，不到一小时就可以用了。

在DNSPod添加域名和记录

　　具体步骤见图文教程：学会使用DNSPod，仅需三步。
　　这里说下“添加记录”，Gitcafe的记录值为：117.79.146.98（参见：如何创建Page和绑定域名），Github的记录值为：192.30.252.153和192.30.252.154（参见：Tips for configuring an A record with your DNS provider），如下图所示：

安装Hexo并初始化博客本地文件夹

安装分三个步骤：

安装 Git

安装 Node.js

安装 Hexo

参见官方教程：点击进入

初始化本地博客文件夹：

1
2
3

$ hexo init < folder >
$ cd < folder >
$ npm install

参见官方教程：点击进入

设置Git以便可以访问Github和Gitcafe

　　Git会根据用户的名字和邮箱来记录提交。YOUR NAME作为名称凭证，一般用真实姓名；YOUR EMAIL ADDRESS需要与登陆Github（Gitcafe）的邮箱名相同。

1 2	$ git config --global user.name "YOUR NAME" $ git config --global user.email "YOUR EMAIL ADDRESS"

参见：Set Up Git

生成SSH公钥

　　生成与计算机对应的SSH公钥，用于将Hexo生成的静态本地博客数据远程上传到Github或Gitcafe上。详见Github教程：Generating SSH keys

　　添加公钥到ssh-agent出错:

1 2	$ ssh-add ~/.ssh/id_rsa.pub Could not open a connection to your authentication agent.

　　解决方法：

1	eval `ssh-agent`;ssh-add ~/.ssh/id_rsa

　　参考：Could not open a connection to your authentication agent

注册Github或Gitcafe、建立pages、绑定域名

　　该类型的博客是借助Github和Gitcafe的pages功能来将Markdown显示为网页的，而pages功能的出发点用于建立托管项目主页。

同时使用GitHub和GitCafe

　　配置使得国外访问Github、国内访问Gitcafe。

　　在DNSPod上的域名解析设置参考：同时使用 GitHub 和 GitCafe 托管 octopress

　　Hexo参数配置参考：官方文档，下面是我的部署配置（_config.yml)：

deploy:
  type: git
  repo:
   github: git@github.com:keke2014/keke2014.github.io.git
   gitcafe: git@gitcafe.com:keke2014/keke2014.git,gitcafe-pages

Github与Gitcafe比较

Github项目多、大牛多，但是国内访问速度稍逊；Gitcafe国内访问速度很快，域名绑定方便。

Github单个项目最大空间限制为1GB、单个文件不得大于100MB，而且好像不支持付费购买，等博客内容累计到大于1GB就不好办了，参考：What is my disk quota?、Plans and pricing；Gitcafe每个账户免费赠送 512 MB 托管空间，在超出免费使用空间后后，超出部分每 512 MB 每天需支付 4 GitCoin，参见：GitCafe 账户权限与收费规则。

附件存储

　　Github和Gitcafe空间有限，较大的附件和图片需要放到其他地方，首选七牛云，对于个人博客免费版足够了，而且身份认证后可以升级为标准版（具有更大的空间、更多的流量）。这是我的邀请链接：https://portal.qiniu.com/signup?code=3llqzksdajln6

Markdown编辑器

在线的

Cmd - 在线 Markdown 编辑阅读器

MaHua 在线 Markdown 编辑器

马克飞象

简书

离线应用程序

　　我选用的是MarkdownPad，MarkdownPad 2 Pro 注册码。初始使用发现代码块显示有问题，设置见：终于搞定了 markdown编辑器的语法高亮

　　参考：Markdown编辑器之比较、实用的 Markdown 编辑器和工具、用 Markdown 写作用什么文本编辑器？

个人的一些配置（写给没搞过前端的人）

安装Jacman主题：

请参考：https://github.com/wuchong/jacman

以下说明基于Jacman主题(详情参考该主题的配置说明：点击)

添加“关于”（用于介绍自己和博客）

1	$ hexo new page "about"

在hexo\source\下会生成about目录，里面有个index.md，直接编辑就可以了。

启用标签和分类

menu 默认没有启用 /tags 和 /categories 页面，如果需要启用请在博客目录下的source文件夹中分别建立tags 和 categories文件夹每个文件夹中分别包含一个index.md文件。内容为：

1 2	layout: tags (或categories) title: tags (或categories)

因为主题中已经内置了这两个页面的模板，所以他们会被正确的解析出来。
在博文布局scaffolds\post.md（hexo new 默认使用该布局）里添加：

1 2	categories: tags:

生成博文之后，就可以在博文里添加分类和标签了：

1 2	categories: 经验教程 tags: [博客搭建, Hexo, Github, Gitcafe]

添加微博挂件

到这里生成微博秀改名，然后替换jacman\layout_widget\weibo.ejs中的相应代码。

博客主页下面的作者图片、介绍、微博、Email

图片直接替换themes\jacman\source\img中的author.jpg。
介绍在主题配置文件themes\jacman_config.yml中修改：

#### Author information
author:
  intro_line1:  "Hello, I'm Juke Zhang."  ## eg: "Hello ,I'm Larry Page in Google."
  intro_line2:  "This is my blog."  ## eg: "This is my blog,believe it or not."
  weibo: keke2014 ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895，注意，只需要填微博名，而不是完整的网址
  ---
  email: zhangjuke@qq.com ## e.g. wuchong1014@gmail.com

主题上面淡蓝色留白高度调节

themes\jacman\source\css_partial\header.styl

1
2
3

header nav
  ---
    margin-top 0.1em

添加多说评论

注册多说，将设置的后台管理网址的用户名添加到主题配置文件themes\jacman_config.yml中:

#### Comment
duoshuo: 
  enable: true  ## duoshuo.com
  short_name: jukezhang   ##e.g. wuchong   for duoshuo short name.

如果想自定义多说评论显示，请参考：为Hexo添加多说评论功能(正文评论和列表评论数)

右侧友情链接

在 themes\jacman\layout_widget\links.ejs 中添加。

添加RSS和Sitemap

Jacman主题已经配置好，只需要安装在hexo的配置文件中加入

1
2
3

plugins:
  - hexo-generator-feed
  - hexo-generator-sitemap

并利用node.js在本地安装这两个插件：

1 2	npm install hexo-generator-feed npm install hexo-generator-sitemap

参考：hexo系列教程：（五）hexo博客的优化技巧续

Markdown图片居中

在图片文本之前添加一行代码：

1 2	<div style="text-align:center" markdown="1"> ![image description](image url)

参考：使用css让markdown生成的网页里图片居中

Markdown在文本之前输入空格（段落缩进）

将输入法切换到全角模式(shift+space)输入即可，或者使用代码：

半方大的空白&ensp;或&#8194;
全方大的空白&emsp;或&#8195;
不断行的空白格&nbsp;或&#160;

参考：在 Markdown 语言中，如何实现段首空格的显示？

hexo使用

初始化新的Hexo项目: hexo init

创建一篇新文章: hexo new article_name

构建静态文件: hexo generate，简写为hexo g

开启本地server进行预览:hexo server，简写为hexo s。执行后可以访问localhost:4000进行效果预览。

部署到远程服务器: hexo depoly，简写为hexo d

也可把 hexo g 和 hexo d 合起来： hexo d -g

Markdown参考

Markdown 语法速查表
 Markdown Basics
Mastering Markdown
Markdown 语法说明 (简体中文版)
流程图
 序列图
 图标

前奏