Hugo

​ 部落格留言系統我自從 WordPress 轉來 Hugo 這段時間以後，已經試用過好多種 早期 WordPress 留言有很多都只能忍痛直接拋棄，轉 Hugo 之後用過一段時間 Telegram Comments App 但因為 Telegram Comments App 有人留言後我並不能主動收到通知，所以又只能拋棄。。 接著用 Valine 但也是用幾天而已就又換掉，因為 Valine 實現留言 email 通知的功能有點奇特 什麼時候會被他依賴的後台 LeanCloud 弄掉都不知道。。嗯 🧐 最後就無奈只能轉去 Disqus 了 🤷‍♂️ 但是 Disqus 跟 Google Analytics 一樣有個毛病，他們是商業公司會主動吸收、蒐集很多無關的[資料]^(個資) 雖然 Disqus 可以手動 Opt-Out，但是來你網站的人不一定每個人都會去設定，於是就一直在找機會要換掉 ​ 前幾天在爬 Hugo 說明書，想要找找更多留言系統替代品的時候 發現一個可以依賴在全球最大同性交友網站自己的 Repo 上面的留言系統，名字叫「Utterances」 搜一下發現同類型還有 Gitalk、Gitment，其中 Giment 在網路上評價普普，似乎有權限要太多的問題 然後當我正在猶豫不知道要採用哪一款的時候 正在使用的 Hugo 主題 LoveIt 剛好更新加入 Utterances 留言系統的支援，Hugo 官方推薦加上主題原生支援 於是就有了這篇文章。。。 🥳 ​ ​ Utterances 安裝設定三步驟 Github 新建一個新的公開 Repo 打開 Github 網站，準備新建 Repo： https://github.com/new ​ ​ 如上圖，記住自己取的名稱即可 以上圖為例，稍等我要設定 Utterances 的 repo 就會是 jkgtw/commentsforjkgtwblog ​ 為新建 Repo 安裝 Utterances app 打開 Utterances 的安裝網頁： https://github.com/apps/utterances，進入後點選 Install 的按鈕 ...

​ 部落格從 WordPress 轉到 Hugo 靜態網站以後，一開始沒裝網站追蹤器 原本想說可以用 CloudFlare Analytics 就好，但缺點很明顯像是「熱門網頁」還有「推薦來源」都沒辦法得知 所以之前一段時間裝了 Google Analytics，不過這玩意實在太惡名昭彰了 谷歌除了收集過多我不需要的使用者資料以外，也是很多廣告黑名單的常客，有裝等於沒裝一樣。。。🤷‍♂️ 直到最近看見目前使用的主題作者加入了一個 Fathom 網站追蹤器支援，所以我就立刻停掉 Google Analytics 了～ ​ Fathom Pro 注重隱私且符合 GDPR + CCPA Fathom 有提供兩種方案，其中一個是 Pro 的付費方案 每月 10 萬 Page views 的網站或者部落格最低只要 14 美金 另外還有提供 20 萬以及 40 萬一直到 200 萬以上的方案，200 萬以上就需要自己跟他們好好談談價格了～ ​ ​ Fathom Pro 共有四大特點： 即時的統計資料，管理後台簡約，無複雜的操作沒有一層又一層的目錄，完整資料在同一頁展現 無任何 Cookie、不收集個人資料，完全符合 GDPR 跟 CCPA 在一個付費方案裡面你可以安裝在無限網站上，共享同個 Page views 額度 js 腳本迷你高效，即使有巨大流量，Fathom 也不會拖慢你網站速度 ​ 👆 看看官網上面精美的插圖 👻 ​ Fathom Pro 的後台管理頁面一點都不囉嗦，在同一頁面就能完整清晰看見你網站的重點報告 ​ ​ 其實對我而言，需要知道的也就是上圖的熱門網頁與推薦流量來源即可 最多可以再搭配 CloudFlare Analytics 知道流量大部分都來自哪個國家就很滿足 ...

​ 最近把部落格換到 Hugo 靜態網站後，有些人陸陸續續來私聊我一些相關事情 有人想要丟到 Github 上面，有的人想丟到 Netlify 上面，因為如果網站都是文字的話其實佔不了太多容量 上面兩個提供的免費方案只要流量不會太大的個人部落格，都可以輕鬆達成任務 而大一點的影片可以丟到 Youtube 之類的網站解決，主要是部落格圖床問題比較多 今天推薦一下全免費的 Hugo 部落格解決方案：Typora + uPic + imgur ​ ​ Typora 如果你在找一款免費卻一點也不輸付費 Markdown 的書寫軟體，Typora 你一定要試試看！ 你在試用過一段時間以後一定很難相信這是一款全免費的軟體，因為功能非常完整且專業 還是跨平台的，真的佛！特點如下： ​ 所見即得的即時預覽 界面優雅極簡，無花俏不實的功能，操作時不拖泥帶水，整體流暢 Markdown 語法支援完整，偶而穿插一點 html code 也沒問題 拖曳快速插入圖片以及全自動圖片上傳自定義圖床空間 支援自訂、更換佈景主題 專注模式跟打字機模式，讓你心無旁騖，效率提升 up up ​ 👆 界面極簡，可以專注在寫作上 ​ uPic + imgur 這套 macOS 免費開源輕巧的圖床上傳工具是在 Typora 圖片上傳選項中發現的，安裝非常簡單 有安裝 Homebrew 的人只要一行即可安裝 $ brew cask install upic ​ 沒有的話也可以直接到官方 Github release 網頁手動下載： https://github.com/gee1k/uPic/releases ​ ​ uPic 支援的圖床服務眾多，大部分是中國的服務比較多，國外的有 Amazon S3、Github 跟 imgur，也可以自建圖床伺服器 推薦可以直接使用 imgur 的服務，牌子老、無限上傳跟流量（只有 1 個小時內 1 個 IP 只能上傳 50 張的限制） ...

