最近突發奇想,想試試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選項就能看到如下的提示資訊,這就說明部落格釋出成功了。


在我選擇的這個主題中,配置url的在43行,然後修改該檔案下43行處baseurl,
修改之後:
點選該按鈕就修改完成了,這個時候,只需要等到github給你發郵件,就說明修改成功了。你就能正常訪問 使用者名稱.github.io了。
如果css或者js檔案還是未找到,你看看控制檯報錯的路徑,再修改baseurl就行了。多半baseurl都是 使用者名稱.github.io,但有些不填即置為空才正確。
這些配置完成後就能正確顯示你fork的主題的內容了。
使用者名稱的修改:
在這setting裡面的Account中的
修改之後,如果出現下面的情況
說明使用者名稱被佔用了,如果出現如下的內容,則說明修改成功
呼。。。。。。終於寫完了。雖然建博路程磕磕碰碰,但是終究還是弄出來了。
對了,建博成功之後,修改成自己想要的就很簡單了,可以本地修改再push,也可以就在github上修改。改之後都要等一會,即等到github pages的那個地址背景變綠色之後才有修改的效果。
學到了炒雞多的知識,還是挺欣慰的。O(∩_∩)O哈哈~