在 CentOS 7 上架設 Hexo 開發環境

Luyo

Published in

verybuy-dev

9 min readJun 23, 2017

本文將介紹在 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-admin 及 hexo-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 --generate 或 hexo generate --deploy 一次執行兩個動作。deploy 的設定詳見官網說明

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

#!/bin/bashhexo 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

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