Hexo从0到1——搭建属于自己的Blog

不想成为CEO的程序员，不是好菜鸟！

一、瞧瞧兵器

• 博客框架：Hexo 3，这是一款能快速、简洁且高效的博客框架，支持Markdown编辑，自动渲染出漂亮的静态页面。

• 前端主题：Next，效果参考http://zanelove.github.io

• 域名购买：类似万网的平台都可以，你可以选购自己名字的域名，一年几十元左右，两杯咖啡的钱。

• SSL：CloudFlare

二、抄起家伙

1、GitHub Pages

在不购买服务器的前提下，我们的网站需要挂在GitHub Pages上！

1. 需要拥有一个GitHub账号

2. 进入GitHub Pages，按照上面所说的步骤一步一步做，完成后就能在浏览器上打开像http://zanelove.github.io了。

   • 注意：

   第二步Git命令需做修改：

   命令修改前：

   命令修改后：

   $ git clone [email protected]:username/username.github.io.git

至此，我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的，就是个性化了。

2、安装Hexo博客框架

经过上面步骤，我们已经拥有了一个初步域名：http://username.github.io 和 一个免费网络空间了，下面我们需要把空白的博客丰富起来。

放心，不需要你手写一大堆html、css文件，也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架，它会帮我们搭建。

1. 安装Hexo

   1.1 前提：

   安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

   • Node.js

   • Git

   如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

   $ npm install -g hexo-cli

   1.2 注意：

   如何使用npm命令，你只需要在任意位置点击鼠标右键，选择Git bash即可！

   如果，你出现了一下的问题：如图

   

   请您放心，这不是问题，这是正常的现象！到此为止，Git、Node.js和Hexo就都安装成功了！

2. GitHub管理

   为了让自己未来的博客和代码处在git管理之下，我们要把刚刚在Github上博客项目拉到本地。首先，在本地创建文件夹，名字任意，此处设为zaneblog，进入该文件夹，把项目代码clone下来。

   $ [email protected]:ZaneLove/zanelove.github.io.git

   好了，此时会自动在zaneblog目录下创建子文件夹zanelove.github.io,那里就是我们博客的代码，以后的操作都在git的管理之下了，此时默认的branch为master。

3. 初始化Hexo

   在目录下（我这是zaneblog/zanelove.github.io目录）执行以下指令(在该目录内点击鼠标右键，选择Git bash)，Hexo 将会自动在目标文件夹建立网站所需要的所有文件。

   $ hexo init

   或者不在该目录下执行，而是任意地方执行该命令，但必须指定目录。

   $ hexo init

3、配置NexT主题

Hexo主题非常多，可以参考丰富多彩的Hexo主题，本文选Next为主题，样式参考我的博客。

进入配置阶段，最好的文档还是NexT主题的官方文档，简单得不能再细致了。

下面我还是提几点注意：

• 第三方评论系统。评论系统很重要，你可以与读者进行更多交流，配置也简单，建议采用DISQUS，更国际化一点，配置见此。另外，前期建议开启不登陆评论，即在Disqus的Comment Rule里允许Guest comment。

• 创建留言板。熟悉page的创建与使用，参考这里。

• 给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站，随着以后读者增多，他们可以更好搜索到你的网站。具体方法见此。

4、专属域名

1. 购买域名

   速速前往万网或相关域名购买网站，按自己名字挑选一个闪闪发光的个人域名吧！

2. 域名解析_1

   以购买的域名wingjay.com为例，我们希望在访问这个域名时能自动进入Github Pages，所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转：wingjay.com -> wingjay.github.io，www.wingjay.com -> wingjay.github.io。添加方法参考这里，添加后可以看到两条记录：

   然后万网会在世界各地的DNS服务器上添加这两条记录，当用户访问wingjay.com时会自动去访问wingjay.github.io。

