把Obsidian變成寫Blog的空間

白龍 Lv3

就這樣經過一個月後,完成了這套天兵的想法

先來看看這套系統的結構

workflow

# 看起來超複雜的,但是邏輯基本上是清晰可行的,那就開始來做吧

問題討論

先看看我們總共有哪些技術是需要克服的

技術困難

Hexo

  1. 如何讓hexo可以在伺服器運行起來,變成一個可以執行指令的容器

檔案雲端

  1. 我是使用cloudreve作為我的雲端檔案儲存系統,不過要如何把東西同步進去和取出是一個問題

Obsidian

  1. 我要如何讓檔案可以同步,不是指同步到伺服器,還要在多個裝置上也可以同步
  2. 因為hexo我又自己寫自己的markdown parser,我要如何讓他在obsidian中呈現出來
  3. 我要如何在obsidian中可以執行指令

解決方案

# 註:這些都是後來的解決方案

Hexo

Q:如何讓hexo可以在伺服器運行起來,變成一個可以執行指令的容器

後來查詢hexo文檔後發現可以用

1
hexo.call('command', {arg})

來調用hexo指令,不過在中間又出現了一個很大的問題,就是像是hexo server是沒有提供停止伺服器的指令的,所以需要想停止伺服器只能在console中Ctrl+C,不過後來解決了(Q2下面)
接著只要再用express套件寫一個API伺服器執行指令就完成了YAA

Q2:Hexo 沒有停止指令要怎麼辦

翻閱原始hexo-server套件後發現其實hexo在call這個function時會回傳一個http server的物件,其中就有提供close()的fucntion,這樣這個問題就順利解決了….嗎

沒有因為後來發現就算伺服器停止了,但是下次在呼叫時就會出現問題,經過了解後發現可能是因為Hexo本生會去即時監控md檔案的變化即時更新,這可以是一件好事也可以是一件壞事
好事是這樣每次有變動的blog檔案上傳到伺服器不需要重啟整個伺服器
壞事是下次重啟時會出現我也不知道是甚麼的錯誤

那後來是如何解決的呢,問過chatGPT後發現是因為要使用new Hexo()才能,甚麼意思呢,其實我也不知道,不過我自己推理是這樣啦

1
2
3
因為hexo每次被呼叫時都會建立一個即時監控檔案系統
但是在關閉server close時不會去刪除或關閉他,所以要去建立一個新的Hexo()
也就是 const idk = new hexo()

# 以上純屬猜測,有js大老可以解釋,本人很樂意了解細節

雖然有hexo.exit(); hexo.unwatch()指令,但是我是過後都沒有效果,所以我最後的解決方案是先建立一個hexo物件

1
let hexo_instance = new Hexo()

在hexo server被關閉後自動刪除

1
hexo_instance = null

下次如果需要再建立啟動hexo server就在宣告一個新的物件,不過我一開始有擔心這樣記憶體會不會被占滿,問過GPT是說Nodejs有自動回收系統,會把它清理掉,不知道是不是正確的

檔案雲端

Q:我是使用cloudreve作為我的雲端檔案儲存系統,不過要如何把東西同步進去和取出是一個問題

這個就比較簡單了去翻閱Cloudreve後發現她其實有提供API,不過缺點是他不能讀取,如果要讀取只能一次把檔案下載下來,而且因為我需要一次下載大量的檔案,我怕這樣會造成性能問題

好在後來我發現Cloudreve有webdav的功能,並且後來製作發現我一定需要使用這個webdav功能,於是最後來我就決定用webdav來做為同步檔案的系統了

Obsidian

Q:我要如何讓檔案可以同步,不是指同步到伺服器,還要在多個裝置上也可以同步

有玩過Obsidian的都知道他有插件功能,因此在上面搜尋了一下發現有一款插件叫做Remote Sync,仔細看一下設定發現他支援WebDav的同步方案,回應了剛剛檔案同步的問題,於是就選用他了

Q:因為hexo我又自己寫自己的markdown parser,我要如何讓他在obsidian中呈現出來

這個就真的是一個很大的障礙了,首先Obsidian不支援你直接去改或加入自訂的Parser,經過很長很長的調研,我發現網路上的做法都是把東西放在一個codeblock然後再去渲染,但是…

我覺得很醜

但是還是找不到可以插入自訂markdown 語法的方案,所以最後我決定這樣搞

  1. 使用者的筆記
  2. 執行指令後會再./Preview資料夾生成相對的檔案
  3. 檔案內容為自己的Makrdown Parser產生的Html
  4. 用預覽模式就可以即時preview自己的Md了

有點簡短,所以這邊再詳細解釋一下
後來我的解決方案是放棄直接用內建的Preview功能,我直接在插件中安裝Makrdown-it(渲染markdown的套件)渲染html再加上自己的Makrodwn Parser,最後把生成出來的Html放到一個.Md檔案中,再用Obsidian的內建Preview功能預覽我的Html,因為Obsidian不會去編譯我生成出來的html,就這樣…解決了這個困難

雖然做到這就基本上可以使用了,不過為了讓我的使用體驗變好,我加入了自訂更新、自訂同步、自動切分頁等功能,要認真了解在私我或下面問我都會盡力回答

成果展示

Markdown預覽

成果
成果
成果
成果

自製差件指令

成果

雲端檔案同步

成果

Hexo + API 伺服器

成果
成果
成果

相關程式碼

Hexo Server

https://github.com/Whitedragon115/Whitedragon115.github.io/blob/main/index.js

Obsidian Plugin

https://sourceb.in/Y7frTXJFcD