靜態網站 Hexo + Firebase

測試使用 Hexo 建立一個最簡單的迷走部落格。

Hexo 是個「靜態網站製作工具」,StaticGen 根據 GitHub 上的打星數量統計,這類工具最流行的是 Jekyll,但它是 Ruby 架構下的程式。為了讓修改與學習的焦點集中,優先挑選 JavaScript 與 NodeJS 環境的工具,就選擇了 Hexo [1]

「靜態網站」是個有趣的概念,既是返璞歸真,卻也極端前衛;為了持續探究,不選擇擺在 GitHub Pages 或 Nitrous PubStorm 這種專放靜態網站的場所,改用 Google Firebase 存放。

安裝

工作站(Mac)上必須預先安裝好 Node 與 Git,個人使用 Homebrew 安裝 Git,但以手動模式安裝 NVM 程序,再安裝了 Node v4.5.0 LTS 版本。

一行指令將 Hexo 主程式安裝到全域環境:

1
$ npm install -g hexo-cli

接著新增一個專案:

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

Hexo 3 提供本地檢視的伺服器環境獨立成了個別模組,也需要預先安裝:

1
$ npm install hexo-server --save

從寫一篇新文章開始:

1
$ hexo new "My New Post"

跑個伺服器在本地檢視

1
$ hexo server

生成靜態檔案

1
$ hexo generate //=hexo g

清除舊檔案

1
$ hexo clean

部署

Hexo 有一個特殊的部署指令,必須搭配特定服務的外掛。例如安裝 npm install hexo-deployer-git --save 之後,修改設定檔中的 deploy 區段,最常用的就是將分支指定到 gh-pages,直接使用 GitHub 預設的免費靜態空間;搭配其他外掛好像也能部署到其他服務。

但目前使用 Google Firebase hosting,除了方便的靜態網站部署功能,未來還可以搭配 Auth, Storage, Database 等不同服務使用。


  1. 第二名的 GitBook 並不是一般的靜態「網站」生成器,而是根據特殊檔案架構與格式製作、發布電子書的工具。

avatar

閱讀迷走

「小型工具帶來一種完成工作的方法,也帶來一種實現自我變革、社會變革、最終實現世界變革的途徑。」