Mac上搭建基於GitHub的Hexo部落格(繼)

weixin_34253539發表於2017-07-31

很早就想搭建一個屬於自己的部落格,一次一次的嘗試都失敗了,今天有幸找到博主的部落格(與佳期的個人部落格(gonghonglou.com))然後一步一步的跟著操作,終於搭建了屬於自己的部落格,除了博主的一些坑,自己也踩了不少坑,特地在這裡在博主的基礎上加上自己踩得坑。

環境配置

Hexo官網上本就有對Hexo安裝及使用的詳細介紹,可以按照上邊的步驟一步一步安裝。這裡來講述自己安裝的親身步驟。

1.Node.js

用來生成靜態頁面。移步Node.js官網,下載v8.2.1 Current 一路安裝即可。

2.Git

用來將本地Hexo內容提交到Github上。Xcode自帶Git,這裡不再贅述。如果沒有Xcode可以參考Hexo官網上的安裝方法。

(這裡我要說一下我在根據Hexo官網安裝Hexo的時候,到了Install Node.js這一步的時候,我敲第一條命令的時候沒問題)

//第一條命令
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

當我開始敲第二條命令的時候就出現了問題

//第二條命令
$  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

終端提示我 -bash: wget: command not found
然後使用下邊的命令安裝wget,這樣找不到wget的錯誤就不會再提示了。

$  brew install wget

解決完wget的問題之後我再執行了第二條命令,然後執行第三條命令:

//第三條命令
$  nvm install stable

沒錯,問題又來了,提示我-bash: nvm: command not found,又掉坑裡了,我能怎麼辦,我也很絕望啊,然後解決辦法是安裝nvm,命令如下:

$  brew install nvm

等上述命令執行完之後,我再執行第三條命令的時候發現還是提示-bash: nvm: command not found
額...........居然還沒從坑裡爬出來,然後我找到了如下的方法,終於從這個坑裡爬出來了,具體為什麼這麼操作,我也不是太清楚。
按照下邊的命令逐個執行

$  source ~/.nvm/nvm.sh
$  source ~/.profile
$  source ~/.bashrc

當上述命令執行完畢之後,再執行第三條命令的時候就完美解決了問題,終於從坑裡爬出來了。

接下來執行下邊的命令:

$  sudo npm install -g hexo

輸入管理員密碼(Mac登入密碼)即開始安裝 (sudo:linux系統管理指令 -g:全域性安裝)

注意坑一:Hexo官網上的安裝命令是$ npm install -g hexo-cli,安裝時不要忘記前面加上sudo,否則會因為許可權問題報錯。

初始化

終端cd到一個你選定的目錄,執行hexo init命令:

$  hexo init blog

blog是你建立的資料夾名稱。cd到blog資料夾下,執行如下命令,安裝npm:

$  npm install

執行如下命令,開啟hexo伺服器:

$  hexo s

此時,瀏覽器中開啟網址http://localhost:4000,能看到如下頁面:

1935382-594535786fb3c50a.png
23123.png

本地設定好後,接下來開始關聯Github。

關聯Github

1.建立倉儲

登入你的Github帳號,新建倉庫,名為使用者名稱.github.io固定寫法,如jerry039.github.io即下圖中1所示:

1935382-4018a15485b84c38.png
8285FC0F-C382-40DA-A0A3-BF0759DF5046.png

本地的blog資料夾下內容為:

_config.yml    
db.json 
node_modules 
package.json
scaffolds
source
themes

終端cd到blog資料夾下,vim開啟_config.yml,命令如下:

$  vim _config.yml

開啟後往下滑到最後,修改成下邊的樣子:

deploy:
    type: git
    repository: https://github.com/Jerry039/Jerry039.github.io.git
    branch: master

你需要將repositoryJerry039換成你自己的使用者名稱,地址在上圖2位置獲取。hexo 3.1.1版本後type:值為git

注意坑二:在配置所有的_config.yml檔案時(包括theme中的),在所有的冒號:後邊都要加一個空格,否則執行hexo命令會報錯,切記 切記

blog資料夾目錄下執行生成靜態頁面命令:

$ hexo generate        或者:hexo g
此時若出現如下報錯:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
則執行命令:
npm install hexo --save
若無報錯,自行忽略此步驟。

再執行配置命令:

$ hexo deploy            或者:hexo d

注意坑三:若執行命令hexo deploy
仍然報錯:無法連線git或找不到git,則執行如下命令來安裝hexo-deployer-git
$ npm install hexo-deployer-git --save

再次執行hexo generatehexo deploy命令。

若你未關聯Github,則執行hexo deploy命令時終端會提示你輸入Github的使用者名稱和密碼,即

Username for 'https://github.com':
Password for 'https://github.com':

hexo deploy
命令執行成功後,瀏覽器中開啟網址http://Jerry039.github.io(將Jerry039
換成你的使用者名稱)能看到和開啟http://localhost:4000
時一樣的頁面。

為避免每次輸入Github使用者名稱和密碼的麻煩,可參照第二節方法

2.新增ssh key到Github

1.1.檢查SSH keys是否存在Github

執行如下命令,檢查SSH keys是否存在。如果有檔案id_rsa.pubid_dsa.pub,則直接進入步驟1.3將SSH key新增到Github中,否則進入下一步生成SSH key。

$ ls -al ~/.ssh

1.2.生成新的ssh key

執行如下命令生成public/private rsa key pair,注意將your_email@example.com換成你自己註冊Github的郵箱地址。

$ ssh-keygen -t rsa -C "your_email@example.com"

輸入完命令之後直接回車。預設會在相應路徑下(~/.ssh/id_rsa.pub)生成id_rsaid_rsa.pub兩個檔案。

1.3.將ssh key新增到Github中

Find前往資料夾~/.ssh/id_rsa.pub開啟id_rsa.pub檔案,裡面的資訊即為SSH key,將這些資訊複製到Github的Add SSH key頁面即可。

進入Github --> Settings --> SSH keys --> add SSH key:

Title裡任意添一個標題,將複製的內容貼上到Key裡,點選下方Add key綠色按鈕即可。

3.釋出文章

終端cd到blog資料夾下,執行如下命令新建文章:

hexo new 'postName'

名為postName.md的檔案會建在目錄/blog/source/_posts下。你當然可以用vim來編輯文章。我在用MacDown編輯器,支援預覽。

文章編輯完成後,終端cd到blog資料夾下,執行如下命令來發布:

hexo generate             //生成靜態頁面
hexo deploy            //將文章部署到Github

至此,Mac上搭建基於Github的Hexo部落格就完成了。接下來就是介紹安裝theme主題,新增評論功能和繫結個人域名。

相關文章