使用jekyll和github搭建个人博客

起因

最开始我也是尝试用wordpress来做blog，也写过几篇东西，而且花了不少经历来定制样式和插件，
不过后来那个东西实在是不太适合我。

1. 添加新功能非常费劲，因为它的文件非常的分散，而且使用php这种松散的脚本语言，一大堆的php，js，css文件搞的我真是头晕目炫。
2. 各种插件资源文件分散到不同的文件夹里，合并优化根本无从谈起，因为你很难搞清楚它们的依赖。要知道网站的加载速度可比那些乱七八糟的插件功能重要的多！
3. 默认编辑器可用性极差，记得当时在可视化编辑和默认编辑方式下一切换，页面直接就凌乱了，现在也许好些了，不过再怎么比都不可能超过我用自己的vim写markdown的效率。

后来我到点点网上面看了看, 在那个网站创建博客不仅简单、免费，
而且还有很多漂亮模板。
不过等我试着新建了一篇文章便发现这家伙居然用iframe来显示文章来达到漂亮的切换效果，
试问我连文章的url都拿不到，要那炫动画干啥？给我自己看吗？

确定目标

我期待的blog要至少满足以下要求：

• 易用性原则：一方面使用者可以方便的编辑、管理文章，另一方面最大程度的方便用户获取信息
• 简单性原则：不添加过多功能，最大程度保证用户不被无用信息所干扰
• 可用性原则：适应不同设备、浏览器访问，支持无障碍访问，只是关闭javascript访问

解决:github + Jekyll

这是我目前的解决方式，基本上完成了我的目标。使用github一方面能保证你可以保存你blog的所有历史记录，
另一方面它可是完全免费的哦，具体怎么做请参考这篇
搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门。
Jekyll是ruby语言做的一个静态网站生成工具，以下是一篇介绍为何使用Jekyll的文章 Jekyll blogging reference and perfect workflow guide。

另外，使用github的会帮你自动加入一些有用的东西，例如：

• google cdn 上的 jquery
• respond.js：解决响应式样式在ie下的显示问题
• pygments_style.css pygment 代码高亮样式
• google analytics网站分析所需的js代码块

总而言之，使用github加Jekyll搭建一个blog还是非常快速的，不过劣势也很明显，想要更多功能需要自己实现或者去找插件（不像wordpress可以直接在控制台里面安装），也没什么绚丽的模板（github上就几个模板可用）。也正因如此，使用者对框架的可控性被大大的增强，而这正是我需要的。

优化

刚生成的项目加载起来很慢，于是我做了一些简单的优化， 包括

• 去掉没用JS，例如jquery。
• 压缩图片，原来的导航背景图片大小是1.5kb截图转成png大小只有439个字节。
• 合并压缩js，css文件，合并可以减少请求数，压缩可以大大缩短接收所用时间。

我们可以从下面两张图中很明显的看到优化的效果：

页面内容的加载时间从3秒降到了1秒，图片的下载速度也有了很明显提高。

不过还没完，注意到这1秒的加载其实有很大一部分时间是在等待服务器响应，如果我们使用延迟更低的服务器，而不是境外的github，页面的加载效率还会有质的飞跃（300毫秒以内）。另外，github上面托管的页面也无法使用配置.htaccess之类的方式来优化缓存，而默认的缓存过期时间只有10分钟