Everblog ——使用 Evernote 寫博客

我是個重度 Evernote 用戶。在前幾年造博客輪子盛行的時候，我也基於 Evernote 造了個輪子，最近抽空拿出來修了修，順便記錄一下。

什麼是 Everblog?

Everblog = Evernote + Blog，即使用 Evernote 寫博客。Everblog 有幾個特點：

1. 簡單。使用默認的 SPA 主題三步即可生成博客，使用其他博客構建工具（如: Hexo）也只多了 everblog build 一步
2. 靈活。造輪子當然要利用好當前的生態，Everblog 支持多種 adaptor（目前支持 SPA、Hexo），每種 adaptor 可使用它們生態下所有 theme，即 everblog-adaptor-hexo 可使用所有 Hexo 的主題去構建博客），Jekyll、Ghost 等的 adaptor 也正在開發中
3. 安全。數據保存在 Evernote（多端同步，手機也可以寫博客），其他博客工具則會將文章存成本地文件

Everblog 設計難點與思路

在實現 Everblog 的過程中遇到幾個難點：

1. 資料少，官方的 evernote/evernote-sdk-js 沒有 demo，只能通過讀源碼去看和嘗試 api
2. Evernote 使用的獨有的 ENML 標記語言（類似於 HTML，添加了幾種標籤），所以通過 api 拿到 ENML 需要解析成 HTML 或者 Text，於是又造了兩個輪子：
1. enml2html: 將 ENML 解析成 HTML
2. enml2text: 將 ENML 解析成 Text（可以是 Markdown）
3. 國內印象筆記不支持公開鏈接，Evernote 國際版可以。所以印象筆記只能使用 Text（可以是 Markdown），不能使用 Evernote 自帶的富文本模式（如插入一張圖片）生成博客，因為無法生成外鏈，所以建議使用 Evernote 國際版
4. 使用富文本模式將筆記生成博客，如果有圖片和音頻之類的內嵌附件，需要將附件（如：img 的 src）拼湊成正確的地址（enml 格式中只給一個附件的 hash）。研究附件的外鏈地址格式，這個也稍微花了點時間
5. 最後遇到一個非常蛋疼的問題：在 Evernote 中創建 _config.yml，構建的時候拿到 _config.yml（ENML格式）轉換成純文本然後用 js-yaml 去解析，結果出錯，後來發現拿到的 yml 文本中竟然有 no-break space，而不是 space，所以在 enml2text 修復了空白符的邏輯。更多空白符見：Whitespace character

設計思路（想到啥寫啥）：

1. 一個 Evernote 筆記本對應生成一個博客。所以可以在 Evernote 創建不同的筆記本生成多個博客，方便管理
2. 一條筆記生成一篇博文。如果標題是 .md 結尾，則使用 enml2text，如果不是 .md 結尾，則使用 enml2html，見 everblog-adaptor-spa 代碼。筆記的創建時間，更新時間，標籤等信息都可以給到 adaptor，然後復用
3. 每個筆記本下一定要有一個 _config.yml 的筆記，對應各個博客構建工具的 _config.yml，這個無需多說。每次使用 everblog build 構建時都會讀取這個配置（必要時 dump 到本地 _config.yml）
4. clean 模式。ENML 轉 HTML 時，標籤內大量使用了內聯樣式（inline style）。everblog build 時可以添加 --clean 參數去除這些 style，防止跟主題的樣式衝突
5. 利用當前幾大靜態博客構建工具的生態（主要是很多好看的主題），如 Hexo，Ghost等。所以 Everblog 設計之初定位就是：everblog 用來獲取 Evernote 筆記和一些必要信息（如：webApiUrlPrefix，content，tags，resources 等等），然後交給 adaptor 轉化成其他博客構建工具所需的資源。如： /source/_posts/xxx.md + _config.yml 等文件

如何使用 Everblog?

第一次使用需要 4 步，以後只需要 第 3、4 步就可以了。

1. 全局安裝 everblog+填寫配置文件:$ npm i everblog -g$ vim ~/.everblogrc token: xxx, noteStoreUrl: xxx, notebook: myblog2. 下載主題, 如下載默認 SPA 主題 everblog-theme-spa:$ git clone https://github.com/everblogjs/everblog-theme-spa myblog$ cd myblog && npm i3. 打開 Evernote:- 創建筆記本 myblog- 創建配置文件 _config.yml，添加一些配置如：title，author 等信息。每種 adaptor 的主題要求的配置不一樣，根據主題來- 創建一些筆記4. 啟動 everblog:$ DEBUG=* everblog start

Tips: token 和 noteStoreUrl 從以下鏈接獲取：

https://www.evernote.com/api/DeveloperToken.action

圖文步驟如下：

1. 創建 _config.yml

1. 創建一些筆記

1. 運行 DEBUG=* everblog start 構建並打開構建成功後的主頁

使用 Hexo 主題

使用 Hexo 主題完整步驟如下：

$ npm i hexo-cli -g # 全局安裝 hexo-cli$ hexo init myblog # 初始化一個 hexo 項目$ cd myblog && npm i # 安裝依賴$ npm i everblog -g # 全局安裝 everblog$ npm i everblog-adaptor-hexo --save # 在當前 hexo 項目下安裝 adaptor$ echo "module.exports = require(everblog-adaptor-hexo)" > index.js # 在當前 hexo 項目下創建 index.js，引入 adaptor$ DEBUG=* everblog build # 使用 everblog 構建 hexo 所需文件$ hexo server # 啟動 hexo$ open http://localhost:4000/ # 瀏覽器打開博客主頁

如下所示：

Tips: 記得修改 _config.yml，填寫 hexo 所需的配置。

推薦閱讀：