在 CentOS 7 上架設 Hexo 開發環境

本文將介紹在 CentOS 7 上安裝 Hexo 的開發環境會遇到的問題和解決方法。

為什麼本文只強調「開發環境」呢?因為 hexo 雖然是 nodejs 寫的,但它能夠將整個網站內容輸出成靜態檔案,也就是你的 production 的環境只需要把 web server 跑起來就夠了。

那麼一定要將開發環境跟 production 環境分開嗎?

基於以下幾個理由,這個問題我建議的答案為「是」:

  • hexo server 指令可以直接將 web server 跑起來,在開發環境相當方便,但它不提供 daemon 的功能,所以不建議用這指令當做 production 環境的 web server。
  • Hexo 預設沒有後台管理介面,需要安裝 plugin (目前有 hexo-admin 及 hexo-hey 兩套),除非你想用 command line 來管理你的部落格……。
  • 如果你在 production 環境安裝了後台管理介面,你就必須設定帳號密碼,除非你不怕別人進你的後台亂搞;如果你設定了帳號密碼,你就必須有 https 憑證,除非你不怕讓你的帳密在網路上裸奔。
  • 基於上一點的緣故,我不建議在 production 環境安裝後台管理介面,即使你有 https 憑證亦然,因為其實你只要把後台放在開發環境,要用的時候再跑起來就可以了,然後帳密設定越簡單越好 (因為會寫死在檔案裡),再加上版本控制 (就算後台被 hack 也可以簡單還原),這樣就幾乎不會有什麼安全性問題。要更新 production 端的內容時可以用 hexo generate 指令產生靜態檔案,然後用 hexo deploy 將這一包靜態檔案佈署到指定的位置,例如 git repository、heroku、rsync 等等,甚至可以用 hexo deploy --generate 一次做上述兩件事情。
  • 結論:本文僅供想將開發環境設置在 CentOS 7 上的網友參考,production 端除了 web server 以外可以不用安裝其他東西。當然你如果想把開發環境和 production 環境放在同一台機器也沒問題,那就是分成兩個目錄然後設定 rsync 做 deploy 即可。

開機器

開一台 CentOS 7 的機器並 ssh 進去,如果沒有特殊需求就都選最低階的規格就可以了

安裝 Node.js

參考官網安裝方法

$ sudo su
# yum -y install epel-release
# yum -y install nodejs

開帳號、設定密碼、切換身份

# useradd hexo
# su hexo
$ cd

安裝 hexo-cli

$ npm install hexo-cli -g
npm WARN checkPermissions Missing write access to /usr/lib/node_modules/hexo-cli
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
/usr/lib
└── hexo-cli@1.0.3

安裝失敗,原因是沒有安裝的權限,必須用 root 才能安裝,但不應該什麼都用 root 做才對,辜狗了一下找到 npm 的官方解法

$ npm config get prefix
/usr

走 Options 2

$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc
$ npm install -g jshint
/home/hexo/.npm-global/bin/jshint -> /home/hexo/.npm-global/lib/node_modules/jshint/bin/jshint
/home/hexo/.npm-global/lib
└─┬ jshint@2.9.4
├─┬ cli@1.0.1
(下略)

這邊把 ~/.profile 改用 ~/.bashrc,這樣以後登入才會自動載入這個 PATH 的設定。

到這邊就可以使用 local 的 npm 指令了,再次嘗試安裝 hexo-cli

$ npm install hexo-cli -g
└─┬ hexo-cli@1.0.3
(略)
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

雖然最後有警告訊息但基本上是安裝成功。

初始化 hexo

$ hexo init blog
INFO Cloning hexo-starter to ~/blog
WARN git clone failed. Copying data instead
WARN Failed to install dependencies. Please run 'npm install' manually!

失敗,結果是因為還沒安裝 git,切換回 root 安裝一下

$ exit  # 切換回 root 身份
# yum -y install git
$ su hexo
$ cd

