? 這是一篇詳細文章來講述用Mac搭建Hexo博客于Github上的完整歷程, 也是踩了無數(shù)的坑搭起來的,現(xiàn)在寫下些經(jīng)驗來分享,希望能幫大家少踩些坑。
安裝前提
安裝 Hexo 相當簡單。然而在安裝前,您必須檢查電腦中是否已安裝下列應用程序:
如果您的電腦中已經(jīng)安裝上述必備程序,那么恭喜您!接下來只需要使用 npm 即可完成 Hexo 的安裝。
$ npm install -g hexo-cli
如果您的電腦中尚未安裝所需要的程序,請根據(jù)以下安裝指示完成安裝。
使用Homebrew安裝git,打開終端輸入如下命令:
$?brew install git
如果你的Mac電腦沒有Homebrew請按官網(wǎng)教程安裝。
安裝node命令:
$?npm install node
安裝 Hexo
所有必備的應用程序安裝完成后,即可使用 npm 安裝 Hexo。
$ npm install -g hexo-cli
建站
安裝 Hexo 完成后,請執(zhí)行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。
$ hexo init blog路徑
$cd blog路徑
$ npm install
新建完成后,指定文件夾的目錄如下:
_config.yml
網(wǎng)站的配置信息,您可以在此配置大部分的參數(shù)。
themes
主題文件夾。Hexo 會根據(jù)主題來生成靜態(tài)頁面。
source
資源文件夾是存放用戶資源的地方。
新建一篇文章:
$ hexo new "articleName"
生成靜態(tài)文件:
$ hexo generate
啟動服務(wù)器。默認情況下,訪問網(wǎng)址為:http://localhost:4000/。
$ hexo server
部署:
$ hexo deploy
本地設(shè)置好后,接下來開始關(guān)聯(lián)Github。
關(guān)聯(lián)Github
1.創(chuàng)建倉庫
登錄你的Github帳號,新建倉庫,名為用戶名.github.io固定寫法。
終端cd到blog文件夾下,vim打開_config.yml,命令如下:
$ vim _ config.yml
打開后往下滑到最后,修改成下邊的樣子:
deploy:
type: git
repository:https://github.com/gonghonglou/gonghonglou.github.io.
gitbranch: master
然后執(zhí)行:
$ hexo generate或者:hexo g
此時若出現(xiàn)如下報錯:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
則執(zhí)行命令:
?$ npm install hexo --save
若無報錯,自行忽略此步驟。
再執(zhí)行配置命令:
$hexo deploy? ? ? ? ? ? 或者:hexo d
在執(zhí)行 hexo deploy 后,出現(xiàn) error deployer not found:git 的錯誤
執(zhí)行:npm install hexo-deployer-git --save
若你未關(guān)聯(lián)Github,則執(zhí)行hexo deploy命令時終端會提示你輸入Github的用戶名和密碼,即
Username for 'https://github.com'
Password for 'https://github.com'
hexo deploy命令執(zhí)行成功后,瀏覽器中打開網(wǎng)址?用戶名.github.io 能看到和打開http://localhost:4000時一樣的頁面。
為避免每次輸入Github用戶名和密碼的麻煩,可添加ssh key到Github。具體方法自行谷歌。
安裝theme
你可以到Hexo官網(wǎng)主題頁去搜尋自己喜歡的theme。這里以hexo-theme-next為例
終端cd到blog目錄下執(zhí)行如下命令:
$ git clone https://github.com/iissnan/hexo-theme-nextthemes/next
將blog目錄下_config.yml里theme的名稱landscape修改為next
終端cd到blog目錄下執(zhí)行如下命令(每次部署文章的步驟):
$hexo clean ? //清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)
$ hexo g? ? ? ? ? ? //生成緩存和靜態(tài)文件
$ hexo d? ? ? ? ? ? //重新部署到服務(wù)器
至于更改theme內(nèi)容,比如名稱,描述,頭像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中對應的屬性名稱即可, 不要忘記冒號:后加空格。NexT 使用文檔里有極詳細的介紹。
Hexo添加文章時自動打開編輯器
首先在Hexo目錄下的scripts目錄中創(chuàng)建一個JavaScript腳本文件。
如果沒有這個scripts目錄,則新建一個。
scripts目錄新建的JavaScript腳本文件可以任意取名。
通過這個腳本,我們用其來監(jiān)聽hexo new這個動作,并在檢測到hexo new之后,執(zhí)行編輯器打開的命令。
腳本內(nèi)容
// Hexo 2.x 用戶復制這段
var exec =require('child_process').exec;
hexo.on('new',function(path){
exec('open -a "markdown編輯器絕對路徑.app" '+ path);
});
// Hexo 3 用戶復制這段
var exec =require('child_process').exec;
hexo.on('new',function(data){
exec('open -a "markdown編輯器絕對路徑.app" '+ data.path);
});
隱藏網(wǎng)頁底部powered By Hexo / 強力驅(qū)動
打開hexo/themes/next/layout/_partials/footer.swig,使用””隱藏之間的代碼即可(隱藏后代碼如下),或者直接刪除。
為博客加入鼠標點擊顯示紅心
鼠標點擊小紅心在\themes\next\source\js\src文件目錄下添加love.js文件
love.js文件下載地址:
綁定個人域名
后期更新......