Hexo折腾记

最近在使用Github Pages + Hexo搭建个人博客，玩了些新东西，也踩了一些坑，特此记录下经历与想法。

为什么使用Github Pages

首先，Github　Pages　是免费的，虽然空间有限，只有1GB，但博客实质上只是一些静态文件(说白了就是Html+Js+Css)，1Gb其实足够写很多篇文章了。而且我觉得Github Pages的域名很Cool，username.Github.io, 这种名字一般都是技术大牛或者知名的开源项目的才会有的域名，现在我也可以拥有，感觉自己吊吊哒😎

Github Pages的创建很简单，直接上Github Pages官网，看着教程操作就好了。我选择的是User Or Organization Site这种类型。

这种类型与Project Pages的一个区别在于: 前者必须通过master分支发布博客内容, 而且后者可以还可以通过gh-pages来发布,点击查看详情

教程后面的Commit/Push的操作其实想说明这个原理:当你创建了属于自己的Github Pages类型的项目后，你在浏览器访问yourname.github.io的时候，Github会搜索项目中的index.Html，它其实就是博客的首页。

为什么使用Hexo

一开始是想用Jekyll的，不仅因为每一篇讲静态网站生成工具的文章，都会提到Jekyll；还因为它是Github官方指定的博客生成工具。不过后来同事推荐使用Hexo,他说Jekyll是三年前的产品了，有点落后了。对于这点，我现在是不赞同的。因为Jekyll在Github上的星星数量远远超过Hexo,贡献者众多，而且代码也在持续更新中。

不过，我还是选择了Hexo。有两个原因吧：

  1. 我感觉Jekyll有点复杂，第一次写博客，其实我只想简单点。
  2. Jekyll是基于Ruby的，而Hexo是基于Node的。环境搭建都不是问题，但对于Ruby我一窍不通；而我本身做前端开发，对Node会更有亲近感，而且考虑以后要去看代码/改的代码，也方便一点。

Markdown工具的选择

有了Hexo,写博客其实就是写Markdown文档了。

之前我是用Cmd　Markdown的，因为支持离线存储、云同步，也可以免费一键发布到网络上，更关键的是支持Vim模式，我一用就喜欢上了它。

但Cmd　Markdown局限在于，它有自己的生态圈，它想我们把文档都发布到它的服务器上，如果要放在别的地方，需要手动导出md文件；如果文档要添加图片，还要成为会员(一年交99元人民币)才有权限；而且，如果它打开本地md文件(不是通过它新建的)，它导入后，也要做云同步，这是没必要的，我认为这是在浪费计算资源，不喜欢这一点。

我最初的两篇文章是由Cmd　Markdown写成的，要把它发布到GitHub Pages上，我需要先导出md文件，再对一些文件做一些改动，因为Hexo解析md文件的规则跟Cmd　Markdown不一样。写好的文档还要重新编辑一下，这点我不能忍了，于是我寻找新的工具。

Mac上流行的有两个Mou和MacDown。前者我几个月前就有下载过，但网络非常不给力，翻墙了还是经常下载到一半就失败了，于是这次我就选择了MacDown，感觉还行(本文就是用MacDown写的)，常用的快捷键都有，遗憾的是我没找到Vim插件，不知道是没有这个插件还是我搜索姿势不对，这个后面再研究；另外的它不足是没有目录视图，打开一个文件要重新去本地磁盘找，可能这个也是需要安装插件的吧。

也有人推荐Atom，它有目录视图，甚至还有Vim插件(很早以前我想尝试用它来进行前端开发时，安装过几次Vim插件，但都失败了，就没放在心上了，因为我已经有WebStorm了)。不过，考虑到它是基于Node而不是Objective-C开发的，性能上消耗的比较厉害，就暂时不考虑，后面再尝试，反正我现在有MacDown，就先用着吧。

博客书写流程

考虑到生成的静态页面是通过git推送在Github上的，是有版本控制了的；但是本地的source code却没有版本控制，如果以后换电脑或发生意外，数据丢失了，那就糟糕了。于是我把博客的源码放到码云托管。

所以我的书写流程是这样的：

  1. 命令行新建md文件： hexo new xxx
  2. 选择一个书写Markdown的工具打开新建的文件
  3. 本地起个服务器，预览效果： hexo s
  4. 发布到Github Pages: hexo d -g
  5. 把源码提交到码云

需要注意的是：第4步是由Hexo的git插件，应该使用的命令是git push origin master -f, 因为在发布后，原来Github上的README.md文件不见了，说明是本地仓库的代码覆盖掉了远程仓库的代码。

自定义配置

首先要明白，博客根目录有一个站点配置文件_config.yml,而themes目录下的每一个主题目录下也会有相应的主题配置文件_config.yml，因此自定义的配置是针对两个配置文件的，一开始我不知道这点，只修改博客根目录下的站点配置，结果发现有些设置怎么也不生效😂

以Hexo默认的主题landscape为例，我先做了以下小改动:

1. 修改基本信息

编辑站点配置文件，修改titile、description、author

2. 语言汉化

这个涉及到两个文件。站点配置文件需要修改language字段，而该字段的值得去查看主题目录下的languages目录，看看对应的中文配置应该叫什么。landscape里有两个与汉化有关的文件：zh-CN.yml与zh-TW.yml，我当然选择了前者,则站点配置文件里language的值为zh-CN. 另一方面，还需要把博客首页的菜单给汉化，这个需要找到主题配置文件，修改menu配置的值

