嘗試自己寫(xiě) Blog 的人，一般會(huì)經(jīng)歷三個(gè)階段。

第一階段，剛接觸 Blog，覺(jué)得很新鮮，試著選擇一個(gè)免費(fèi)空間來(lái)寫(xiě)。

第二階段，發(fā)現(xiàn)免費(fèi)空間限制太多，就自己購(gòu)買(mǎi)域名和空間，搭建獨(dú)立博客。

第三階段，覺(jué)得獨(dú)立博客的管理太麻煩，最好在保留控制權(quán)的前提下，讓別人來(lái)管，自己只負(fù)責(zé)寫(xiě)文章。

大多數(shù)人，都停留在第一和第二階段，因?yàn)榈谌A段不太容易到達(dá)：你很難找到俯首聽(tīng)命、愿意為你管理服務(wù)器的人。

前兩天在站長(zhǎng)之家里面看到一個(gè)文章，講的是如何在 github 上搭建 Blog，現(xiàn)在分享給大家。比較詳細(xì)的介紹了 github 的 Pages 功能，以及 Jekyll 軟件的基本用法。

?
從大概 2012 年開(kāi)始，一些程序員開(kāi)始在 Github 網(wǎng)站上搭建 blog，既擁有絕對(duì)管理權(quán)，又享受 github 帶來(lái)的便利：不管何時(shí)何地，只要向主機(jī)提交 commit，就能發(fā)布新文章，還是免費(fèi)的！github 提供無(wú)限流量，世界各地都有理想的訪(fǎng)問(wèn)速度。

一、Github Pages 是什么？

如果你對(duì)編程有所了解，就一定聽(tīng)說(shuō)過(guò) github,它號(hào)稱(chēng)程序員的 Facebook，有著極高的人氣，許多重要的項(xiàng)目都托管在上面。

簡(jiǎn)單說(shuō)，它是一個(gè)具有版本管理功能的代碼倉(cāng)庫(kù)，每個(gè)項(xiàng)目都有一個(gè)主頁(yè)，列出項(xiàng)目的源文件。?

但是對(duì)于一個(gè)新手來(lái)說(shuō)，看到一大堆源碼，只會(huì)讓人頭暈?zāi)X漲，不知何處入手。他希望看到的是，一個(gè)簡(jiǎn)明易懂的網(wǎng)頁(yè)，說(shuō)明每一步應(yīng)該怎么做。因此，github 就設(shè)計(jì)了 Pages 功能，允許用戶(hù)自定義項(xiàng)目首頁(yè)，用來(lái)替代默認(rèn)的源碼列表。所以，github Pages 可以被認(rèn)為是用戶(hù)編寫(xiě)的、托管在 github 上的靜態(tài)網(wǎng)頁(yè)。

?
github 提供模板，允許站內(nèi)生成網(wǎng)頁(yè)，但也允許用戶(hù)自己編寫(xiě)網(wǎng)頁(yè)，然后上傳。有意思的是，這種上傳并不是單純的上傳，而是會(huì)經(jīng)過(guò)Jekyll程序的再處理。

二、Jekyll是什么？

Jekyll（發(fā)音/'d?i?k ?l/，"杰克爾"）是一個(gè)靜態(tài)站點(diǎn)生成器，它會(huì)根據(jù)網(wǎng)頁(yè)源碼生成靜態(tài)文件。它提供了模板、變量、插件等功能，所以實(shí)際上可以用來(lái)編寫(xiě)整個(gè)網(wǎng)站。?

整個(gè)思路到這里就很明顯了。你先在本地編寫(xiě)符合 Jekyll 規(guī)范的網(wǎng)站源碼，然后上傳到 github，由 github 生成并托管整個(gè)網(wǎng)站。

這種做法的好處是：

• 免費(fèi)，無(wú)限流量。
• 享受 git 的版本管理功能，不用擔(dān)心文章遺失。
• 你只要用自己喜歡的編輯器寫(xiě)文章就可以了，其他事情一概不用操心，都由 github 處理。

它的缺點(diǎn)是：

• 有一定技術(shù)門(mén)檻，你必須要懂一點(diǎn) git 和網(wǎng)頁(yè)開(kāi)發(fā)。
• 它生成的是靜態(tài)網(wǎng)頁(yè)，添加動(dòng)態(tài)功能必須使用外部服務(wù)，比如評(píng)論功能就只能用 disqus。
• 它不適合大型網(wǎng)站，因?yàn)闆](méi)有用到數(shù)據(jù)庫(kù)，每運(yùn)行一次都必須遍歷全部的文本文件，網(wǎng)站越大，生成時(shí)間越長(zhǎng)。

但是，綜合來(lái)看，它不失為搭建中小型 Blog 或項(xiàng)目主頁(yè)的最佳選項(xiàng)之一。

三、一個(gè)實(shí)例

下面，我舉一個(gè)實(shí)例，演示如何在 github 上搭建 blog，你可以跟著一步步做,為了便于理解，這個(gè) blog 只有最基本的功能。在搭建之前，你必須已經(jīng)安裝了 git，并且有 github 賬戶(hù)。