再次嘗試 hexo init blog

$ hexo init blog
INFO Cloning hexo-starter to ~/blog
Cloning into '/home/hexo/blog'...
(略)
INFO Start blogging with Hexo!

到這邊會產生一個 blog 資料夾

$ cd blog
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

到這裡就大功告成了,可以用瀏覽器打開網址 http://{機器的IP}:4000 來打開預設的部落格首頁。

如果有照著上述流程做的話,應該是不會有問題,但我第一次做的時候,因為對 npm 不是很熟,不知道是因為哪個步驟出錯,更新了一大堆東西、繞了一大段路才完成。所以建議如果你的問題是上面沒有提到的,那就乾脆重開機器、重做一次可能會比較快,如果是用自己既有的開發環境,怕把它弄髒的話,也可以嘗試用 Docker 來跑,搜尋 “hexo docker” 就可以找到一些 repository。

另外,hexo server 預設是用 port 4000,如果要改話可以用 -p 來指定,例如 hexo server -p 5000 ,但是沒有辦法使用 port 80,除非你有設定 sudo 權限。但因為這是開發環境,所以也不需要用 port 80;而前面也解釋過,production 環境不需要安裝 hexo 所以也不會有這個需求。


安裝後台管理介面

Hexo 的外掛列表裡目前可以找到兩套後台介面:hexo-adminhexo-hey

安裝 hexo-admin:

npm install hexo-admin --save

安裝 hexo-hey:

npm install hexo-hey --save

兩種管理介面的設定方法略有不同,請參見各自的 repository 說明。另外,這兩個套件是無法同時使用的,若要換掉的話要先把原先安裝的移除掉,例如

npm uninstall hexo-admin --save

更新佈景主題

Hexo 的佈景主題目前也有不少供選用,安裝方式是直接 git clone 下來到 themes 目錄底下,然後更新專案根目錄 _config.yml 檔裡 theme 值。例如安裝 clean-blog 這個佈景:

$ git clone https://github.com/klugjo/hexo-theme-clean-blog.git themes/clean-blog

用編輯器打開 _config.yml,找到 theme 字段,預設會是 landscape,將其更新:

theme: clean-blog

存檔後重啟 hexo server 即可。另外,每個佈景主題的子目錄底下都會有自己的 _config.yml 以供調整,這部分就要看每個佈景的設計者怎麼安排了,如果這些設定沒辦法符合你的需求,就自己想辦法去改 css 或 js 原始碼吧。


佈署到 production 環境

一開始有提到,可以使用 hexo generate 來生成靜態檔案,生成出來的檔案會被打包在 public/ 目錄底下,接著就可以用 hexo deploy 來佈署到指定的位置。你也可以用 hexo deploy --generatehexo generate --deploy 一次執行兩個動作。deploy 的設定詳見官網說明

hexo deploy 內建的佈署目的地沒有你要的,你也可以自己想辦法把 public/ 弄到你的目的地。例如我最後選用的 production 環境是 AWS 的 Elastic Beanstalk,就是到 public/ 底下用 EB CLI 指令集做初始化並創建環境 (因為 public/ 底下沒有 npm_module 目錄,若在 Elastic Beanstalk 選用 Node.js 會無法啟動,這邊我是乾脆選 PHP 環境),然後回到專案根目錄新增一支簡單的 shell script:

#!/bin/bash
hexo deploy --generate
cd public
eb deploy

以後要發佈更新的時候,只要執行這支 script 就可以了。


指令整理

整理一下開新機器的情境下要做的前置作業:

$ sudo su
# yum -y install epel-release
# yum -y install nodejs
# yum -y install git
# useradd hexo
# su hexo
$ cd
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc

以下是初始化 hexo 的 SOP

$ npm install hexo-cli -g
$ hexo init hexo
$ cd hexo
$ npm install
$ hexo server

後面就看你自己要怎麼玩囉。