使用jekyll和github搭建个人博客

624 查看

起因

最开始我也是尝试用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分钟