3. 首页只显示文章部分内容

这个只需要在md文件里插入<!--More-->即可，此时首页只该语句上面的内容，后面的部分要文档详情才会显示出来。我审查过元素，发现<!--More-->后面的内容的确不在DOM里面，也即首页的文档长度得到了缩减，这就达到了加快首页渲染的速度。

4. favicon的制作及使用

favicon的制作首先要有图片，这里我推荐两个APP:脸萌及MomentCam

前者制作的是卡通头像，可以直接拿来生成favicon，缺点是头像需要自己一点一点地拼凑，比较耗时;后者的优点在于可以直接选择手机里已有的照片，快速生成带服饰及场景的图片，缺点是几乎都是全身或半身照，生成的图片还需要再裁剪一下，否则生成的favicon根本看不出是什么鬼(毕竟favicon在浏览器上很小嘛，还是不要包含太多的内容)

制作favicon的网站可以选择这个。尺寸我推荐至少64大小的，不然非常不清晰，至少在Chrome for Mac上是这样。而且就算是这么大了，放到收藏栏的时候，还是会模糊。因此我自己把尺寸搞成了128大小，这个主要是根据实践来调整吧，一开始我是看网上的文章说什么“一般做成16的就好了”。真做成这么小，结果图标简直就成了马赛克，完全不能看。对于favicon的更高级的设置，可以参考Github的网页源码,以及bing的网页源码(使用的是svg)

至于生成的favicon放在何处，这个需要看使用的主题里的模板是怎么写的。我先找到layout/_partial/head.ejs文件，找到favicon相关的代码

1
2
3
<% if (theme.favicon){ %>
    <link rel="icon" href="<%- theme.favicon %>">
<% } %>

上面的代码说明页面读取的是主题目录下的favicon，我把它修改成读取项目根目录下的favicon，并参考了微信网页版的html代码，做了些小改动

1
2
3
<% if (theme.favicon){ %>
    <link rel="shortcut icon" href="<%- config.root %>favicon.ico" type="image/x-icon">
<% } %>

(ps:从上面的代码可以看出，landscape使用的是ejs模板，代码难看得要死，给我一种在jsp里写java代码的感觉，非常恶心，这多给了我一个换主题的理由)

但事情并没有就这样结束。在此期间，我用过不止一个favicon,于是我很快就遇到了favicon缓存失效的问题。过程是，我先使用一个别的网站的ico文件，之后再使用自己制作的ico文件，但浏览器(Chrome for Mac)显示的是上一个ico

网上的解决方案打开favicon的地址，刷新后再打开网页即可，但我试了，根本无效；也有说强制刷新，我试下了cmd + shift + R，完全无用(我怀疑Mac下这个组合键根本不能与Windows的Ctrl+F5相比)；我再尝试清除浏览数据，也没有用(但这招在Chrome里对处理DNS缓存是有效的，无论是CNAME还是A，都可有效清空缓存，相关DNS信息可在地址栏里输入about:dns查看，这是一位运维大神告诉我的😁)

这里最让我百思不得其解的是，上一个ico我使用的是别的网站的icon，而第二个是我自己制作的，放到Github　Pages上，所以说两个ico的路径根本不一样，这样Chrome也会缓存，难道它根本就没有去根据html里的内容去读取icon?

好吧，缓存失效果然是计算机的两大难题之一，搞不懂Chrome对于icon的缓存方法，我只好拿出最后的武器，换一个浏览器打开，反正我Safari、Firefox、甚至IE都有。最后，我终于如愿以偿，看到了自己制作的favicon

主题更换

有了上面的自定义配置，博客已可以满足我的基本的需求。但可以优化的地方还有很多，其中最致命的一点就是，landscape主题默认从google的CDN里加载js/css文件，身为“墙内人士”，我的控制台一直出现Uncaught ReferenceError: jQuery is not defined，我想让页面取消这个报错，而又不想对ejs模板作大修改，便决定换一个更给力的主题，也方便以后安装插件。

Hexo官网上Themes页面有许多开源的主题，我一个个地找，推荐两个:NexT，landscape-plus.我主要是看以下几点：

  1. 首先当然是看主题的布局、校色搭配等视觉效果是否令人满意啦
  2. 官方文档是否完善，这点非常重要，如果没有文档，一般我都不会考虑。
  3. GitHub上星星数量，以及contributor数量，如果数量太少，很可能代码就不更新了

就我个人而言，首页的布局我更喜欢landscape；归档页面我更喜欢NexT.我最终选择的是landscape-plus主题。

但是后来我发现landscape-plus项目有一年没更新代码了，我只好自己fork了一个，结果我还是要面对ejs代码😂

注意：
更换主题后，最好先hexo clean再重启server，不然很可能遇到Hexo的缓存，看到的是上一个主题；修改主题的模板、样式或js源码后，最好也hexo clean后再发布，否则很可能遇到这种情况：本地修改样式成功了，发布到Github，上面的样式还是未修前的。

添加图片

要给博客添加图片,需要有服务器存储图片,这种服务器也即所谓的”图床”. 我使用的是七牛云,因为注册就可以免费使用,相关教程

Fork me on GitHub