使用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分钟