使用Github pages+jekyll搭建自己的部落格（windows版）

標籤：mil   oca   nal   public   ati   背景   本地   搭建   很多   

最近突發奇想，想試試GitHub pages來搭建部落格。網上一搜一大堆，嗯。。。看來還是挺簡單的。。。於是自己擼起袖子幹。。。。。。

結果對於我這種GitHub註冊過，git 沒用過，ruby、jekyll 是麼都不知道的小白來說，一路踩坑的感覺，真的不要太酸爽。。。。。。

下面記錄我從零開始搭建部落格的過程：

說一句，大神請繞道，不喜勿噴啊，內容有點多。。。

 

複雜方法：

第一大步：註冊github並建立一個倉庫

1.用自己的郵箱註冊

註：使用者名稱建議用小寫，後面會提到原因。

 

2.建立一個倉庫

登入之後，點擊右邊這個按鈕

然後出現下面的內容

第一個是要建立的倉庫的名稱。名稱不能亂取，需要寫成：使用者名稱.github.io。假如我使用者名稱是gioiaup，那麼這裡倉庫名就需要填入gioiaup.github.io。

第二個表示是否需要建立一個README檔案，個人認為可要可不要，因為找的主題模板裡面有。

建立之後

這裡顯示的url，即當前倉庫的遠程地址，可用於clone或者push。

到此，github的工作就準備完成了90%。還剩SSH公開金鑰沒配置，後面會提到。

 

第二大步：安裝jekyll

1.下載並安裝git

安裝完成後，滑鼠右鍵就有這兩個選項了

2.安裝ruby

這是下載連結：https://rubyinstaller.org/downloads/

由於需要安裝ruby和devkit，我就下載了官方推薦的兩個合成一個的安裝包，

我電腦是64位的，就選的第一個。

安裝的時候，接受條款之後的下一步

選擇一個檔案夾放ruby。我認為可以把utf-8這個選項勾上，雖然我不清楚有什麼用，但感覺utf-8和中文有聯絡、必須要的樣子 。

再下一步會出現如下的選項：

記得把那個MSYS2勾上，不然後面會出現很多問題，讓你先安裝這個MSYS2。唉，一個坑。

如果安裝的時候出現阻止安裝的情況記得允許。。。

安裝完之後，會自動勾選，點擊finish就行，然後會自動彈出dos視窗，然後讓你選擇

我選擇的1，第二個選項應該是一樣的效果吧。。。

到最後會提醒你安裝成功了，然後點擊enter就行了。

 

3.安裝jekyll.

開啟dos，輸入gem install jekyll，開始安裝jekyll。

稍等一下會出現如下一堆東西

這說明jekyll正在安裝

安裝完jekyll之後，在dos裡面輸入jekyll -v，如果出現版本號碼，則說明jekyll安裝成功。

 

 4.找自己喜歡的主題

 jekyll主題模板下載：http://jekyllthemes.org 

 

這是一部分主題，選一個自己喜歡的主題。比如選擇第一個，進入。這個時候你就有三個選擇 

 

　　a) 如果選擇homepage，你就進入到該主題的GitHub首頁，然後該頁面有個clone綠色的按鈕，有個url地址，這個地址就能用來複製該主題的所有檔案 

 

　　　　複製方法：在需要放部落格的檔案夾裡，滑鼠右鍵選擇 git bash here，然後出現 $ 符號後，輸入git clone url（這個url是上面那個主題clone顯示的url地址，可以copy之後在git裡右鍵paste粘貼）， 

 

　　　　複製完成之後，就會在當前檔案夾裡看到選擇主題的所有檔案了 

 

這就複製成功了。當然在主題那裡選擇download的話，就不用複製了。

 　　b) download就不用說了。直接解壓到所需檔案夾裡就行 

　　c) 選Fork的話，是最簡單的一種辦法。後面會介紹 

5.安裝bundle

在dos裡面，輸入gem install bundler

出現這個就算安裝好了。

然後進入clone或者下載的部落格的檔案中，滑鼠右鍵git bash here，輸入bundle install，再次安裝bundle。我搞不懂為什麼。

類似這樣的。

如果不安裝bundle的話，在git中執行：bundle exec jekyll s會報錯。又是一個坑。。。。。。

6.修改設定檔

在clone或者下載之後，各種需要的檔案都安裝完成之後。修改_config.yml中的配置。比如當前這些檔案的路徑。

假如我建立了一個test檔案，然後在這個檔案裡面使用git clone了喜歡的主題，主題的名稱是blog，那麼就是 test \ blog下才是所有的主題檔案。這時需要把檔案的路徑改為“/blog”，注意是 “ / ”，不是 “ \ ”，/blog前面的路徑不管 ! ! !當然，你也可以不用建立檔案夾，直接就在案頭clone 

 7.本地預覽

配置完成後，在當前主題的檔案夾裡滑鼠右鍵，git bash here，輸入bundle exec jekyll s  這裡s是serve的簡寫。然後就可以在 localhost:4000/blog/ （注意blog後面的"/"不能省略，不然顯示不出來）或者127.0.0.1:4000/blog/ 上預覽自己的主題部落格了。如果出現404頁面等問題，就是路徑沒配置正確。

就是是url配置成功之後顯示的頁面。如果修改了配置之後，需要重新執行bundle exec jekyll s。

 

 8.配置SSH公開金鑰

