使用 Hexo 在 GitHub 部署 Blog
本來一直不是很想用 Hexo,因為覺得很多人使用,所以有使用另一種 Hugo 來架設 Blog,但是用完一直覺得不合口味,原本打算就將就著用。
剛好看到 Hexo 最多人使用的主題 - Next,感覺還不錯,真香,就來裝裝看吧!
前置作業
安裝需求
需要安裝:
- Node.js
- Git
以下方式為 Mac 使用者方法,其他作業系統請詳閱官網
- 安裝 Xcode
首先到 App Store 安裝 Xcode,安裝完成後,
開啟它並前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具。
- 安裝 node.js
使用 NVM,或是直接用 HomeBrew 安裝:
1 | $ brew install node |
- 安裝 Hexo:
1 | $ npm install -g hexo-cli |
- 完成後可以輸入指令,看看有無安裝成功,成功的話會顯示版本:
1 | $ hexo version |
我的版本是:
hexo: 4.2.0
hexo-cli: 3.1.0
建立專案
在指定資料夾建立檔案:
1 | $ hexo init <folder> |
完成後會建立以下資料:
更改主題與其他設定
主題選用的是 Next,更改步驟如下:
- 把 next 這個主題 clone 下來:
1 | $ git clone https://github.com/theme-next/hexo-theme-next themes/next |
- 找到 /_config.yml,打開修改:
1 | # Extensions |
- 網站設定:
1 | # Site |
其他一些細部設定就可以自己慢慢摸索。
如果要先看看網站的樣式,可以啟動本地端的 server:
1 | $ hexo server |
寫作
接下來,大概設定完就可以開始建立文章了。
指令是:
1 | $ hexo new [layout] <title> |
Layout 有 3 種,分別是:post、page(頁面)、draft(草稿),
假設要發一篇檔名為 Hello-World 草稿的話:hexo new draft Hello-World
如果要將 draft 發布為 post 的話,就鍵入:
1 | $ hexo publish [layout] <title> |
把網站部署到 GitHub
既然都做的差不多了,就可以開始把網站部署到 GitHub Pages。
新增名為
<username>.github.io
的 repo,例如:bucky0112.github.io
安裝 hexo-deployer-git 這個插件:
1 | $ npm install hexo-deployer-git --save |
- 修改 /_config.yml:
1 | url: https://username.github.io |
- 上傳網站,執行:
1 | $ hexo deploy |
- 接著需要等待一些時間,讓子彈飛一會,就可以去你的網站看看成果了。
1 | https://username.github.io/repo.github.io |
Hexo 常用指令
以下是之後再使用 Hexo 發佈文章時常用的指令:
1 | $ hexo generate #產生靜態檔案 / hexo g |
本部落格所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Bucky's Code Journey!