第一步，創(chuàng)建項(xiàng)目。

在你的電腦上，建立一個(gè)目錄，作為項(xiàng)目的主目錄。我們假定，它的名稱(chēng)為 jekyll_demo。

?$ mkdir jekyll_demo
對(duì)該目錄進(jìn)行g(shù)it初始化:

?$ cd jekyll_demo ?$ git init
然后，創(chuàng)建一個(gè)沒(méi)有父節(jié)點(diǎn)的分支 gh-pages，因?yàn)?github 規(guī)定，只有該分支中的頁(yè)面，才會(huì)生成網(wǎng)頁(yè)文件。

?$ git checkout --orphan gh-pages
以下所有動(dòng)作，都在該分支下完成。

第二步，創(chuàng)建設(shè)置文件。

在項(xiàng)目根目錄下，建立一個(gè)名為 _config.yml 的文本文件。它是 jekyll 的設(shè)置文件，我們?cè)诶锩嫣钊肴缦聝?nèi)容，其他設(shè)置都可以用默認(rèn)選項(xiàng)，具體解釋參見(jiàn)官方網(wǎng)頁(yè)。

?baseurl: /jekyll_demo
目錄結(jié)構(gòu)變成：

?/jekyll_demo ?|--　_config.yml
第三步，創(chuàng)建模板文件。

在項(xiàng)目根目錄下，創(chuàng)建一個(gè) _layouts 目錄，用于存放模板文件。

?$ mkdir _layouts
進(jìn)入該目錄，創(chuàng)建一個(gè) default.html 文件，作為 Blog 的默認(rèn)模板,并在該文件中填入以下內(nèi)容。

? ? ? ? ?{{ page.title }} ? ? ?{{ content }} ? ?

Jekyll 使用 Liquid 模板語(yǔ)言，{{ page.title }} 表示文章標(biāo)題，{{ content }} 表示文章內(nèi)容，更多模板變量請(qǐng)參考官方文檔。

目錄結(jié)構(gòu)變成：

?/jekyll_demo ?|-- _config.yml ?|-- _layouts ?| |--　default.html
第四步，創(chuàng)建文章。

回到項(xiàng)目根目錄，創(chuàng)建一個(gè)_posts目錄，用于存放blog文章。

