今天終於把這個部落格建起來了，基本功能算是全。這是個純靜態的blog，託管在github上，生成器是jekyll。 除了這些基本的以外，一些其他功能需要依賴第三方工具。站內搜尋用的google的自定義搜尋工具； 同樣網站分析也是谷歌的analytics工具。評論用的多說。用的某位大大 的模板,還參考了另一位大大模板的一些功能。頭一次弄折騰了兩天，也算弄明白了 些裡面的執行邏輯。接下來我會詳細講解如何搭建一個類似的小站。

各種申請

申請github賬號

sign up for github 就是建立賬號了

申請google賬號

然後利用谷歌賬號開通站長工具, 站內搜尋,分析工具

申請多說賬號

一般來說用新浪微博賬號就行了

利用gitpage搭建靜態網站

先進入你的github主頁，這裡你可以檢視和管理你的所有專案

從上倒下的點紅筆圈中的地方新建一個專案，

設定的時候上面把我的賬戶替換成你的賬戶就可以了，點綠色按鈕提交. 於是你就有了一個自己的站點位置（https://yourgitname.github.io）

然後是下載github的客戶端windows下 mac下（linux用命令列工具就不介紹了，略多不直觀），安 裝好後不同平臺會有不同，但是基本的還是一樣的，

上圖中按鈕是同步用的,會將本地倉庫內容覆蓋github上的主倉庫中， 每次同步必須在summary中填上同步的主題，下面的描述可以不填，再下面的內容是提示你哪些有改變。

你已經建立好了專案，剩下的就是在你的專案網頁點選圈中的按鈕，然後再你的客戶端中將該專案clone下來.

選好你希望該專案本地所在的位置後等待克隆成功吧～～ok！

本地配置jekyll

安裝ruby環境

window 下這裡下載ruby，安裝好後順手把rails一起安了吧～

安裝完成後記得設定環境變數， 具體就是把安裝好的ruby位置放到環境變數裡去。

win+R 調出執行，然後輸入cmd 撥出terminal，敲入gem install rails等待安裝完成吧～～

mac下自帶ruby。。。就是任性！

安裝gitpage相同的jekyll環境

命令列輸入gem install bundler等待安裝完，

命令列輸入gem install jekyll等待安裝完，

接下來下載我的模板到你clone下來 的地址，記得解壓，你該看到大約是這樣

其中資料夾hsz1273327.github.io位置應該是你的專案位置

令行輸入cd XXXXX XXXX是你的專案位置，

命令列輸入bundle install

會自動給你安裝GEMfile中提到的幾個庫

這樣jekyll環境就算搭建好了

執行jekyll

配置_config

根據我的模板主頁的readme文件設定

注意，本地試執行先把 production_url 改為http:\localhost:4000

執行jekyll

命令列依然cd到你的專案目錄，輸入 jekyll build ，執行完了後再輸入 jekyll serve。 tips：沒事terminal不要關。

瀏覽器裡輸入地址http:\localhost:4000你就能看到部落格主頁了 (不過這個時候搜尋功能無法使用)！

實現功能

站內搜尋功能

這個功能用的谷歌的自定義搜尋，需要註冊後才能用。 除了自己的程式碼設定外還要在谷歌自定義搜尋頁面上做些設定 具體如圖

點選後彈出如圖

如果你通過站長工具提交過sitemap了，那這樣就能搜尋了～～

留言評論功能

這個沒啥好說的，註冊設定都弄好了就有了，雖然自己倒騰了好久，結果發現模板自帶這個功能。。。

瀏覽器中撰寫更新部落格功能

這個只是簡單的用超連結實現的，分別連結到git上專案所在頁面的相應功能而已，不過這樣確實方便了不少。 不過方便是有代價的，斷網沒儲存就orz了（已經吃過一次虧）。安全性應該還行，畢竟要修改本來就要用自己的 github賬號才有許可權。

經過上面的其實你的小站已經建成了，你只要將它同步到你的github上，然後等個幾分鐘就能用了～～

接下來的是給希望用自己域名的同學的～～

配置域名

購買域名

避免廣告嫌疑我就不多說了，總之找個買就行

CNAME設定

參考我的CNAME檔案，注意只能放一個域名，如果是作為部落格的話我建議不要用1級域名，略浪費

域名解析

到你買域名的供應商那邊，之後選擇域名解析，選CNAME作為解析方式，然後把自己的原始網址放上去就行了。 這個就不截圖了要不有廣告嫌疑。我的是二級域名，一級域名我沒試過，據說是用A解析。

弄好了記得_config檔案要改下url

撰寫部落格

總結

jekyll邏輯簡述

模板放在 *_includes* 裡 靜態檔案放在 asset 裡

模板內用 {{ }}來傳遞模組或頁面的屬性

用{\% \%} 描述邏輯

每個頁面開頭用--- ---分隔出獨立位置記錄這個頁面的屬性，其中layout: 和 title:是 必須的屬性，id:預設為最終的網址位置去掉域名。

前端模板知識點歸納

html5 的 <from>和 <input>標籤可以用來傳遞引數，用GET方法是將input的內容傳遞到物件頁面的位 置後面作引數

POST方法需要物件頁面用指令碼獲取該值