本文將介紹基于平臺(tái)上的頁面搭建個(gè)人博客網(wǎng)站的過程，以及調(diào)試本地博客的過程。對(duì)于不懂前端的人來說是一個(gè)比較基礎(chǔ)的入門教程。另外，這篇文章也同步發(fā)表在我的個(gè)人博客上。本文的一些外部鏈接、涉及到的工具、博客模板地址、基于Ruby的本地博客調(diào)試方法、博客主題和語法以及更多詳細(xì)信息，歡迎訪問我的博客地址：

。

介紹

作為一名非前端和網(wǎng)站開發(fā)人員，我想建立自己的個(gè)人博客來分享我的日常學(xué)習(xí)和生活。我一直在尋找一個(gè)平臺(tái)。之前在CSDN上寫過一些博客，但是好久沒有更新了，也懶得再理會(huì)了。最近由于研究需要，發(fā)現(xiàn)需要記錄的東西太多了。同時(shí)，我用得越多，就越容易，所以我想到了建立自己的博客平臺(tái)，來分享我日常研究和學(xué)習(xí)過程中的一些技術(shù)問題以及我自己研究的一些內(nèi)容。思考。后來發(fā)現(xiàn)有這么一個(gè)平臺(tái)（原諒我后知后覺），于是就想著自己搭建一個(gè)博客平臺(tái)。

我要求不高，主題簡潔大方，易于發(fā)布，可以分享我的博文。提供的頁面基本可以滿足我的需求，而且使用起來也很方便。環(huán)境搭建好后，我就可以用它來寫博客，上傳到網(wǎng)上托管，非常方便。

1. 簡介 1. 語法簡介

基礎(chǔ)語法可以參考我的另一篇文章。

2. 編輯

為了方便書寫，我們需要專業(yè)的翻譯人員來實(shí)時(shí)預(yù)覽書寫效果。市場(chǎng)上有很多支持語法的代碼編輯器，比如text、atom等，我選擇了一個(gè)還處于測(cè)試階段的編輯器。與傳統(tǒng)的兩欄寫入和預(yù)覽文件不同，它可以“所見即所得”。寫入后，可以在當(dāng)前位置實(shí)時(shí)看到最終效果。它還支持嵌入的 LaTex 數(shù)學(xué)公式。我嘗試了一下，發(fā)現(xiàn)幾乎所有的公式都可以嵌入。它還支持公式自動(dòng)編號(hào)，可以作為快速編寫的高效編輯器。對(duì)于這里不詳細(xì)解釋的用法，大家可以在網(wǎng)上找到很多教程，比如詳細(xì)的使用說明。有興趣的朋友可以詳細(xì)了解一下。

2. 基于博客建設(shè) 1. 創(chuàng)建博客倉庫 1.1 代碼倉庫簡介

它是一個(gè)在線代碼托管平臺(tái)，支持使用git進(jìn)行代碼版本管理。用戶可以自由地將自己的代碼注冊(cè)托管到遠(yuǎn)程倉庫，然后隨時(shí)隨地下載使用。這里就不深入解釋用法了，有興趣的可以自行搜索。假設(shè)閱讀本文的人已經(jīng)對(duì) 的使用有了一定的了解。我的博客實(shí)際上是一個(gè)托管在倉庫上的代碼倉庫，它提供了一個(gè)特殊的reposublime text圖片路徑，可以讓用戶簡單地創(chuàng)建自己的博客網(wǎng)頁。

1.2 創(chuàng)建倉庫

自己創(chuàng)建一個(gè)新的。這里注意一下，它和普通的代碼倉庫不同。我們需要?jiǎng)?chuàng)建一個(gè)特殊的。倉庫名稱只能是你的用戶名..io。比如我的用戶名是，那么我的這個(gè)倉庫的名字就只能是..io。如下圖，由于我已經(jīng)有這樣的倉庫，所以提示有錯(cuò)誤：

然后點(diǎn)擊下面綠色的“ ”，倉庫就創(chuàng)建好了。那么我們創(chuàng)建的博客的主頁地址就是，這里是你的賬戶名。

倉庫創(chuàng)建完成后，還需要點(diǎn)擊管理倉庫，修改一些設(shè)置。您可以點(diǎn)擊右上角：

進(jìn)入后，在Pages下下拉設(shè)置為。至此，博客倉庫的創(chuàng)建就已經(jīng)完成了，接下來我們需要在這個(gè)倉庫中填寫我們的博客主題和內(nèi)容控制代碼。如果讀者喜歡我的博客模板，可以直接從我的倉庫下載，然后使用git命令返回到原來的版本。最初的版本是一個(gè)空倉庫，只有一個(gè)簡單的示例頁面。下載命令為：

?git clone https://github.com/chauby/chauby.github.io.git

2.選擇您喜歡的主題

用戶也可以自行選擇其他主題。主題官網(wǎng)上有很多開源主題。您可以選擇您喜歡的主題，也可以自行搜索主題。網(wǎng)上有很多開源主題，選擇你喜歡的就可以了。