​ 前兩天終於成功從 WordPress 切換到全靜態網站的 Hugo，切換過程還算順利 切換之後有發現 Telegram 留言板跟 RSS 輸出有點問題，就趕快動手調整一下 Telegram 留言板目前還太陽春，有人在文章下面留言，我居然不會收到通知，忍痛棄用 還是換上 Disqus 的留言板，缺點就是免費版會有個性化廣告投放與追蹤 如果不想要有太個人化的追蹤可以點留言板下面的「Do Not Sell My Data」，然後跳到他們網頁按下「Opt Out」即可 ​ ​ RSS 的部分我來來回回在 Hugo 說明書跟設定檔案調整與測試，目前也算是可以正常全文輸出 整個新站上線之後，大致還算穩定，因為少掉資料庫與 php 等等其他依賴，系統消耗少很多，速度提升整個 up up 以下簡單記錄一下這次 WordPress to Hugo 搬家的過程～ ​ ​ Hugo 環境安裝 macOS 上面安裝非常簡單，如果你有安裝 HomeBrew 的話，只需要一行指令即可完成安裝 $ brew install hugo ​ 安裝完畢後，也只要一行指令即可完成一個簡單網站基礎設定檔與資料夾 $ hugo new site mynewsite ​ 接著切換到該資料夾裡面，即可看見 Hugo 幫你自動建好 config、themes、layouts、content。。等等 再來就是去挑一個你喜歡的主題，Hugo 官網有列出很多但不是全部，我目前選的是 LoveIt 功能非常多，多語系、說明書詳細、可客製化程度高且支援 Darkmode 自動切換。。等等 主題的作者維護也非常勤勞，且最近也積極聽取使用者反饋的建議修改以及增加功能 只要依照 Hugo 說明書跟主題設定檔案，隨著你自己的環境逐條設定過去就可以，整體難度不是很高～ ​ 設定完畢後一個新的 Hugo 環境就全部完成，輸入下面指令 Hugo 會自動幫你新建一個符合你主題跟設定的 Markdown 檔案 ...

​ 用 WordPress 已經用好幾年了，WordPress 主題跟外掛資源多多，大概你想要的功能大部分都有人寫好了 初期建立時候我還買了幾套佈景主題跟外掛，我安裝的外掛數量應該也算普普通通？最多時候有裝到二十多個 後來精簡到十五個左右，如果再極端一點可以縮到十個左右 雖然 WordPress 這種 CMS 架構非常強大，但缺點就是跟 Windows 系統一樣本體隨著時間越用越腫了。。。 ​ ​ 另外就是 CMS 動態網頁的最佳化實在有夠難，有數據庫、php 然後又有 html + css + js，對於我這種非網頁工程師 看到 Google PageSpeed Insights 分數低，就算看著谷歌給的優化建議，也還是無從下手，而感到無力。。。 但是不可否認 CMS 架構在搭建、使用跟訪客交互上有明顯優勢 ​ 後來偶然在某個網頁看見介紹 Hugo，可以使用 Markdown 的寫作方式，讓 Hugo 快速渲染出全靜態的網頁 因為是全靜態網頁，沒有數據庫之類需要資料查詢、傳送。。等等，所以整體網站的加載速度會超快！ 而靜態網頁本體缺少與訪客交互的功能，像是每篇文章底下的留言板，但這個留言功能也有外掛來實現 看到 Hugo 社群比較多人用的第三方留言板有 Disqus 或者 Facebook 留言，這些都能被無縫整合到 Hugo 裡面 ​ 所以前幾個禮拜沒有考慮太多，就用著閒餘時間慢慢看看與摸索 Hugo 的說明文件 再挑了一個開發活躍且看的順眼的簡約主題，終於在前幾天把大部分資料都順利轉換成 Hugo 了～ ​ 再來說說目前部落格從 WordPress 切換過去 Hugo 之後的損失 比較明顯的就是目前所有留言都無法搬過去，因為都是存在伺服器本地上的資料庫 Hugo 全靜態架構沒有數據庫的存在，所以只能全部放棄，之後會採用 Telegram Comment Bot 的留言板（？） 再來就是目前有使用 email 訂閱的，以後也無法主動發信通知，請改為 RSS 訂閱 這幾天再稍微把新主題的設定與細節調整一下，還有伺服器的 nginx 設定都重寫一下就可以完全切過去 等完全切換去新站並且穩定後，再來分享 WordPress 轉換 Hugo 的過程～😆 ...