GitHub搭建個人網站，大家在網上一搜能搜到一大把的教程，但是大部分都講的差不多，並不能滿足自己想搭建的網站詳細需求。我之前在搭建本站的時候也是查了較多資料，學習了下jekyll語法，參考了幾個主題模板，才把符合我需求網站搭建出來。那麼今天我將詳細介紹下本站從github程式碼託管，jekyll安裝，jekyll主題選擇，jekyll目錄結構，jekyll基本語法，jekyll主題修改，網站留言，訪問量統計等子功能整入的詳細過程。順便當作自己記錄下吧，防止以後忘記了。
也歡迎大家star本站原始碼改造成屬於你自己喜歡的個人網站。

這裡推薦下Git程式碼管理工具用Desktop，文件編輯工具用

ATOM，atom它是Github的一款檔案編輯器，可關聯git倉庫，可預覽Markdown檔案，可以匯入資料夾結構，很好用，介面看著也舒服

GitHub搭建個人網站可基於jekyll或者hexo或者其它的，我看官方提供的主題jekyll更多，樣式也更好看，而且能直接連結到原始碼主頁，所以我選擇的基於jekyll搭建的，若不明白jekyll是什麼東西，別急，後面會解釋到，下面開始講解本站的搭建過程。

第一步 網站託管

我們知道，一個網站要能夠在任何地方都能夠被訪問，那麼需要部署到伺服器上。其實github就提供了這樣的功能，只要按照github格式要求，新建一個倉庫，把你的網站程式碼上傳到裡面，那麼就可以在任何時候任何地方都能夠訪問了，那麼如何搭建這個程式碼託管倉庫呢？
可參考

官方連結，我這也把步驟寫出來。

1.首先你要到GitHub上註冊一個賬號,例如我註冊的使用者名稱為：leach-chen（使用者名稱可以在設定裡改）

2.點選New repository–>輸入倉庫名稱格式為：使用者名稱.github.io(如：leach-chen.github.io)->點選Create repository

3.瀏覽器裡訪問https://leach-chen.github.io/,可以發現這個url可以被訪問了，你可以把改倉庫拉取到本地，然後在裡面新建一個index.html的檔案,在裡面輸入任意內容，然後再把程式碼推送到git上，然後再訪問改連結，可以發現index.html裡面的內容被訪問到了。

到這裡，一個免費且無限流量的github程式碼託管倉庫就建立完成了。

第二步 Jekyll安裝

首先解釋下什麼是jekyll，jekyll相當於一個編譯工具，安裝好jekyll後，你可以通過jekyll建立一個網站模板，建立好之後，我們就可以通過http://127.0.0.1:4000/訪問剛剛建立的網站了（具體jekyll用法後面再介紹），我們可以實時修改剛剛建立的模板裡面的內容，並可以實時通過本地url預覽改動後的效果。我們把這個部落格推送到上一步建立的程式碼倉庫裡，再通過https://leach-chen.github.io/就可以訪問到部落格裡面的內容了。有了Jekyll，我們不用每次改動一點點就把程式碼推送到倉庫中進行預覽，而是本地就可以預覽。GitHub支援jekyll，hexo等語法解析。

那麼如何安裝jekyll呢？我這邊暫只講解windows下的安裝步驟。

1. 首先點選下載安裝Ruby installer;
2. 點選下載RubyGems,下載完成後解壓至你想放的位置，例如我放到E:\Software\Install\StudySoftware\rubygems-2.7.4。 開啟命令列執行：
   

   cd E:\Software\Install\StudySoftware\rubygems-2.7.4 //進入到解壓包的位置
   E:
   ruby setup.rb

3. 在命令列執行gem install jekyll；
4. 安裝完成，我們可以用jekyll命令建立一個部落格模板,開啟命令列執行：
   

   cd d:
   d:
   jekyll new testblog
   cd testblog
   jekyll server
   在瀏覽器輸入http://127.0.0.1:4000/即可瀏覽剛剛建立的blog

到此jekyll 就安裝完成了。

第三步 Jekyll 主題選擇

1. 上一步我們完成了jekyll的安裝，預設建立的部落格模板一般比較簡單，jekyll官網提供了大量部落格模板，我們可以去挑選一個自己喜歡的部落格模板，然後在這個部落格基礎上修改到滿足自己需求的部落格
2. 點選前往jekyll 主題官網
3. 我選擇的adam-blog這篇主題
   點選Homepage可以連結到該blog Github頁面，點選download可以下載該部落格原始碼，點選demo可以預覽該部落格效果 
4. 我們點選download，將該原始碼下載下來，命令列進入該目錄執行jekyll server，執行成功可以在控制檯看到執行路徑： 若下載的主題jekyll server執行失敗，則用步驟二中建立的testblog目錄下的Gemfile，Gemfile.lock檔案替換下載的主題裡面的該檔案，若還不成功，則根據控制檯提示的錯誤，可以百度到解決方案。 到此，我們已經選定了一個部落格主題模板，接下來我們講解下jekyll主題的目錄結構

第四步 Jekyll 目錄結構

jekyll目錄結構主要包含如下目錄：

