Publii 的 Preview 點了沒反應？

幾天前，Shuyu 在用 Publii 的時候遇到了問題，看到了 JN 來幫你 所以寫信來問我： 讀了你之前分享用 Publii 架站的文章覺得很心動， 今天也試了用 Publii，遇到一個問題 我建立新網站以後， 點右上角的「Save & Preview」想預覽網站， 可是試了好幾次，Rendering 跑完以後都不會出現畫面。 點左下角的「Preview your changes」也是同樣的情形。我需要先把 Server 連好才可以預覽嗎？還是我的電腦的問題…… （……以下恕略） 其實這個坑我也踩過了，那我就來分享一下這個問題要怎麼解決~ Publii 的 Preview 是怎麼運作的？ Publii 和 Hugo 之類的 SSG 有一個不太一樣的地方：它不會在背景起一個 local server，而是直接把組裝好的靜態檔案用瀏覽器打開。 換句話說，Publii Preview 其實就只是「幫你用瀏覽器打開一個本機的 HTML 檔案」。 我在 Linux 上也有遇到這個問題，但在 Windows 上沒有。真正的原因我還不清楚，猜測是 Publii 嘗試呼叫系統預設瀏覽器時出了什麼差錯之類的。 （但說不定跟作業系統、桌面環境都沒關係啦，再留給大大研究，然後去開 PR1） 解法一：直接找到檔案用瀏覽器打開 既然 Preview 只是打開檔案，那就直接手動打開就好了呀！ Publii 會把產生的靜態網站放在使用者資料夾底下的 Publii 資料夾，大概是在這個位置： Windows：C:\Users\你的名字\AppData\Roaming\Publii\sites\<換成你的網站名稱>\preview macOS：~/Library/Application Support/Publii/sites/<換成你的網站名稱>/preview Linux：~/.config/Publii/sites/<換成你的網站名稱>/preview 找到以後，把裡面的 index.html 用瀏覽器打開、或是直接拖到瀏覽器裡面就可以了~ 這麼做的缺點是每次 preview 都要重開一次，有點麻煩，且看解法二： 解法二：live-server 如果想要改了之後自動重新整理，可以用 live-server。 確認 npm 已經安裝了：npm -v 安裝 live-server：sudo npm install -g live-server cd 進到 preview 的資料夾：cd <換成你的 preview 資料夾路經>（路徑參考 上一個解法） 啟動 live-server：live-server 它會自動開啟瀏覽器，而且在每次 preview 的時候自動重新整理！ （如果沒有瀏覽器沒有自己開起來的話，就自己去 http://127.0.0.1:8080/） 如果你習慣用 VS Code，也可以裝 Live Server extension，用 VS Code 把 preview 的資料夾打開，然後按右下角的 Go Live 就可以嘍~ （如果沒有瀏覽器沒有自己開起來的話，就自己去 http://127.0.0.1:5050/，Live Server extension 預設的 port 是 5050） 結語 希望有幫到想要用 Publii 的新朋友，也可以去看看 Shuyu 心路歷程~ 如果還有問題也歡迎讓 JN 來幫你！ 這不就是大公司徵才的時候最愛的「貢獻開源」嗎！就不跟大家搶了：P ↩︎