3.基于ruby本地編寫和調(diào)試博客內(nèi)容

Ruby的下載地址和安裝過程的詳細(xì)教程可以在Win10安裝和Ruby環(huán)境中找到。 Ruby下載完成后，雙擊安裝。除安裝路徑外，其他默認(rèn)即可。安裝路徑最好不要包含空格（我沒有完全驗(yàn)證過，但是我第一個(gè)安裝路徑包含空格，后來安裝其他東西總是不成功。我重新選擇了一個(gè)不包含空格的安裝路徑安裝完ruby后，其他后續(xù)問題就順利了）。

Ruby 安裝完成后，將彈出一個(gè)窗口，允許您選擇 3 個(gè)安裝選項(xiàng)之一。一般選擇3即可。安裝過程需要一定的時(shí)間。如果該部分沒有安裝成功，可以使用以下命令重新安裝：

?ridk install

該命令直接在cmd中執(zhí)行即可，后續(xù)其他安裝命令相同。安裝成功后直接回車即可。

上述安裝完成后，需要執(zhí)行以下命令進(jìn)行安裝：

?gem install bundle

然后是安裝。由于pages是基于它的，所以我們本地安裝后調(diào)試本地網(wǎng)頁。最終結(jié)果和網(wǎng)上的一樣。調(diào)試完成后，只需推送到倉庫進(jìn)行部署即可。

?gem install jekyll

最后，您需要安裝-pages。這部分會(huì)繼續(xù)安裝很多東西，所以需要的時(shí)間比較長，耐心等待即可。

?gem install github-pages

至此，所有的安裝工作已經(jīng)完成。此時(shí)cd到博客對(duì)應(yīng)的目錄，運(yùn)行以下命令：

?bundle exec jekyll serve -P 5555 --watch

--watch表示這個(gè)本地網(wǎng)頁實(shí)時(shí)刷新。當(dāng)您更改網(wǎng)頁內(nèi)容時(shí)，它可以實(shí)時(shí)更改，而無需不斷重新啟動(dòng)和加載網(wǎng)頁。 -P 5555參數(shù)指定端口號(hào)為5555。默認(rèn)端口號(hào)為4000，會(huì)與福昕閱讀器的端口號(hào)沖突（如果你的電腦安裝了福昕閱讀器），所以最好指定端口號(hào)。正常情況下，你可以看到類似下圖的啟動(dòng)界面。這時(shí)在瀏覽器地址欄輸入：5555就可以看到你的博客了。如果沒有，請(qǐng)參閱下面的常見問題解答和解決方案。

至此，博客平臺(tái)就搭建完成了?？梢栽诒镜卣{(diào)試寫好的博客，然后使用git推送到遠(yuǎn)程倉庫。遠(yuǎn)程倉庫的博客將會(huì)更新。

4.博客寫作

本文使用的模板寫博客非常簡單。根目錄文件路徑如下圖：

其中sublime text圖片路徑，我所有博文的源文件都按類別存放在該目錄下。博客中用到的圖片都放在該目錄下。最常用的目錄是這兩個(gè)。只需在其中添加相應(yīng)的文件和圖片即可。就可以完成博客的編寫了，非常方便。

如果我們想要添加、減少或更改博客主頁的布局，我們可以編輯.yml文件。詳細(xì)內(nèi)容在此不再贅述。你可以自己探索一下。目錄pages/下面是博客每個(gè)部分的網(wǎng)頁文件。用戶也可以自行添加和刪除，但必須相應(yīng)修改.yml文件。

三、常見問題 1、提示 Could not find gem '-data'

然后打開終端并切換到user..io/路徑，然后運(yùn)行以下命令：

?bundle install

然后等待安裝，-data、wdm等，需要一段時(shí)間。

2.錯(cuò)誤：127.0.0.1:4000的-bind(2)

出現(xiàn)這個(gè)問題是因?yàn)槎丝谔?hào)被占用，因?yàn)槟J(rèn)端口號(hào)是4000，可能會(huì)和其他軟件（比如福昕閱讀器）沖突。所以最好的方法是在運(yùn)行啟動(dòng)命令時(shí)指定端口號(hào)（例如5555）：

?bundle exec jekyll serve -P 5555 --watch

注意：如果此時(shí)瀏覽器要訪問本地博客內(nèi)容，則應(yīng)輸入：5555。

4. 參考資料

本博客的搭建過程使用了馬老師的博客主題代碼日志，在此謝謝大家。

時(shí)間有限，這篇博客就暫時(shí)寫到這里。當(dāng)我有時(shí)間時(shí)，我會(huì)更新并添加一些細(xì)節(jié)。如果您有任何疑問或者有些細(xì)節(jié)不明白，可以掃描下面的二維碼關(guān)注我的微信公眾號(hào)并私信我，我會(huì)盡快解答。

如有侵權(quán)請(qǐng)聯(lián)系刪除！