要想實現直接存取 使用者名稱.github.io 就出現自己選擇的部落客題，還要經過這一步。

設定ssh鑰匙的原因是讓git擷取push許可權，這樣在每次pull或者push的時候就不用每次都輸入密碼。如果push提交代碼的時候會出現permission denied (publickey)許可權不允許的問題，也是沒配置SSH導致的。

在git bash here中輸入ssh-keygen -t rsa -b 4096 -C "[email protected]"   引號中的是你註冊github時的郵箱。

後面會讓你輸密碼，你可以直接按enter不設定就行。

然後就會出現你的ssh明文。它是被儲存在C:\Users\Administrator\.ssh 這裡面的。 

 

然後你可以在git中或者用記事本開啟，查看你的SSH公開金鑰

git查看的方式 輸入：cat  ~/.ssh/id_rsa.pub。

 

9.在github中設定SSH公開金鑰

頭像 --> setting --> SSH and GPG keys -->New SSH key -->

把id_rsa.pub中的內容複寫到key中，然後取個名稱。點擊Add SSH key，然後隔幾秒github會給你發個郵件，如下：

說明添加成功了。

然後在git中輸入ssh -T [email protected]，出現下面的內容

則說明SSH設定成功了，這樣就可以push本地的檔案到github中了。

 

10.本地檔案push到github指定倉庫中

這個時候，可以在git中輸入 git status,查看檔案是否修改過，如果修改過的，就會出現

這時，輸入：git add . (注意這裡有個點)，先添加修改檔案，這時再輸入git status時，那些紅色的檔案都變成綠色了。

然後再輸入git commit -m "內容"   內容指的是提交的說明，每次提交檔案時都寫個提交說明，以便清楚地瞭解做了什麼修改。

這個時候再查看git status

說明就能提交了。

最後輸入：git push url（這個url是你建立的倉庫的url）

然後等它慢慢上傳。。。

 

這樣就算成功了，然後在倉庫頁面重新整理一下。就上傳上來了。

這個時候就差最後一步了。再次修改_config.yml的url，上一次修改我是為了在本地預覽才修改的，這次是網路上直接存取  使用者名稱.github.io 才修改的

注意：這時的url多數需修改為setting中 GitHub Pages 的那個地址，比如我的主題我就改成：baseurl: "https://isunbeam.github.io/"，有些部落客題直接不用填,即baseurl:" " 就行。

然後等到GitHub Pages 中那個地址的背景變成綠色就算成功修改了。

這樣就能成功訪問了。

 

簡單方式：

不用安裝各種檔案，只需擁有github賬戶，然後進入需要fork的jekyll主題的github頁面，然後在該頁面下點擊fork之後，它會自動在你的GitHub裡建立一個倉庫，這時候，你需要進入到你fork的倉庫的setting裡面

1. 修改當前倉庫的名稱：

 

注意：再次提一下，假如我的GitHub使用者名稱為gioiaup，那麼這裡倉庫的名稱就必須為gioiaup.github.io，即使用者名稱。github。io.

提醒：使用者名稱建議小寫，因為有 User, Organization, and Project Pages 功能，而 domain 網域名稱是不區分大小寫，預設是小寫。我最開始使用者名稱就是駝峰的寫法，因此倉庫名也是駝峰的方式，結果部落格搭建好的時候，頁面上顯示告訴我找不到各種檔案，一看是把設定檔中url的大寫都自動改成小寫。。。。。。坑

當點擊rename之後，如果成功發布了頁面，那麼github就會給你發郵件，類似（這裡我已經把使用者名稱改成isunbeam了，所以發過來的郵件顯示的是isunbeam.github.io，後面會提到怎樣改使用者名稱）

當郵件發過來之後，你在setting裡面github pages選項就能看到如下的提示資訊，這就說明部落格發布成功了。

 這個時候，你點擊那個串連，就能出現主題頁面了。但是。。。css和js路徑都不正確，所以還需要修改主題檔案下的_config.yml檔案   2. 修改主題部落格配置url的檔案進入_config.yml檔案之後，點擊右邊那個鉛筆的表徵圖，就能進入編輯內容。

在我選擇的這個主題中，配置url的在43行，然後修改該檔案下43行處baseurl，

修改之後：

點擊該按鈕就修改完成了，這個時候，只需要等到github給你發郵件，就說明修改成功了。你就能正常訪問 使用者名稱.github.io了。

如果css或者js檔案還是未找到，你看看控制台報錯的路徑，再修改baseurl就行了。多半baseurl都是 使用者名稱.github.io，但有些不填即置為空白才正確。

這些配置完成後就能正確顯示你fork的主題的內容了。

 

使用者名稱的修改：

在這setting裡面的Account中的

修改之後，如果出現下面的情況

說明使用者名稱被佔用了，如果出現如下的內容，則說明修改成功

 

呼。。。。。。終於寫完了。雖然建博路程磕磕碰碰，但是終究還是弄出來了。

對了，建博成功之後，修改成自己想要的就很簡單了，可以本地修改再push，也可以就在github上修改。改之後都要等一會，即等到github pages的那個地址背景變綠色之後才有修改的效果。

學到了炒雞多的知識，還是挺欣慰的。O(∩_∩)O哈哈~

 

使用Github pages+jekyll搭建自己的部落格（windows版）