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