我們知道，一個網(wǎng)站要能夠在任何地方都能夠被訪問，那么需要部署到服務器上，但是對于我們來說，構建服務器的花銷是巨大的。幸運的是，github就提供了這樣的功能，只要按照github格式要求，新建一個倉庫，把你的網(wǎng)站代碼上傳到里面，你就有一個自己的免費網(wǎng)站了。

廢話不多說，讓我們利用jekyll和github來構建自己的博客吧?。?/p>

一：軟件下載

jekyll支持mac、linux、windows等，鑒于大部分童鞋使用的是windows系統(tǒng)，那我就用windows構建

1.下載安裝ruby installer

https://rubyinstaller.org/ ，點擊相應的版本進入下載頁面即可下載

ruby installer

2.下載rubygems

https://rubygems.org/pages/download ，可以選擇相應版本下載

rubygems

下載完成后解壓到你想放的位置，比如我放在了“D:/soft/rubygems3-1.4”下,打開cmd用命令執(zhí)行

D:
cd soft/rubygems3-1.4
ruby setup.rb
gem install jekyll

二：網(wǎng)站構建

首先你要到GitHub上注冊一個賬號,例如jungleblack007（用戶名可以在設置里改），創(chuàng)建完成后可以去jekyll主題網(wǎng)站選擇自己喜歡的主題，然后在這個主題基礎上修改到滿足自己需求的博客.

我選擇的是潘柏信的博客主題，因為這個主題有中文說明，而且有個B站up主對該主題進行了詳細的操作，適合我們?nèi)腴T，先讓我們看一下該博客的外貌！

https://leopardpan.cn/

我們找到作者的源代碼塊,點擊右上角的fork可以將它拷到我們自己的github中，順便star一下支持作者。
拷到自己的github后，我們點擊setting，先進行改名，推薦：你的用戶名.github.io

rename

三：運行jekyll生成靜態(tài)網(wǎng)頁

把別人的主題fork以后，我們可以利用atom把主題代碼轉(zhuǎn)到自己的電腦上

打開atom，按ctrl+shift+p，輸入github clone，選擇要克隆的網(wǎng)址和要保存的路徑。點clone即可

clone完成后，就會有如下界面

圖像也可以換，根據(jù)images的文件夾的圖片名稱可以換成你想要的，名字要一致，images/posts主要放置的是筆記中的圖片，可以刪掉，以后寫筆記的時候想插入圖片需要把圖片路徑設置成images/posts/XXXX。贊賞功能的圖片在paying里，需要贊賞就改成自己的二維碼，不需要贊賞就刪掉new-old.html里的所有內(nèi)容

D
cd data/git
bundler install
bundle exec jekyll serve

http://127.0.0.1:4000 這是我們生成的一個靜態(tài)頁面，瀏覽器輸入即可查看

四：寫一篇自己的博客

jekyll比較好的一點是可以識別筆記文件，我們可以把寫好的文件放到_post文件夾下，然后在md文件前面加一串代碼。

寫好后可以再運行bundle exec jekyll serve查看自己寫的博客是否已經(jīng)能在靜態(tài)網(wǎng)頁上查看

五：添加網(wǎng)站統(tǒng)計功能

我們可以給自己的網(wǎng)站添加統(tǒng)計功能，在這個主題中也支持該功能，推薦使用百度統(tǒng)計，首先注冊賬號

添加結束后點擊管理—代碼獲取，會看到一串代碼。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://#/hm.js?60e2d4433f4c77b3ae5db5cac1b62829";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

?后面的60e2d4433f4c77b3ae5db5cac1b62829可以粘貼替換掉_config.yml文件中的百度統(tǒng)計

這樣統(tǒng)計功能就添加上了

六：添加評論功能

評論功能也可以根據(jù)自己的喜好添加，我添加評論功能使用的是來必力

注冊賬號后添加網(wǎng)頁，與百度統(tǒng)計類似，添加結束后點擊管理界面-代碼管理，可以看到一串代碼

<!-- 來必力City版安裝代碼 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC81MDkzOC8yNzQyMA==">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>為正常使用來必力評論功能請激活JavaScript</noscript>
</div>
<!-- City版安裝代碼已完成 -->

將該代碼復制，替換掉_include/comments.html中的全部內(nèi)容即可（這里的bioinformatics-rookie.github.io是我自己的博客，文中出現(xiàn)的jungleblack007.github.io是我用來做試驗的賬號）

七：上傳到github

所有內(nèi)容修改完成后可以將自己的代碼上傳到github，atom也提供此功能。

當你所有的內(nèi)容修改完畢后，atom右側unstaged changes會顯示你修改了什么內(nèi)容,點擊stage all,所有的會移動到下方的staged changes.

在 commit message中隨便寫點東西點擊下方按鈕，在push出會出現(xiàn)一個待上傳的指令

參考鏈接

https://github.com/leopardpan/leopardpan.github.io

http://www.itdecent.cn/p/9f71e260925d

https://www.bilibili.com/video/BV14x411t7ZU?t=537

轉(zhuǎn)載請注明轉(zhuǎn)載請注明：周小釗的博客- 利用github和jekyll構建個人博客