使用GitHub Pages+Jekyll搭建我的博客

GitHub Pages 免費無限容量的站點數據託管工具(國內訪問速度較慢)，內置Jekyll服務，能將特定名稱的代碼倉庫動態編譯爲靜態網頁

Jekyll 基於Ruby的靜態網頁生成系統，採用模板將Markdown(或Textile)文件轉換爲統一的網頁

統計 統計工具主要是爲了方便查看站點的訪問狀況，目前支持百度統計和Google Analytics(可同時使用)

評論 評論工具能夠爲靜態頁面增長評論和分享功能，目前支持國內的多說和國外的Disqus

本文將重點介紹標註 　　　 的必選項目，未標註的可選項目請按照給定地址自行註冊便可

創建GitHub Pages站點

1. 在GitHub上創建一個以 .github.io 爲後綴的和你賬號名同樣的代碼倉庫，如個人賬號是:xkloveme，則創建的倉庫名爲:xkloveme.github.io, 同時在底部Add .gitigore選擇Jekyll模板，這樣Jekyll產生的臨時文件，例如_site目錄就不會添加到源代碼管理中，固然你也能夠之後手動配置:

2. 將該代碼倉庫克隆到地:

   $ git clone https://github.com/xkloveme/xkloveme.github.io 

3. 建立一個測試頁面並推送:

   $ cd xkloveme.github.io $ echo "Hello World" > index.html $ git add --all $ git commit -m "Initial commit" $ git push -u origin master 

4. 瀏覽器中輸入xkloveme.github.io，若是一切正常，你應該能看到一個顯示Hello World的頁面.

請將以上的 xkloveme 替換爲你申請的賬號名

安裝配置Jekyll

1. 安裝Jekyll:

   $ gem install jekyll 

2. 建立或使用模板, 建立模板使用 jekyll new name 命令，但建立出來的測試模板極其簡陋，在這裏我主要介紹使用第三方主題，在 這裏 你能夠找到各類主題，固然你也能夠直接使用個人博客模板:點擊下載，下載後解壓到本地代碼倉庫目錄，並運行 bundle install 命令安裝項目依賴包.

3. 運行 jekyll serve 啓動本地測試服務器，Jekyll默認使用4000端口，若是被佔用，可使用 jekyll serve -P $PORT 指定其餘端口，若是本機從沒配置過Jekyll，可能會給出 cannot load such file – bundler 的錯誤，運行 gem install bundler 便可解決，若是仍是出現包缺失的錯誤，能夠從如下兩點排查：

   • Gemfile文件未添加指定包
   • 運行環境衝突，能夠運行 bundle exe jekyll serve 執行，或者運行 sudo bundle clean –force(該命令會對全局環境形成影響，當心使用) 強制清理無關包後從新運行

4. 在瀏覽器中輸入 127.0.0.1:4000 進行本地預覽

Ruby包管理工具介紹

• gem 全局包管理工具，相似於Python的pip, Node.js的npm -g
  • gem install 安裝組件
  • gem install -v 安裝特定版本
  • gem list 列出已經安裝組件
  • gem sources -a 添加源
  • gem sources –remove 刪除源
• bundle 項目包管理工具，能夠理解爲一個獨立的運行環境
  • bundle update 更新項目依賴包
  • bundle install 安裝項目依賴包
  • sudo bundle clean –force 強制刪除不相關的包
  • bundle exe 在指定環境中運行

使用個人博客模板

1. 按照註釋說明修改 _config.yml 配置文件
2. 刪除文章目錄 _post/ 和文章圖片目錄 images/posts/ 下面的全部內容
3. Enjoy!

個人模板在 leopardpan 基礎上進行了修改，主要改進了如下內容:

• 統一風格，給關於，標籤頁面添加了標題欄
• 添加分割改進文章列表的多標籤顯示
• 修正了一些翻譯不全的文字
• 代碼顏色高亮支持，綜合了Pygments monokai方案和Rouge monokai.sublime方案，點此查看
• 底部統計和版權排版對齊
• 更新Jekyll及其依賴包到最新版本
• 修正jekyll-sitemap加載失敗的問題
• 支持GFM形式的Markdown Codeblock解析

若是喜歡請Star!，謝謝!

編寫文章

推薦

1. 國內在線md編輯工具mdeditor一款國內的在線markdown編輯器
2. 國外在線md編輯工具stackedit國外的在線markdown編輯器，功能強大，同步雲盤國內用戶不推薦速度稍慢 文章爲Markdown格式，請使用.md做爲後綴名，有如下兩個文章目錄：

• _posts 文件名格式爲：YEAR-MONTH-DAY-title.md
• _drafts 草稿目錄，文件名格式爲：title.md，即不加日期前綴，若是須要預覽草稿，使用 --drafts 選項運行 jekyll serve 或 jekyll build

* 儘可能避免使用中文文件名, 具體目錄結構請參考: 官方文檔

每篇文章都必須以參數：

---
layout: post title: 使用GitHub+Jekyll搭建我的博客 date: 2016-11-21 11:29:08 +0800 tags: [Jekyll, GitHub, 教程] --- 

做爲頭部信息，layout爲佈局格式；title爲顯示的文章名；date爲顯示的發佈日期；tags爲文章分類標籤

文章正文采用Markdown編寫，若是不熟悉能夠查看: Markdown 快速入門；強烈建議遵循Markdown Lint，規範有一些對書寫文章不友好的地方，我作了調整，如下是個人Visual Studio Code的配置文件:

"markdownlint.config": { "MD002": false, // 禁用文章開頭必須爲H1標題欄 "MD001": false, // 禁用嚴格的標題層級關係(H1->H2->H3...) "MD003": { "style": "setext_with_atx_closed"}, // 容許#和===形式的標題風格混用 "MD009": { "br_spaces": 2 }, // 容許末尾兩個空格爲<BR/>自動換行模式 "MD013": false, // 禁用單行長度限制 "MD014": false, // 禁用sh命令以 $ 做爲開始 "MD038": false, // 禁用代碼不以空格做爲開始或結束 "MD041": false, // 禁用代碼段必須有標題欄 "MD029": { "style": "ordered" } // 有序列表格式爲順序方式 }

Jekyll的Markdown解釋器從3.0開始，默認從 redcarpet+Pygments 換爲 kramdown+Rouge, 如今已知的問題爲：列表下不支持GFM形式的代碼塊(神奇的是Github下的README.md文件支持)，折中的辦法是使用區塊引用(Blockquote)，在其下再使用代碼塊(個人博客模板已針對這種狀況在呈現上作了優化)