GitHub搭建個(gè)人網(wǎng)站破衔，大家在網(wǎng)上一搜能搜到一大把的教程，但是大部分都講的差不多钱烟，并不能滿足自己想搭建的網(wǎng)站詳細(xì)需求晰筛。我之前在搭建本站的時(shí)候也是查了較多資料嫡丙，學(xué)習(xí)了下jekyll語(yǔ)法，參考了幾個(gè)主題模板读第，才把符合我需求網(wǎng)站搭建出來(lái)曙博。那么今天我將詳細(xì)介紹下本站從github代碼托管，jekyll安裝怜瞒，jekyll主題選擇父泳，jekyll目錄結(jié)構(gòu)，jekyll基本語(yǔ)法吴汪，jekyll主題修改惠窄，網(wǎng)站留言，訪問(wèn)量統(tǒng)計(jì)等子功能整入的詳細(xì)過(guò)程浇坐。順便當(dāng)作自己記錄下吧睬捶，防止以后忘記了。

也歡迎大家star本站源碼改造成屬于你自己喜歡的個(gè)人網(wǎng)站近刘。

這里推薦下Git代碼管理工具用Desktop擒贸，文檔編輯工具用ATOM，atom它是Github的一款文件編輯器觉渴，可關(guān)聯(lián)git倉(cāng)庫(kù)介劫，可預(yù)覽Markdown文件，可以導(dǎo)入文件夾結(jié)構(gòu)案淋，很好用座韵，界面看著也舒服

GitHub搭建個(gè)人網(wǎng)站可基于jekyll或者h(yuǎn)exo或者其它的，我看官方提供的主題jekyll更多踢京，樣式也更好看誉碴，而且能直接鏈接到源碼主頁(yè)，所以我選擇的基于jekyll搭建的瓣距，若不明白jekyll是什么東西黔帕，別急，后面會(huì)解釋到蹈丸，下面開(kāi)始講解本站的搭建過(guò)程成黄。

更多全棧資源請(qǐng)?jiān)L問(wèn)：https://www.leachchen.com

image

更多資訊請(qǐng)掃碼或者加入微信群：

image

第一步 網(wǎng)站托管

我們知道，一個(gè)網(wǎng)站要能夠在任何地方都能夠被訪問(wèn)逻杖，那么需要部署到服務(wù)器上奋岁。其實(shí)github就提供了這樣的功能，只要按照github格式要求荸百，新建一個(gè)倉(cāng)庫(kù)闻伶，把你的網(wǎng)站代碼上傳到里面，那么就可以在任何時(shí)候任何地方都能夠訪問(wèn)了管搪，那么如何搭建這個(gè)代碼托管倉(cāng)庫(kù)呢虾攻？
可參考官方鏈接铡买，我這也把步驟寫(xiě)出來(lái)。

1.首先你要到GitHub上注冊(cè)一個(gè)賬號(hào),例如我注冊(cè)的用戶名為：leach-chen（用戶名可以在設(shè)置里改）

2.點(diǎn)擊New repository–>輸入倉(cāng)庫(kù)名稱格式為：用戶名.github.io(如：leach-chen.github.io)->點(diǎn)擊Create repository

image

image

3.瀏覽器里訪問(wèn)https://leach-chen.github.io/,可以發(fā)現(xiàn)這個(gè)url可以被訪問(wèn)了霎箍，你可以把改倉(cāng)庫(kù)拉取到本地奇钞，然后在里面新建一個(gè)index.html的文件,在里面輸入任意內(nèi)容，然后再把代碼推送到git上漂坏，然后再訪問(wèn)改鏈接景埃，可以發(fā)現(xiàn)index.html里面的內(nèi)容被訪問(wèn)到了。

到這里顶别，一個(gè)免費(fèi)且無(wú)限流量的github代碼托管倉(cāng)庫(kù)就創(chuàng)建完成了谷徙。

第二步 Jekyll安裝

首先解釋下什么是jekyll，jekyll相當(dāng)于一個(gè)編譯工具驯绎，安裝好jekyll后完慧，你可以通過(guò)jekyll創(chuàng)建一個(gè)網(wǎng)站模板，創(chuàng)建好之后剩失，我們就可以通過(guò)http://127.0.0.1:4000/訪問(wèn)剛剛創(chuàng)建的網(wǎng)站了（具體jekyll用法后面再介紹）屈尼，我們可以實(shí)時(shí)修改剛剛創(chuàng)建的模板里面的內(nèi)容，并可以實(shí)時(shí)通過(guò)本地url預(yù)覽改動(dòng)后的效果拴孤。我們把這個(gè)博客推送到上一步創(chuàng)建的代碼倉(cāng)庫(kù)里脾歧，再通過(guò)https://leach-chen.github.io/就可以訪問(wèn)到博客里面的內(nèi)容了。有了Jekyll演熟，我們不用每次改動(dòng)一點(diǎn)點(diǎn)就把代碼推送到倉(cāng)庫(kù)中進(jìn)行預(yù)覽鞭执，而是本地就可以預(yù)覽。GitHub支持jekyll芒粹，hexo等語(yǔ)法解析兄纺。

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