? $ mkdir _posts
進(jìn)入該目錄，創(chuàng)建第一篇文章，文章就是普通的文本文件，文件名假定為 2012-08-25-hello-world.html。(注意，文件名必須為"年-月-日-文章標(biāo)題.后綴名"的格式。如果網(wǎng)頁(yè)代碼采用 html 格式，后綴名為 html；如果采用 markdown 格式，后綴名為 md。）

在該文件中，填入

?--- ?layout: default ?title: 你好，世界 ?--- ?{{ page.title }} ?我的第一篇文章 ?{{ page.date | date_to_string }}
每篇文章的頭部，必須有一個(gè) yaml 文件頭，用來(lái)設(shè)置一些元數(shù)據(jù)。它用三根短劃線(xiàn)"---"，標(biāo)記開(kāi)始和結(jié)束，里面每一行設(shè)置一種元數(shù)據(jù)。"layout:default"，表示該文章的模板使用 _layouts 目錄下的 default.html 文件；"title: 你好，世界"，表示該文章的標(biāo)題是"你好，世界"，如果不設(shè)置這個(gè)值，默認(rèn)使用嵌入文件名的標(biāo)題，即 "hello world"。

在yaml文件頭后面，就是文章的正式內(nèi)容，里面可以使用模板變量。{{ page.title }} 就是文件頭中設(shè)置的"你好，世界"，{{ page.date }} 則是嵌入文件名的日期（也可以在文件頭重新定義date變量），"| date_to_string"表示將 page.date 變量轉(zhuǎn)化成人類(lèi)可讀的格式。

目錄結(jié)構(gòu)變成：

?/jekyll_demo ?|--　_config.yml ?|--　_layouts ?|　　　|--　default.html ?|--　_posts ?|　　　|--　2012-08-25-hello-world.html
第五步，創(chuàng)建首頁(yè)

有了文章以后，還需要有一個(gè)首頁(yè)。

回到根目錄，創(chuàng)建一個(gè)index.html文件，填入以下內(nèi)容。

?--- ?layout: default ?title: 我的Blog ?--- ?{{ page.title }} ?最新文章 ? ?{% for post in site.posts %} ?{{ post.date | date_to_string }} {{ post.title }} ?{% endfor %} ?
它的 Yaml 文件頭表示，首頁(yè)使用 default 模板，標(biāo)題為"我的Blog"。然后，首頁(yè)使用了{(lán)% for post in site.posts %}，表示對(duì)所有帖子進(jìn)行一個(gè)遍歷。這里要注意的是，Liquid 模板語(yǔ)言規(guī)定，輸出內(nèi)容使用兩層大括號(hào)，單純的命令使用一層大括號(hào)。至于 {{site.baseurl}} 就是 _config.yml 中設(shè)置的 baseurl 變量。

目錄結(jié)構(gòu)變成：

?/jekyll_demo ?|--　_config.yml ?|--　_layouts ?|　　　|--　default.html ?|--　_posts ?|　　　|--　2012-08-25-hello-world.html ?|--　index.html
第六步，發(fā)布內(nèi)容。

現(xiàn)在，這個(gè)簡(jiǎn)單的 Blog 就可以發(fā)布了。先把所有內(nèi)容加入本地 git 庫(kù)。

?$ git add . ?$ git commit -m "first post"
然后，前往 github 的網(wǎng)站，在網(wǎng)站上創(chuàng)建一個(gè)名為 jekyll_demo 的庫(kù)。接著，再將本地內(nèi)容推送到 github 上你剛創(chuàng)建的庫(kù)。注意，下面命令中的 username，要替換成你的 username。

?$ git remote add origin https://github.com/username/jekyll_demo.git ?$ git push origin gh-pages
上傳成功之后，等 10 分鐘左右，訪(fǎng)問(wèn)?http://username.github.com/jekyll_demo/就可以看到 Blog 已經(jīng)生成了（將 username 換成你的用戶(hù)名）。

首頁(yè)：

文章頁(yè)面：?

第七步，綁定域名。

如果你不想用?http://username.github.com/jekyll_demo/?這個(gè)域名，可以換成自己的域名。

具體方法是在 repo 的根目錄下面，新建一個(gè)名為 CNAME 的文本文件，里面寫(xiě)入你要綁定的域名，比如 example.com 或者 xxx.example.com。

如果綁定的是頂級(jí)域名，則 DNS 要新建一條 A 記錄，指向 204.232.175.78。如果綁定的是二級(jí)域名，則 DNS 要新建一條 CNAME 記錄，指向 username.github.com （請(qǐng)將 username 換成你的用戶(hù)名）。此外，別忘了將 _config.yml 文件中的 baseurl 改成根目錄 "/"。

第八步，部署網(wǎng)站監(jiān)控工具

雖然一個(gè) Blog 可能每天的訪(fǎng)問(wèn)量不是很大，但是維護(hù)者也需要根據(jù)用戶(hù)的訪(fǎng)問(wèn)系統(tǒng)類(lèi)型、設(shè)備類(lèi)型、頁(yè)面訪(fǎng)問(wèn)時(shí)間以及日 pv 等指數(shù)來(lái)進(jìn)一步優(yōu)化自己的 Blog，而且還必須得是基于真實(shí)用戶(hù)的訪(fǎng)問(wèn)才可以的，所以云撥測(cè)這樣的產(chǎn)品就不符合功能需求了。

目前國(guó)內(nèi)外支持滿(mǎn)足這個(gè)需求的工具不太多，New Relic、OneAPM Browser Insight、AppDynamics、Ruxit這幾家都還不錯(cuò)。

我是用的是 OneAPM 的 Browser Insight，部署也很簡(jiǎn)單。

1)進(jìn)入?Browser Insight?頁(yè)面，注冊(cè)一個(gè) OneAPM 的賬號(hào)

2)從 Bi 應(yīng)用列表頁(yè)面點(diǎn)擊“添加”按鈕進(jìn)入手動(dòng)部署界面?

3)輸入想起的應(yīng)用名，點(diǎn)擊“保存”，復(fù)制獲取的 JS 鏈接或者 JS 純文本的腳本?

4)將腳本復(fù)制到 Blog 頁(yè)面的?<head>?標(biāo)簽里面，如果有?<meta>?標(biāo)簽最好直接放在<meta>?標(biāo)簽下面。

5)Blog 的頁(yè)面一般不多，而且基本上都是機(jī)械性的工作，現(xiàn)在已知的頁(yè)面監(jiān)控手動(dòng)部署基本上都采用這樣的方法。

Browser Insight 的好的地方在于，它不但能監(jiān)控 pv 、訪(fǎng)客系統(tǒng)以及版本號(hào)、使用的瀏覽器以及版本號(hào)等，還可以看到資源加載耗時(shí)等，可以非常有針對(duì)性的來(lái)優(yōu)化頁(yè)面?

?

至此，最簡(jiǎn)單的 Blog 就算搭建完成了，希望本文可以對(duì)大家有所幫助。

注：本文轉(zhuǎn)自「教你如何用Jekyll 搭建全靜態(tài)博客」，由?OneAPM?產(chǎn)品運(yùn)營(yíng)改編整理，原文鏈接：http://www.chinaz.com/web/2014/0616/355745.shtml

Browser Insight?是一個(gè)基于真實(shí)用戶(hù)的 Web 前端性能監(jiān)控平臺(tái)，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信網(wǎng)頁(yè)、App 瀏覽、 HTML 和 HTML5 頁(yè)面。想技術(shù)文章，請(qǐng)?jiān)L問(wèn)?OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自?OneAPM 官方博客

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Github、Jekyll 搭建及优化静态博客方法指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。