_posts 部落格內容
_pages 其他需要生成的網頁，如About頁
_layouts 網頁排版模板
_includes 被模板包含的HTML片段，可在_config.yml中修改位置
assets 輔助資源 css佈局 js指令碼 圖片等
_data 動態資料
_sites 最終生成的靜態網頁
_config.yml 網站的一些配置資訊
index.html 網站的入口

那麼這些目錄是如何運作的呢？

1. 我們開啟根目錄下的index.html可以看到：

   —
   layout: home-page
   —
   html程式碼段

2. 上面的home-page我們到_layouts目錄下可以找到： 
   實際上根目錄下index.html執行後是home-page裡面的程式碼內容，1中html程式碼段會填充的上圖中的content位置
3. 上圖的default佈局也可以再_layouts目錄下找到： 
   實際上根目錄下index.html執行後,home-page.html裡面的程式碼內容會填充到上圖中的content位置
   jekyll是將分散在各個目錄下的html檔案拼接起來執行。
4. 文章連結這裡有篇講的比較好的，跟著該文章裡的操作，能讓你更熟悉

第五步 Jekyll 語法

上一步大概講解了下Jekyll的目錄結構，現在我們講解下部分jekyll的語法，也可去官方網站學習更詳細官方連結

1. {% for post in paginator.posts %} {% endfor %}表示一個for迴圈,百分號之間的語句為要執行的語句，該段程式碼表示分頁輸出文章，分頁數量在_config.yml中配置，注意：分頁只在根目錄下的index.html中有效

2. { site.自定義欄位名稱 } 表示獲取_config.yml裡面的自定義欄位名稱的值

3. {% for post in site.posts limit:2 %} {% endfor %}迴圈輸出 2 篇文章

4. {% for post in site.posts offset:0 limit:2 %}迴圈輸出最新2篇文章

5. {% for tag in post.tags %} {% endfor %}輸出該篇文章裡的tag

6. {% if link.type == site.blog_1 %} {% endfor %}字串比較

7. {% assign count = 0 %}{% assign count = count

   plus: 1 %}定義assign變數加1

8. {{post.content | strip_html | strip_newlines | truncate: 100 }}獲取文章摘要，取前100個字元

9. 2018-02-10-你要新增的描述.markdown，文章命名格式，否則識別不了

10. {{ page.date | date: ‘%Y, %b %d’ }}輸出文章日期

11. {{page.title}}輸出文章標題

12. {% if post.jekyll %} 判斷文章裡的jekyll欄位是否為true

13. {% if paginator.previous_page %}是否有上一頁

14. {% if paginator.next_page %}是否有下一頁

15. {{ paginator.previous_page_path }}上一頁url

16. {{ paginator.next_page_path }}下一頁url

17. {{ post.url

    prepend: site.baseurl }}要訪問的文章的url

第六步 修改部落格模板

第四步中下載的部落格模板發現並不完全符合自己的需求，於是做了如下修改

1. 新增文章分類功能：
a. 在_config.yml中新增如下分類 
b. 在_includes目錄下的header.html裡面新增如下程式碼，該程式碼是迴圈輸出分類及該分類下的文章數量 
c.在根目錄下建立部落格資料夾，在裡面建立對應目錄，目錄名稱和a步驟中的url路徑對應 
d.在每個目錄下建立index.html,並按如下圖方式新增程式碼，這樣就可以按分類輸出文章 
2. 新增文章評論功能：
模板本身有評論功能，但是用的是國外的Disqus，Disqus在國內被遮蔽的。 主流的評論系統有Disqus, Facebook comment, IntenseDebate, Livefyre等。我這裡選擇的是IntenseDebate，其它的訪問速度貌似較慢。
去IntenseDebate註冊賬號，並獲取到key，並定義在_config.yml中，如：
intensedebate_identifier: 1ce8d80a5f6d373a46f4ceaf3dff8859，intensedebate_identifier取你自己想定義的名稱，值為你註冊後獲取到的key 在_includes目錄下建立disqus.html，並新增如下程式碼，這樣文章就有了評論功能。 
3. 新增文章統計功能：
我這裡新增百度統計，新增谷歌統計因為被牆了，會影響文章的訪問速度，新增也需要先去百度統計網站註冊賬戶，申請key，申請到key後類似上一步定義在_config.yml中，同時會得到一段程式碼，把它新增到_includes目錄下的head.html中,這樣統計功能就新增完成

<!--百度統計-->
<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?56385150d223d3a72bebe8a0d4a94e19";
	  var s = document.getElementsByTagName("script")[0];
	  s.parentNode.insertBefore(hm, s);
	})();
</script>

4. 新增文章訪問量功能：
在_includes目錄下的head.html中新增

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在_includes目錄下的footer.html中新增如下程式碼，這樣文章底部有了統計訪問量功能

<span id="busuanzi_container_site_pv">本站總訪問量：<span id="busuanzi_value_site_pv"></span>次</span>

在_layouts目錄下的post.html中新增如下程式碼，這樣每篇文章有了統計訪問量功能

<span id="busuanzi_container_page_pv"> | 訪問量：<span id="busuanzi_value_page_pv"></span> 次</span>

5. 部落格其它樣式修改：
部落格其它樣式修改主要參考以下幾篇部落格：
部落格模板1
部落格模板2
部落格模板3

到此，一個滿足自己需求的個人部落格網站就搭建完成。