1. 首先點(diǎn)擊下載安裝Ruby installer;

2. 點(diǎn)擊下載RubyGems,下載完成后解壓至你想放的位置囤热，例如我放到E:\Software\Install\StudySoftware\rubygems-2.7.4。 打開(kāi)命令行執(zhí)行：

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

3. 在命令行執(zhí)行g(shù)em install jekyll获三；

4. 安裝完成，我們可以用jekyll命令創(chuàng)建一個(gè)博客模板,打開(kāi)命令行執(zhí)行：

   cd d:
   d:
   jekyll new testblog
   cd testblog
   jekyll server
   在瀏覽器輸入http://127.0.0.1:4000/即可瀏覽剛剛創(chuàng)建的blog

到此jekyll 就安裝完成了锨苏。

第三步 Jekyll 主題選擇

1. 上一步我們完成了jekyll的安裝疙教，默認(rèn)創(chuàng)建的博客模板一般比較簡(jiǎn)單，jekyll官網(wǎng)提供了大量博客模板伞租，我們可以去挑選一個(gè)自己喜歡的博客模板贞谓，然后在這個(gè)博客基礎(chǔ)上修改到滿足自己需求的博客

2. 點(diǎn)擊前往jekyll 主題官網(wǎng)

3. 我選擇的adam-blog這篇主題
   點(diǎn)擊Homepage可以鏈接到該blog Github頁(yè)面，點(diǎn)擊download可以下載該博客源碼葵诈，點(diǎn)擊demo可以預(yù)覽該博客效果

   image

4. 我們點(diǎn)擊download裸弦，將該源碼下載下來(lái)祟同，命令行進(jìn)入該目錄執(zhí)行jekyll server，執(zhí)行成功可以在控制臺(tái)看到運(yùn)行路徑：
   image

   若下載的主題jekyll server執(zhí)行失敗理疙，則用步驟二中創(chuàng)建的testblog目錄下的Gemfile晕城，Gemfile.lock文件替換下載的主題里面的該文件，若還不成功窖贤，則根據(jù)控制臺(tái)提示的錯(cuò)誤砖顷，可以百度到解決方案。 到此赃梧，我們已經(jīng)選定了一個(gè)博客主題模板滤蝠，接下來(lái)我們講解下jekyll主題的目錄結(jié)構(gòu)

第四步 Jekyll 目錄結(jié)構(gòu)

jekyll目錄結(jié)構(gòu)主要包含如下目錄：

_posts 博客內(nèi)容
_pages 其他需要生成的網(wǎng)頁(yè)，如About頁(yè)
_layouts 網(wǎng)頁(yè)排版模板
_includes 被模板包含的HTML片段授嘀，可在_config.yml中修改位置
assets 輔助資源 css布局 js腳本 圖片等
_data 動(dòng)態(tài)數(shù)據(jù)
_sites 最終生成的靜態(tài)網(wǎng)頁(yè)
_config.yml 網(wǎng)站的一些配置信息
index.html 網(wǎng)站的入口

那么這些目錄是如何運(yùn)作的呢物咳？

1. 我們打開(kāi)根目錄下的index.html可以看到：

   —
   layout: home-page
   —
   html代碼段

2. 上面的home-page我們到_layouts目錄下可以找到：
   image

   實(shí)際上根目錄下index.html運(yùn)行后是home-page里面的代碼內(nèi)容，1中html代碼段會(huì)填充的上圖中的content位置

3. 上圖的default布局也可以再_layouts目錄下找到：
   image

   實(shí)際上根目錄下index.html運(yùn)行后,home-page.html里面的代碼內(nèi)容會(huì)填充到上圖中的content位置
   jekyll是將分散在各個(gè)目錄下的html文件拼接起來(lái)運(yùn)行蹄皱。

4. 文章鏈接這里有篇講的比較好的览闰，跟著該文章里的操作，能讓你更熟悉

第五步 Jekyll 語(yǔ)法

