通過兩天的摸索，終於能整出部落格的大概樣子出來了，總的來說並沒有太過接觸Jekyll框架底層的東西，只是在fork了hux大神的io專案之後做了調整和修改，熟悉了一下子Jekyll生成靜態網頁的原理、liquid模組語言、以及進一步熟悉了git和markdown。

1. 專案來源

2. 參考的博文

3. 本地搭建的最簡單步驟

• 安裝Ruby Installer
• 在cmd中輸入gem install jekyll
• 在cmd中輸入gem install jekyll-paginate
• cd到倉庫中輸入jekyll server
• 瀏覽器中輸入localhost:4000即可本地除錯

4. 記錄值得注意的地方

• _post 資料夾中放用來發表的文章：

  • 檔名格式：yyyy-mm-dd-post-name.md或者yyyy-mm-dd-post-name.markdown
  • 在開始寫具體內容前，必須填寫yaml頭資訊，這樣該檔案才能被Jekyll進行處理。頭資訊必須在檔案的開始部分，並且按照yaml的格式，如本篇文章：

  ---
  layout:     post
  title:      "我的部落格搭建記"
  subtitle:   Hello World, Hello Blog
  date:       2017-01-24
  author:     "Tristan"
  header-img: "img/post-bg-unix-linux.jpg"
  catalog:    true
  tags:
  - 操作流
  - 日誌
  ---
   
  

• 本地訪問部落格

  • 在終端中cd到部落格主目錄，輸入jekyll serve，這樣會在_site中生成一系列的網站的檔案並且啟動服務，這時在瀏覽器中訪問localhost:4000就能本地訪問自己部落格。

5. GitHub Page的規定

儘管GitHub個人網站專案是免費的，但是卻有一些限制。總體來說，完全夠用，甚至太多了。

• 單個倉庫大小不超過1GB，上傳單個檔案大小不能超過100MB，如果通過瀏覽器上傳不能超過25MB
• 個人網站專案也不例外，最大空間1GB
• 個人網站專案每個月訪問請求數不能超過10萬次，總流量不能超過100GB
• 個人網站專案一小時建立數量不能超過10個

6. 後續修改

根據需要我會時不時地對Blog做一些修改，會記錄在下面：

6.1 關於新增歌曲外鏈

找到了一個關於新增歌曲外鏈的好方法，而且應該很難會失效，是利用的QQ郵箱的附件收藏功能，具體的方法看這裡

上面的方法已經失效，騰訊會改變連結地址，只能通過好多歌了：

測試一下，這裡我放了一首羽泉的彩虹，會預先載入，迴圈播放，考慮到移動端的螢幕適配問題，寬度最好設定為300px：

6.2 emoji支援

Jekyll 本身不支援 emoji，不過有個外掛可以使它支援 emoji 表情，那就是 jemoji(jekyll/jemoji)，顯然這是官方提供的外掛。
步驟：

• cmd安裝gem包gem install jemoji
• '_config.yml’檔案中新增

  gems:
      -jemoji
  

• 然後就可以使用:smile:來顯示啦

6.3 引入百度統計

2017/04/10： 引入了百度統計

6.4 程式碼塊顯示優化

2018/01/18： 調整了行間距、語法高亮、滾動條美化等

6.4.1 使用Rouge獲取語法高亮樣式表

之前的語法高亮用了一年，感覺不太好看，然後就尋思著換一下。我使用的程式碼高亮器是Rouge。Rouge是一個純Ruby編寫的程式碼高亮器，可用於60多種語言的高亮，其原始碼託管在GitHub上，我們可以通過它來生成不同的樣式表。

首先安裝Rouge，然後生成對應主題的css檔案

$ gem install rouge
$ rougify style monokai.sublime > assets/css/syntax.css

第二句的具體語法是這樣的：

$ rougify style (theme_name) > (css_file.css)

其中：

• (theme_name) 表示要使用的主題名稱，詳細的主題列表可以通過 rougify help style 獲得
• (css_file.css) 表示要匯出的樣式檔案路徑
  獲得css檔案後，我們可以直接放到html中使用，或者複製貼上到自己配置css的地方，如果需要修改程式碼塊的背景顏色的話，修改syntax.css中的背景配色即可。Sublime的背景色為#272822，Atom的背景色為#282C34。

pre[class='highlight'] {background-color:#272822;}

6.4.2 bug修復記錄

同時發現了一個以前沒有發現的問題，就是在程式碼塊中，我的方法註釋如果是多行的話，在本地jekyll解釋後是沒問題的，但是上傳到github上顯示就會出現不換行的問題，分析網頁的原始檔，發現不知道為什麼包著程式碼塊的div中又多了一層div，所以我只能在css中用選擇器使第二層的div設定了一下white-space: pre，然後就可以換行了。

6.4.3 程式碼塊滾動條優化

原來的滾動條太醜了，簡直不能看，花了點功夫優化了一下，但是隻能在webkit核心的瀏覽器上顯示目前應該，沒有做相容性處理，主要增加了如下的css：

/* 設定垂直滾動條的寬度和水平滾動條的高度 */
.highlight::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

/* 設定滾動條的滑軌 */
.highlight::-webkit-scrollbar-track {
      background-color: #ddd;
}

/* 滑塊 */
.highlight::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

 /* 滑軌兩頭的監聽按鈕 */
.highlight::-webkit-scrollbar-button {
    background-color: #888;
    display: none;
}

/* 橫向滾動條和縱向滾動條相交處尖角 */
.highlight::-webkit-scrollbar-corner {
    /*background-color: black;*/
}

7. 感言

快過年啦，在年前終於把自己的小陣地打造好了，雖然我只是做了一點點的小工作，但還是有收穫的。
祝大家雞年大吉…吧