Skip to content

使用 hexo-browsersync 自動刷新瀏覽器頁面

Published: 2 分鐘

使用 Hexo 寫部落格文章時,雖然 VS Code 有 Markdown 的預覽延伸套件,但因為預覽並不支援主題所使用的 image 標籤,在發布前還是需要在瀏覽器看實際呈現的結果。雖然知道 Hexo 有 hexo-browsersync 以及 hexo-livereload 插建可以利用,但按照說明一直無法設定成功。

Markdown preview

直到昨天再次嘗試找問題時,發現 hexo server 回傳的網頁內容不完整。所以,當初無法正常刷新頁面的原因似乎跟 Hexo 在文章長度太長時沒有正確傳回完整 HTML 內容,導致 Browser sync 插入的 JavaScript 腳本沒有被執行,自然就無法刷新頁面。因為在預覽文章內容時呈現的結果是正確的,就沒有想到 HTML 原始碼被截斷的可能。幸好,知道了可能原因就來動手解決吧!

解法其實也很簡單:在 Hexo 的 _config.yml 檔案中,server 區段加入 compress: true 如下所示:

server:
  compress: true

雖然不知道是否根本解決,但到目前為止瀏覽器都能自動刷新了。

參考資料

郭信義 (Sam Kuo)

奔騰網路科技技術長,專長分散式系統、Web 應用與雲端服務架構、設計、開發、部署與維運。工作之餘,喜歡關注自由軟體的發展與應用,偶爾寫一下部落格文章。