上一步大概講解了下Jekyll的目錄結(jié)構(gòu)夯接，現(xiàn)在我們講解下部分jekyll的語(yǔ)法焕济，也可去官方網(wǎng)站學(xué)習(xí)更詳細(xì)官方鏈接

1. {% for post in paginator.posts %} {% endfor %}表示一個(gè)for循環(huán),百分號(hào)之間的語(yǔ)句為要執(zhí)行的語(yǔ)句，該段代碼表示分頁(yè)輸出文章盔几，分頁(yè)數(shù)量在_config.yml中配置晴弃，注意：分頁(yè)只在根目錄下的index.html中有效

2. { site.自定義字段名稱 } 表示獲取_config.yml里面的自定義字段名稱的值

3. {% for post in site.posts limit:2 %} {% endfor %}循環(huán)輸出 2 篇文章

4. {% for post in site.posts offset:0 limit:2 %}循環(huán)輸出最新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個(gè)字符

9. 2018-02-10-你要添加的描述.markdown逊拍，文章命名格式上鞠，否則識(shí)別不了

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

11. {{page.title}}輸出文章標(biāo)題

12. {% if post.jekyll %} 判斷文章里的jekyll字段是否為true

13. {% if paginator.previous_page %}是否有上一頁(yè)

14. {% if paginator.next_page %}是否有下一頁(yè)

15. {{ paginator.previous_page_path }}上一頁(yè)url

16. {{ paginator.next_page_path }}下一頁(yè)url

17. | {{ post.url | prepend: site.baseurl }}要訪問(wèn)的文章的url |

第六步 修改博客模板

第四步中下載的博客模板發(fā)現(xiàn)并不完全符合自己的需求，于是做了如下修改

1. 添加文章分類功能：
a. 在_config.yml中添加如下分類

image

b. 在_includes目錄下的header.html里面添加如下代碼芯丧，該代碼是循環(huán)輸出分類及該分類下的文章數(shù)量

image

c.在根目錄下創(chuàng)建博客文件夾芍阎，在里面創(chuàng)建對(duì)應(yīng)目錄，目錄名稱和a步驟中的url路徑對(duì)應(yīng)

image

d.在每個(gè)目錄下創(chuàng)建index.html,并按如下圖方式添加代碼缨恒，這樣就可以按分類輸出文章

image

2. 添加文章評(píng)論功能：
模板本身有評(píng)論功能谴咸，但是用的是國(guó)外的Disqus，Disqus在國(guó)內(nèi)被屏蔽的骗露。 主流的評(píng)論系統(tǒng)有Disqus, Facebook comment, IntenseDebate, Livefyre等岭佳。我這里選擇的是IntenseDebate，其它的訪問(wèn)速度貌似較慢萧锉。
去IntenseDebate注冊(cè)賬號(hào)珊随，并獲取到key，并定義在_config.yml中，如：
intensedebate_identifier: 1ce8d80a5f6d373a46f4ceaf3dff8859叶洞，intensedebate_identifier取你自己想定義的名稱鲫凶，值為你注冊(cè)后獲取到的key 在_includes目錄下創(chuàng)建disqus.html，并添加如下代碼衩辟，這樣文章就有了評(píng)論功能螟炫。

image

3. 添加文章統(tǒng)計(jì)功能：
我這里添加百度統(tǒng)計(jì)，添加谷歌統(tǒng)計(jì)因?yàn)楸粔α瞬研觯瑫?huì)影響文章的訪問(wèn)速度不恭，添加也需要先去百度統(tǒng)計(jì)網(wǎng)站注冊(cè)賬戶，申請(qǐng)key财饥，申請(qǐng)到key后類似上一步定義在_config.yml中换吧，同時(shí)會(huì)得到一段代碼，把它添加到_includes目錄下的head.html中,這樣統(tǒng)計(jì)功能就添加完成

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

4. 添加文章訪問(wèn)量功能：
在_includes目錄下的head.html中添加

<script async src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在_includes目錄下的footer.html中添加如下代碼钥星，這樣文章底部有了統(tǒng)計(jì)訪問(wèn)量功能

<span id="busuanzi_container_site_pv">本站總訪問(wèn)量：<span id="busuanzi_value_site_pv"></span>次</span>

在_layouts目錄下的post.html中添加如下代碼沾瓦，這樣每篇文章有了統(tǒng)計(jì)訪問(wèn)量功能

<span id="busuanzi_container_page_pv"> | 訪問(wèn)量：<span id="busuanzi_value_page_pv"></span> 次</span>

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

到此，一個(gè)滿足自己需求的個(gè)人博客網(wǎng)站就搭建完成谦炒。