本文將介紹在Windows平臺(tái)上搭建基于github pages 的個(gè)人博客網(wǎng)站的過(guò)程备绽，以及利用Jekyll進(jìn)行本地博客調(diào)試的過(guò)程，對(duì)于不懂前端的人來(lái)說(shuō)是一個(gè)比較基礎(chǔ)的入門教程占贫。另外桃熄，本文也同步發(fā)布在我的個(gè)人博客上面，歡迎訪問(wèn)我的博客：https://chauby.github.io型奥。本文所采用的模板最后呈現(xiàn)效果如下圖所示：
簡(jiǎn)介
作為一個(gè)非前端和網(wǎng)站的開發(fā)人員瞳收，想要自己搭建個(gè)人博客來(lái)分享日常的學(xué)習(xí)和生活，一直找了好久的平臺(tái)厢汹。之前在CSDN上寫過(guò)一些博客螟深，但是許久不更新就懶得再管了。最近因?yàn)檠芯啃枰淘幔l(fā)現(xiàn)有太多的東西需要記錄界弧，同時(shí)凡蜻，Markdown也越用越順手，就想著能夠建立自己的博客平臺(tái)來(lái)分享自己平時(shí)研究和學(xué)習(xí)過(guò)程中的一些技術(shù)問(wèn)題和自己對(duì)于研究的一些思考夹纫。后來(lái)發(fā)現(xiàn)Github提供了這樣的平臺(tái)（原諒我的后知后覺(jué)）咽瓷，就想著能夠自己搭建一個(gè)博客平臺(tái)。
本人要求不高舰讹，主題簡(jiǎn)潔大方茅姜，發(fā)布方便，能夠分享自己的博文就可以月匣。而github提供的github pages基本上能滿足我的需求了钻洒，使用也方便，搭建好環(huán)境以后锄开，可以使用Markdown來(lái)編寫博客素标，并且上傳到github上托管，非常方便萍悴。
一. Markdown 簡(jiǎn)介
1. 語(yǔ)法簡(jiǎn)介
可參考我的另一篇文章Markdown的基本語(yǔ)法
2. Markdown編輯器typora
為了方便寫Markdown头遭，我們需要一個(gè)Markdown的解釋器來(lái)實(shí)時(shí)預(yù)覽寫出來(lái)的效果。市面上有很多支持Markdown語(yǔ)法的代碼編輯器可選癣诱，例如vscode计维，sublime text，atom等等撕予。我選擇的是一款目前還處于beta階段的Markdown編輯器typora鲫惶，與傳統(tǒng)的分兩欄寫markdown和預(yù)覽markdown文件不同的是，typora能夠“所見即所得”实抡，寫完了就可以實(shí)時(shí)在當(dāng)前位置看到最終效果欠母。而且typora本身支持內(nèi)嵌LaTex數(shù)學(xué)公式，本人試過(guò)吆寨，幾乎所有的公式都可以嵌入赏淌，而且支持公式的自動(dòng)編號(hào)，可以作為平時(shí)快速寫作的一個(gè)高效編輯器啄清。這里不仔細(xì)講typora的用法猜敢，網(wǎng)上可以找到許多教程，例如Typora完全使用詳解盒延，有興趣的朋友可以了解一下。
二. 基于Github的博客搭建
1. 創(chuàng)建博客倉(cāng)庫(kù)
1.1 Github代碼倉(cāng)庫(kù)簡(jiǎn)介
Github是一個(gè)在線的代碼托管平臺(tái)鼠冕，支持使用git進(jìn)行代碼的版本管理添寺，用戶可以自由注冊(cè)和將自己的代碼托管到遠(yuǎn)程的Github倉(cāng)庫(kù)上，然后隨時(shí)隨地可以下載使用懈费。這里不對(duì)Github的使用做深入的解釋计露，感興趣的人可以自行搜索。這里假設(shè)閱讀本文的人已經(jīng)對(duì)Github的使用有了一定的了解。本人的這個(gè)博客其實(shí)就是一個(gè)托管在Github倉(cāng)庫(kù)上的代碼倉(cāng)庫(kù)票罐，github提供了種特殊的repo叉趣，允許用戶簡(jiǎn)單地創(chuàng)建自己的博客網(wǎng)頁(yè)。
1.2 創(chuàng)建Repo
在自己的Github上新建一個(gè)repository该押，這里注意疗杉，跟普通的代碼倉(cāng)庫(kù)不一樣蚕礼，我們要?jiǎng)?chuàng)建一種特殊的repository，倉(cāng)庫(kù)的名字只能取為你的github用戶名.github.io奠蹬，例如我的用戶名叫chauby，那么我的這個(gè)倉(cāng)庫(kù)名字就只能取chauby.github.io囤躁。如下圖所示，由于我已經(jīng)有這樣一個(gè)倉(cāng)庫(kù)了狸演，所以提醒我有錯(cuò)誤：
?
然后點(diǎn)擊下面綠色的“Create repository”，倉(cāng)庫(kù)就創(chuàng)建好了猜极。然后我們創(chuàng)建好的博客的首頁(yè)地址就是 https://yourname.github.io，這里yourname就是你的github賬戶名字跟伏。
倉(cāng)庫(kù)創(chuàng)建好了以后還不行翩瓜，還需要點(diǎn)擊settings來(lái)管理倉(cāng)庫(kù)受扳，修改一部分的設(shè)置才可以兔跌，settings可以點(diǎn)擊右上角：
進(jìn)去以后向下拉，將Github Pages下面的Source設(shè)置為Master branch即可坟桅。
至此，博客倉(cāng)庫(kù)的創(chuàng)建已經(jīng)完成了赖舟，然后就需要在這個(gè)倉(cāng)庫(kù)里面填入我們的博客主題和內(nèi)容控制代碼夸楣。如果讀者喜歡我的博客模板宾抓，可以直接從我的github倉(cāng)庫(kù)下載，然后使用git checkout命令回到最初的版本即可石洗，最初的版本是一個(gè)空倉(cāng)庫(kù)，只有簡(jiǎn)單的示例頁(yè)面讲衫。下載命令為：
git clone https://github.com/chauby/chauby.github.io.git
2. 選擇自己喜歡的主題
用戶也可以自行選擇其他主題，在jekyll主題官網(wǎng) 上有很多開源的主題挥吵，可以選擇自己喜歡的，也可以自行搜索jekyll主題忽匈，網(wǎng)上有不少開源的主題矿辽，選擇自己喜歡的即可丹允。
3. 基于ruby的本地編寫和調(diào)試博客內(nèi)容
Ruby的下載地址袋倔，安裝過(guò)程的詳細(xì)教程可參考Win10安裝jekyll和ruby環(huán)境。Ruby下載完成以后直接雙擊安裝宾娜，除了安裝路徑，其他一路默認(rèn)選項(xiàng)就行前塔。安裝路徑最好不要包含空格（本人沒(méi)有完整去驗(yàn)證過(guò)，但是我第一次的安裝路徑包含了空格华弓，后面安裝其他東西的時(shí)候老是不成功。重新選擇了不包含空格的安裝路徑來(lái)安裝了ruby后寂屏，安裝后續(xù)的其他問(wèn)題一路順利）。
Ruby安裝完成以后會(huì)彈出一個(gè)窗口讓你選擇3個(gè)選項(xiàng)之一來(lái)安裝吱抚，一般直接選3就是，安裝過(guò)程需要一定的時(shí)間秘豹。如果這部分沒(méi)有安裝成功芝此，可以使用如下的命令重新安裝：
ridk install
這個(gè)命令直接在windows的cmd中執(zhí)行即可憋肖，后面的其他安裝命令也是一樣的婚苹。安裝成功以后直接回車即可。
上述安裝完成以后膊升，需要執(zhí)行以下命令安裝bundle:
gem install bundle
然后是安裝jekyll，由于github pages是基于jekyll廓译，所以我們本地安裝jekyll以后進(jìn)行本地的網(wǎng)頁(yè)調(diào)試，最后呈現(xiàn)的結(jié)果與在線的是一樣的非区，調(diào)試完成了在推送到github倉(cāng)庫(kù)部署就行。
gem install jekyll
最后需要安裝github-pages久橙，這部分會(huì)持續(xù)安裝很多東西，所以耗時(shí)比較長(zhǎng)淆衷，耐心等待即可渤弛。
gem install github-pages
安裝過(guò)程截圖如下：
?
至此，所有的安裝工作已完成她肯，此時(shí)cd到對(duì)應(yīng)博客的目錄，運(yùn)行以下命令：
bundle exec jekyll serve -P 5555 --watch
--watch表示這個(gè)本地網(wǎng)頁(yè)是實(shí)時(shí)刷新的辕宏，當(dāng)你更改網(wǎng)頁(yè)的內(nèi)容時(shí)它能實(shí)時(shí)的變化，而不用不斷重啟和加載網(wǎng)頁(yè)瑞筐。-P 5555參數(shù)是指定端口號(hào)為5555，Jekyll默認(rèn)的端口號(hào)是4000块蚌，會(huì)與福昕閱讀器的端口號(hào)沖突（如果你的電腦安裝了福昕閱讀器），所以還是指定端口號(hào)最佳峭范。正常情況下你能看到類似下圖的啟動(dòng)界面了瘪贱，此時(shí)在瀏覽器的地址欄輸出 localhost:5555就能看到你的博客了纱控。如果不行，請(qǐng)參考后文的“常見問(wèn)題和解決辦法”甜害。
到這里，博客的平臺(tái)搭建就算完成了眨攘，可以在本地調(diào)試完寫好的博客然后再使用git推送到github的遠(yuǎn)程倉(cāng)庫(kù)，遠(yuǎn)程倉(cāng)庫(kù)的博客就更新了鲫售。
4. 博客的編寫
本文所采用的模板編寫博客時(shí)非常簡(jiǎn)單该肴，根目錄文件路徑如下圖所示：
其中，_posts目錄下分類存放了我的所有博客文章的源文件沙庐，博客所使用到的圖片都放在images目錄下，而平時(shí)最主要用到的目錄就是這兩個(gè)拱雏，只要在其中添加相應(yīng)的文件和圖片即可完成博客的編寫，非常方便铸抑。
如果我們想要添加、減少或改變博客首頁(yè)的板式蒲赂，可以編輯_config.yml文件，其中的細(xì)節(jié)這里不再贅述滥嘴，大家可以自行摸索至耻。目錄pages/下面是博客的各個(gè)板塊的網(wǎng)頁(yè)文件若皱，用戶也可以自行添加和刪除尘颓，但是要配合修改__config.yml文件。
三. 常見問(wèn)題
1. 提示 Could not find gem ‘tzinfo-data’
則打開終端切換到user.github.io/路徑下互广，然后運(yùn)行以下命令：
bundle install
然后等待安裝tzinfo、tzinfo-data惫皱、wdm等，需要等待一段時(shí)間旅敷。
2. 提示 Error: Permission denied -bind(2) for 127.0.0.1:4000
出現(xiàn)這個(gè)問(wèn)題是提示端口號(hào)被占用，因?yàn)镴ekyll默認(rèn)的端口號(hào)是4000扫皱，可能與其他軟件沖突（例如福昕閱讀器）捷绑。所以最好的辦法是運(yùn)行jekyll的啟動(dòng)命令時(shí)指定端口號(hào)（例如5555）：
注意：此時(shí)瀏覽器要想訪問(wèn)本地的博客內(nèi)容，應(yīng)該輸入 localhost:5555 段多。
四. 參考
- 本博客的搭建過(guò)程使用了Zhuang Ma的博客主題碼志壮吩，此處致謝进苍。
時(shí)間有限鸭叙，本博客就暫時(shí)寫到這里，有時(shí)間會(huì)再補(bǔ)充更新一些細(xì)節(jié)杠人。如果有問(wèn)題或者對(duì)其中的一部分細(xì)節(jié)不理解，可以掃描下方二維碼關(guān)注我的微信公眾號(hào)私信我嗡善，我會(huì)第一時(shí)間解答学歧。
?
