Hexo从0到1

对程序员而言，最好的简历就是个人博客和GitHub.

一、瞧瞧兵器

博客框架：Hexo 3，这是一款能快速、简洁且高效的博客框架，支持Markdown编辑，自动渲染出漂亮的静态页面。
前端主题：Next，效果参考:http://zanelove.github.io
域名购买：类似万网的平台都可以，你可以选购自己名字的域名，一年几十元左右，两杯咖啡的钱。
SSL：CloudFlare

二、抄起家伙

GitHub Pages

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

需要拥有一个GitHub账号
进入GitHub Pages，按照上面所说的步骤一步一步做，完成后就能在浏览器上打开像http://zanelove.github.io的网站了。

注意：(第二步Git命令需做修改)

命令修改前：

命令修改后：

$ git clone git@github.com:username/username.github.io.git

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

安装Hexo博客框架

经过上面步骤，我们已经拥有了一个初步域名：http://username.github.io 和一个免费网络空间了，下面我们需要把空白的博客丰富起来。放心，不需要你手写一大堆html、css文件，也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架，它会帮我们搭建。

安装Hexo

1.1 前提：

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

Node.js
Git

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

$ npm install -g hexo-cli

1.2 注意：

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

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

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

GitHub管理

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

$ git clone git@github.com:username/username.github.io.git

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

初始化Hexo

在目录下执行以下指令(在该目录内点击鼠标右键，选择Git bash)，Hexo 将会自动在目标文件夹建立网站所需要的所有文件。

$ hexo init

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

$ hexo init

接下来，就是安装依赖包：

$ npm install

最后，本地查看：现在我们已经搭建起本地的hexo博客了，执行以下命令(在您创建的目录下)，然后到浏览器输入localhost:4000看看。

$ hexo generate

$ hexo server

熟悉Hexo

新建完成后，指定文件夹的目录如下：

_config.yml文件，是整体的配置文件，很多基础配置、插件配置等都需要在里面进行。要注意的是，该文件格式要求极为严格，缺少一个空格都会导致运行错误。小提示：不要用Tab缩进，用两个空格符。
package.json文件，应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds文件夹，模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
source文件夹，资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes文件夹，主题文件夹。Hexo 会根据主题来生成静态页面。
ayout，包括draft(草稿)、page(页面)、post(文章)。这个就是三种文件的基本格式，其中post是你发表的文章，会显示在你的网站里，一篇post会包括title标题、date日期、tags标签等信息；draft是草稿，只有你在本地能看到，必须要publish后才能成为post，draft和post差别是date，因为draft没有发表，所以不需要指定日期。page是一个页面，对应一个新的html页面，比如博客内容展示页是一个页面，留言本也是一个页面。
public文件夹，这个文件夹是最终会发布到网站上的真实内容。怎么理解呢？我们可以把public文件夹当作是真正的被用户看到的，而其他的source、themes等都是为public服务的。Hexo里有一个很重要的指令hexo generate，这个指令就是利用所有代码里的配置信息、source里写的文章、themes里的样式，共同生成最终的静态html文件，存入public文件夹内。在我们执行了发布指令hexo deploy后，就会把public的内容部署到GitHub Pages上。当用户在访问我们的博客时，他们会看到public里生成的html文件。这个概念非常重要，即代码和真实静态页面是独立的。
generate和deploy，generate会把我们的配置、文章和主题结合起来生成一堆酷炫的html静态文件放在public里面。但此时用户还看不到本地public文件里的页面，我们必须用后一个指令deploy才能把静态文件部署到GitHub Pages上。不过，在部署前，需要配置让它自动部署到我们前面创建的Github项目中。
deploy相关配置。为了能够让项目自动把public文件夹的内容部署到GitHub项目中，我们可以按部署文档进行配置，其中选择的branch为master。此后，每次运行deploy后，项目就会自动把public文件夹内容全部覆盖到当前的GitHub项目master分支上。
代码和静态文件分开管理。根据上面知道，每次部署后，public文件内容会覆盖掉项目整个master分支。这样可以实现网站静态文件的版本控制，但是，仔细对比这个master分支，我们会发现里面只剩下静态文件了，我们的代码比如source、themes统统没有了，这就导致无法对代码进行版本管理了。这意味着我换一台电脑，我就再也找不到代码了，只剩下一堆之前编译出来的静态文件。所以，为了对代码也进行版本控制，我们创建一个新的分支：code，然后在这个分支里进行代码控制，master里则保存部署的新的静态文件。大家可以自行比对这两个branch的内容差异。

配置Hexo

详情请参考配置文档

部署Hexo

1.1 编辑_config.yml(在跟目录下)。在部署时，要把下面的username都换成你的账号名。

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

1.2 执行下列指令即可完成部署。

$ hexo generate

$ hexo deploy

注意：有些新用户需要设置 ssh，否则上述命令会失败。ssh 的介绍和设置方法请看官方教程，不用担心，很简单。

记住：每次修改本地文件后，需要hexo generate才能保存，需要hexo deploy才能部署到git上去。每次使用命令时，都要在您创建的目录下。

Okay，我们的博客已经完全搭建起来了，在浏览器访问username.github.io就能看到你的成就了！

配置NexT主题

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

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

下面我还是提几点注意：

第三方评论系统。评论系统很重要，你可以与读者进行更多交流，配置也简单，建议采用DISQUS，更国际化一点的配置见此。另外，前期建议开启不登陆评论，即在Disqus的Comment Rule里允许Guest comment。
创建留言板。熟悉page的创建与使用，参考这里。
给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站，随着以后读者增多，他们可以更好搜索到你的网站，具体方法见此。

专属域名

购买域名

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

域名解析_1

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

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

域名解析_2

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

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

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

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

HTTP -> HTTPS

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

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

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

多说评论

使用多说前需要先在多说创建一个站点。具体步骤如下：

登录后在首页选择 “我要安装”。
创建站点，填写站点相关信息。（注意：多说域名这一栏填写的即是你的duoshuo_shortname）

编辑站点的_config.yml，添加duoshuo_shortname字段，设置如下:（注意：不是主题的_config.yml文件）

duoshuo_shortname: your-duoshuo-shortname

（注意：duoshuo_shortname: 你的多说二级域名要去掉.duoshuo.com 部分，如：duoshuo_shortname: zanelove-comment）

创建站点成功之后，即可获取代码，将代码粘帖到您网页代码与间的任意位置。如果您的网站使用模板，请粘帖到模板代码中。（本人使用的是Next主题，因此本人将代码复制到themes\next\layout_partials\duoshuo-hot-articles.swig文件当中的模板代码中），如：（如果使用下面的代码，只需要替换模板代码即可）

RSS订阅

编辑主题配置文件，将 rss 字段设置为：

rss: false，这将会禁用Feed链接。
rss:，当值为空的时候，默认会使用站点的 Feed 链接。在此之前需要使用 hexo-generator-feed 插件生成 Feed。

依照 hexo-generator-feed 插件的安装说明进行 Feed 生成：

$ npm install hexo-generator-feed –save

当配件配置完毕后，主题将自动显示 Feed 链接；同时在主题配置文件中添加如下内容：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
rss: http://your-feed-url，指定特定的链接地址，适用于已经烧制过 Feed 的情形。

总结一些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，报错如下：