1. 程式人生 > >通過GitHub和Hexo來搭建自己的個人部落格

通過GitHub和Hexo來搭建自己的個人部落格

搭建個人部落格在我大學的時候建過一次,那時候是用新浪雲和Wordpress搭建的,那時候新浪雲服務是免費的,後來變收費,部落格就沒有了。之前便想著再弄個自己的部落格出來,這幾天就著手弄了起來。
看到很多人的個人部落格是用github來當伺服器,然後通過Hexo來搭建部落格框架,那麼新建個人部落格也用這兩個來搭建吧。本文同步更新於旺仔的個人部落格,訪問可能有點慢,多重新整理幾次。

GitHub主頁

建立倉庫

想必大家都有自己的Github賬號吧,沒有的可以到GitHub官網註冊賬號,註冊完後,我們來下一步,在我們的GitHub上面右上角的New repository來建立一個倉庫。

倉庫名必須遵守相應格式:your_username.github.io,這樣子在訪問主頁的時候直接用your_username.github.io就能訪問。

我這裡因為是已經建立了一個倉庫了,所以會有提示,然後點Create repository確定建立倉庫。

設定Pages

接下來我們來設定我們的GitHub Pages,開啟我們剛剛建立的倉庫,然後建立一個主頁index.html

然後在裡面輸入程式碼

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p
>
I'm hosted with GitHub Pages.</p> </body> </html>

然後儲存

接下來我們開啟GitHub Pages的設定,點開Settings

移到下面的GitHub Pages

可以看出,我現在能用https://jowanxu.github.io/來訪問我的github主頁了,這裡我是用我的一個新建立的號來演示的。

通過上面的配置,我們能通過your_username.github.io來訪問我們的部落格主頁了。

Clone倉庫

建立完倉庫後(可直接安裝Git,忽略Clone),我們需要將程式碼下載到本地,這裡就需要用到Git了。

安裝Git

  • Windows:下載並安裝 gitmsysGit
  • Mac:使用 Homebrew, MacPortsbrew install git;或下載 安裝程式 安裝。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

安裝完Git後,在命令列輸入git --version,判斷是否成功

如果出現不存在命令,那麼就新增Git目錄下bin目錄的環境變數,新增完後要重新開啟命令列,然後在判斷是否成功。

這裡我使用msysGit的Bash視窗來進行操作的。

配置Git引數

安裝完Git後,需要配置本地Git的引數,右鍵一個資料夾,然後選擇Git Bash,開啟Bash視窗,然後

然後我們來設定Git的姓名和郵箱:

git config --global user.name "Firstname Lastname"
git config --global user.email "[email protected]"

配置完成後,會在~/.gitconfig中生成相應的本地Git配置資訊。

新增SSH Key

GitHub上連線已有倉庫是驗證是通過SSH的公開金鑰進行認證的,在這裡我們來生成我們自己的SSH Key,輸入下面的命令,輸入完後回車,會讓你輸入金鑰的檔名和密碼,系統會在/Users/your_user_directory/.ssh/x下生成私有金鑰id_rsa和公開金鑰id_rsa.pub

ssh-keygen -t rsa -C "[email protected]"

我們可以看到生成的檔案

id_rsa檔案內容是這樣的,由-----BEGIN RSA PRIVATE KEY-----開始,和-----END RSA PRIVATE KEY-----結束

id_rsa.pub的內容是這樣的,由ssh-rsa開頭的

然後我們在GitHub上面新增本地SSH金鑰資訊,在右上角選擇Settings進入設定介面

然後選中SSH and GPG keys,點選New SSH key

Title可以隨便填,開啟公開金鑰id_rsa.pub,複製裡面的內容到Key裡面,填完金鑰後,點Add SSH key就OK了。

ssh-agent