3. 域名解析_2

   但是，此时并不能成功访问，因为Github Pages是有限制的，它不允许任意域名都跳转过来，而是只限制一个域名，而且这个域名必须声明在CNAME文件中。

   所以，我们需要添加一个CNAME文件到项目的master中才行，参考这里。读者可以参考本人的CNAME文件内容。

   不过，对于Hexo 3，这里有一个坑要注意：大家应该还记得上文说的，master分支里的内容都是自动生成的，而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME，填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶，因为hexo并不会自动生成CNAME文件，所以在部署时被覆盖删除了。

   所以，我们就需要这个CNAME工具hexo-generator-cname，这时会自动在public里生成一个CNAME文件，把你的域名加进去再部署一下吧！

4. HTTP -> HTTPS

   HTTPS是安全版的HTTP协议，它在http协议与TCP之间加入SSL层，采用端口443，不仅会对传输数据加密，还会进行身份验证。当然个人博客并没有强制性要求采用该协议，这也只是本人的好奇而为。

   目前Github Pages已经支持https了，但是不支持自定义证书。不过我们可以利用CloudFlare来实现。具体实现可以参考这里。

   说明：po主网站的https正处在申请中

5、总结一些Bug

• 有童鞋反应右键菜单中没有git bash选项，可以进入开始菜单找到git bash，然后通过cd进入相应目录执行命令。

• 在github部署完成之后，马上访问可能出现404错误，这是正常的，（最多）等待十分钟左右就可以访问了。如果还不行，那很可能是 github 发送给你的验证邮件你没有打开看，据多方反映，验证后就没问题了。

• 如果在hexo d之后出现fatal: ‘username.github.io’ does not appear to be a git repository，一是检查 repo 的名字是否合乎规范、是否含有大写字母、config.yml 中的 deploy 配置是否正确，二是把 git bash 关掉，重新打开再执行命令。

• 有的童鞋可能不是 IT 界的，或者对shell 命令不太了解。在要求输入密码时，你输入之后密码是不显示的，这是为了安全，并非是你没输上。

• 出现乱码的，不要使用 windows 中的「记事本」打开并编辑文件，推荐使用 sublime text，很简单。如果已经在「记事本」中编辑过，需要使用 sublime text 转码为「utf8」。

• 安装 hexo 时卡在那儿不动，很可能是网络不给力，能全局 break wall 就好了。

• 遇到什么其他的问题，不妨删除.deploy 和db.json 再重新生成试一试。

• 执行命令：npm install -g hexo，报错如下：

莫非是因为被墙了？换国内镜像源试试。

$ npm config set registry=”http://registry.cnpmjs.org”

然后再次执行npm install -g hexo，成功！

• 执行命令：hexo d，报错如下：

执行命令：npm install hexo-deployer-git –save，再次执行hexo d，如果再次报错：

估计必须要在GitHub上配置SSH，然后才可以上传文件。

配置SSH：

1、设置Git的user.name和user.email

在第一次使用Git时，你需要告诉你的协同开发者，你是谁以及你的邮箱，在你提交的时候，Git需要这两个信息。具体通过以下命令设置：

$ git config –global user.name “voidking”

$ git config –global user.email “[email protected]”

需要注意的是，这里的name随意，邮箱是你的联系邮箱，与github完全无关。

查看配置命令：

$ git config –list

2、生成SSH密钥

$ ssh-keygen -t rsa -C “[email protected]”，按3个回车，密码为空。

在C:\Users\Administrator.ssh下，得到两个文件id_rsa和id_rsa.pub。需要注意的是，命令中的-C参数，后面跟的内容是注释。也就是说，内容随意，与github完全无关。

3、在GitHub上添加SSH密钥

打开id_rsa.pub，复制全文。https://github.com/settings/ssh ，Add SSH key，粘贴进去。

4、测试

$ ssh [email protected]，提示：

5、再次部署

hexo d，根据提示输入用户名和密码，等待一会儿便成功了！

6、免责声明

• http://www.jianshu.com/p/99665608d295
• http://zipperary.com/2013/05/28/hexo-guide-2/
• http://www.voidking.com/2015/05/30/deve-hexo-build-environment/