我們要通過ssh-agent來新增剛剛建立的金鑰,來登陸GitHub,ssh-agent是一種控制用來儲存公鑰身份驗證所使用的私鑰的程式,通過輸入下面兩條命令新增,第一條命令是反引號`,不是單引號’

eval `ssh-agent -s`
ssh-add hexo_rsa(上面建立的金鑰檔名)

然後我們登陸一下GitHub,看是否登陸成功

ssh -T git@github.com

登陸成功~~~

Hexo框架

Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
安裝Hexo需要用到npm,而安裝npm則需要安裝Node.jsNode.js可以在官網下載,下載完成直接安裝,然後通過命令列來判斷是否安裝完成

npm設定淘寶NPM映象,來提高下載速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

設定完映象後,就可以安裝Hexo了

npm install -g hexo-cli

然後用命令列檢視是否安裝成功

hexo -version

接下來我們需要建立一個資料夾,檔名隨意,也可以在已存在的資料夾裡面,但是裡面必須是什麼檔案都沒有,然後進入到資料夾裡面,來初始化Hexo

hexo init

如果沒有出現錯誤,那麼我們的Hexo部落格框架就安裝完成了,生成的目錄內容如下,其中_config.yml是網站的配置資訊,我們大部分的引數都是在這個檔案裡面修改

接下來我們來啟動Hexo服務

hexo s

也可以開啟debug模式,debug模式可以實時更新,方便檢視修改後的結果。

hexo s --debug

然後我們在瀏覽器上輸入localhost:4000來開啟Hexo

Hexo常用命令

new

如果我們要建立一篇文章的話,我們可以通過new命令來建立,也可以直接在部落格目錄下面的\source\_posts裡面建立markdown檔案。

hexo new [layout] <title>

如果標題包含空格的話,請使用引號括起來。

generate

generate命令是用來生成靜態檔案的,在我們釋出到GitHub的倉庫的時候,需要先生成,才能上傳。

hexo generate

可以簡寫為

hexo g
server

開啟伺服器,網址為http://localhost:4000

hexo server

同樣可以簡寫為

hexo s
deploy

部署網址,上傳到我們的GitHub的倉庫上面。

hexo deploy

同樣可以簡寫為

hexo d
clean

清除快取檔案 (db.json) 和已生成的靜態檔案 (public)。在某些情況(尤其是更換主題後),如果對站點的更改無論如何也不生效,執行該命令。

hexo clean

Hexo配置Git

我們要上傳GitHub必須要先設定一些內容,開啟部落格目錄下面的配置檔案_config.yml,找到deploy,然後在type那裡輸入git,在repo那裡輸入我們的倉庫地址,在branch那裡輸入mastermessage為上傳日誌,可不寫

一般我們上傳到GitHub的時候我們用這條命令來執行,生成靜態檔案並且部署到伺服器。

hexo g -d

上傳完成之後,我們可以在部落格資料夾裡面的.deploy_git目錄管理我們的倉庫檔案,那麼我們上面就不需要Clone倉庫下來了。

下一步我們來通過域名解析GitHub主頁地址來訪問個人部落格。

域名

在本地搭建完個人部落格後,我們就要將程式碼上傳到我們的GitHub倉庫上面去,然後我們就可以通過your_username.github.io來訪問我們的部落格主頁了,但是我們如果要修改GitHub的域名的話是改不了的,只有我們自己去購買域名,然後通過域名解析將我們的GitHub主頁的域名解析到我們自己買的域名上面,這樣我們就可以通過我們自定義的域名來訪問我們的部落格了。

購買域名

購買域名可以在域名提供商購買一個價格合適的個人域名,在這裡我用阿里雲的上註冊購買,阿里雲直接用支付寶登陸就行,而且還有部分域名可以1元首年購買的優惠,開啟阿里雲域名註冊官網,然後輸入自己想要的域名,當然你也可以選中1元的域名,輸入完點查詢

然後選擇自己想要的域名,加入清單,然後支付

支付完成後我們點選右上角的控制檯,進入我們的管理介面,然後開啟域名與網站(萬網),裡面就能看到我們剛剛購買的域名了

繫結域名

購買完域名後,我們需要在部落格目錄下的\source目錄下建立CNAME檔案(沒有後綴名、全部大寫),寫入你所購買的域名地址。這裡我寫入的www.jowanxu.top。

然後我們來繫結我們的GitHub主頁,繼續在阿里雲管理控制檯,然後選擇雲解析DNS選項介面

然後點選我們的域名,進入解析設定

預設會有兩個解析,一個是CHAME,一個是ACHAME裡面輸入我們的GitHub主頁your_username.github.ioA那裡輸入我們GitHub主頁的IP,如何獲取主頁IP呢,通過命令列的ping來獲取

然後儲存就OK啦。

GitHub設定

上面弄完之後,我們還需要在我們GitHub倉庫上面修改我們的source,才能搞定,開啟我們的倉庫,然後點選Settings

然後找到GitHub Pages,將source改為master branch,然後儲存

並且填入我們自己購買的域名地址,然後儲存

然後我們就能收到建立成功的郵件了。

最後我們的GitHub Pagers裡面是這樣子的,證明成功了

然後我們就能通過自己購買的域名來直接訪問到我們放在GitHub上面的個人部落格了,如我的部落格

如果你覺得預設自帶的主題不好看,可以自己去搗鼓其他的主題,Hexo支援特別多的主題,可以在這個網址上選擇自己喜歡的,我這裡用到的主題是NexT主題。