O3noBLOG

前陣子有整理了一下部落格的東西，大致上作的事情是：

• 拿掉 Google Analytic
• 拿掉所有的 SNS 按鈕
• 拿掉 Disqus
• 換 web font 服務

首先是拿掉 Google Analytic 這件事，其實我已經想很久了，一部分原因是不想餵資料資料給 Google，另一個原因則是剛好現在舊的 Universal Analytic 已經停用了，一定要改成用 GA4，所以趁這個機會就乾脆的拿掉了，不過還是會好奇哪些內容比較有人看，所以又花了點時間研究了 web log 分析軟體，因為不想多架服務，老牌的 AWStats 介面現在實在是無法接受，所以現在選的是 goaccess 當成 terminal 工具來用，不過它其實還蠻強的，選項很多，要當成服務跑也可以。另外就是如果還是偏好前端的追蹤， Twitter(現在的X) 上也有朋友推薦了 GoatCounter 和 umami，分別是 golang 和 js 寫的服務，有開源也有線上的服務，有限度的服務使用額度，當然自架的話也可以，不意外的都需要資料庫，非開源專案的話也有一個 Plausible 看起來不錯。

第二個是 SNS 按鈕，其實以前有三個按鈕，分別是 Google+、Facebook 和 Twitter，然後我都是用 iframe 掛上按鈕的，這樣比較不用擔心直接掛第三方 js 的各種問題（隱私、安全），不過 Google+ 收掉了，FB 按鈕因為 Firefox container 的關係我其實也都看不到，後來忘了什麼原因也拿掉了，最後只剩下 Twitter 的，結果最近發現我掛按鈕使用的那個 Web Intent 也被改的無法在 iframe 內顯示按鈕了，所以就乾脆的剩下的全拿掉，最後只留下一個用 Web Share API 的按鈕。

然後是 Disqus，其實留言系統原理簡單不難，但是真的要做的話也是很麻煩，一來要有資料庫，這樣現在很多的靜態網頁產生工具就先死一票了、二來還要有能檔 spam 的能力，所以 Disqus 的出現真的是補了一個很大的缺口，我以前是很喜歡 Disqus 的，畢竟它是這種需求數一數二的先行者，該公司的工程師也很認真的研究 3rd party script 的技巧，我現在工作也有一部分是在寫 3rd party script，對此有興趣之餘，也對於這東西的麻煩之處很有感，不過現實就是開公司就是還是要賺錢，所以慢慢的它也是走向我比較不喜歡的方向，開始大量收集資料，然後甚至有人說開始有插入廣告了，不過除此之外，更大的一個原因是在我這邊的使用率實在太低，如果都沒人用的話，一直掛著也只是訪客被收集資料而已，於是我決定把整個迴響區塊都拔掉，帶來的副作用當然就是以前一些少數的留言也都消失了。

我在拿掉迴響後沒兩天，就剛好看到 HackMD 也拿掉 Disqus 的消息，跟著原推文下去找其實也有不少的替代方案，像是 cusdis、用 GitHub 的 giscus 和 utterances 等，其實 Wappalyzer 上也有些替代方案（然後也可以看到 Disqus 佔有率目前還很高）。

其實還有另外一種類型的替代方案，就是去支援新的 protocol，像是 ActivityPub 和 Webmention ，第一次看到 ActivityPub 加上靜態網站產生器的方案時，我就想起以前消失在 spam 的洪流之中的 trackback 機制，不過靜態網站產生器和 ActivityHub 相性不是那麼好，它其實也是和留言系統一樣，需要有 API endpoint 和資料庫，所以有辦法做到支援的選擇也沒很多，相關的服務和專案也相對不成熟，還需要不少手工；另外一個選擇 Webmention，則可以參考 Jason 的「透過 webmention 來搜集 blog 的社群迴響」，基本上是可以透過第三方服務來弄成純前端的方案。

最後一個就是 web font 了，其實本來沒有要調整這塊，只是上面幾項改完，發現網站幾乎要沒有追蹤器了，只剩下 Google Fonts 相關的 request，Google Fonts 一直是被歸類為潛在的追蹤器，實際上到底有沒有被偷偷用來當做追蹤器也無法證實，總之我就試著尋找替代方案，一開始想的是自己放檔案，因為我只有用到兩個英文字型，不過結果大小差了 10 倍，不進一步調整不行，就在這時候看到了 Laravel 因為 GDPR 的關係改用 Bunny Fonts 了，大概研究了一下，bunny.net 本身是 CDN 服務商，而 Bunny Fonts 就是主打無追蹤，所以 GDPR 沒問題，另一個特點就是介面和 Google Fonts 相容，也就是說只要把 domain name 換掉就好（我的狀況是還有 CSP 要修改）。

然後最後的結果就是如文章上面的圖片一樣，現在大部分頁面，EFF Privacy Badger 的檢查結果已經是沒有需要阻擋的東西了，只有部分文章有內嵌 Tweet 或 YouTube 影片的，就還是會顯示有潛在的追蹤器。

Fenced code block

var a = 1;

因為 MovableType 的反 spam 機制幾乎失靈了，最近廣告又太多，只好狠下心來換到 Disqus，其實是想換一陣子了，不過覺的話要花不少時間一直沒弄，結果果然弄了整個晚上，大概遇到三個問題。

其實 Disqus 對於轉移這件事做了不少工，不過我還是遇到匯出的檔案格式不支援的問題， Disqus 只支援 WordPress 的 wxr 格式，不過我的 MT 4 不能輸出這種格式，後來是使用 Disqus 的 MT plugin 來處理這個問題。

第二個問題是套用到頁面上的問題，因為這裡有使用 CSP，所以勢必要多開一些 domain，大概開了圖片和 script 的*.disqus.com和*.disquscdn.com，不過還有一個我不太想開的 unsafe-eval，目前只能先暫時屈服，正在找管道回報這問題。

第三個問題就是留言對應的 url 不正確，因為我是用 plugin 處理匯出匯入的，他用的網址就是 MT 內部認為的網址，不過在這裡這不是正確的網址，本來我是在頁面讀入的 script 內做處理，手動指定留言的網址，不過後來發現 Disqus 有 URL mapping 的功能，可以上傳 csv 檔來改網址，而且還支援下載現有的網址清單，設想蠻齊全的。

總之我就這樣換過來了，自己測試留言看來是 ok，還不知道是不是都沒問題了，因為這邊也很少人來留言啊，至於切換過來有什麼優點呢，最主要還是我不想處理 spam 了，再來我可以把 comment 進入點關掉，對網站來說安全些，還有可以把一些流量丟到外面（Disqus 是賺什麼啊？），剩下就是我可以用 Disqus 的一些特殊功能啦，像是訂閱討論串之類的。

對了，照片是隨便挑的，和內文沒關係～

改版算是一個段落了吧，這次主要是套用 Twitter Bootstrap ，然後直接用它來排版，同時也支援 responsive design ，所以用手機、平板電腦看這邊的效果也比以前好很多，同時拿掉很多畫面上的元件，一些 JavaScript 不是那麼必要的也都拿掉了，搜尋也改成用 Google 搜尋，越來越單純化了吧～

來更新一下近況，我之前有說過要寫一篇文章講一下我的 ID 由來，本來的計畫是想把前年的東京行的文章完成後在寫的，不過那篇文章一直寫不出來，因為那次行程對我蠻有意義的，結果就是一直寫不出來，所以最打算先寫 ID 來源那篇，不過來源沒什麼有趣的故事，只是多種東西的合成而已，不用太期待:P。

另外就是部落格這邊有些更新，本來是想要整個樣式大改，原來的目標是以可讀性為主，然後黑白主色，單欄的排版（比較不會有雜訊干擾讀者），不過實在是沒有個起頭，所以暫時還沒有進度，最近幾天發的文章比較多，想說短時間還是不會改版，所以就順便改了一些之前覺得不是很好的地方，CSS 也有微幅的修改，希望能夠讓訪客體驗更好點，其它就是還拿掉了引用和 OpenID 的支援，前者幾乎沒人用，後者實在是因為支援做的不太好，不然我自己還會用的說，大概就是這樣，最近預計要寫的文章還有三篇左右（隨時可能增加），應該也會維持一兩天發一篇的速度吧。

掛了將近一個月有餘，昨天終於先弄回來，中間一度少掉的文章在 Google Reader 裡都還看的到，所以復原文章也沒花上什麼心力，不過苦工少不了就是，另外在 暫時站 寫的文章也搬過來了，這幾篇同時有用 WTFPL 授權，還順便把 MT 升級到最新的4.25版，本來很想順便改版的，不過一直沒好好設計，這部份就先繼續放著了，反正目前版面我其實還蠻滿意的（除了XHTML實在有夠麻煩）。

剛剛研究的結果先紀錄一下，基本上是先連到mt目錄下的comment cgi檔案，加上一些參數會跑出登入畫面，這邊可以選擇想要用的第三方認證機制，透過第三方認證服務確定登入後，系統會產生一個cookie叫做commenter_name，有這個cookie的話就表是有透過第三方認證機制登入了，這時透過javascript把name和email兩個欄位藏起來，直接送出訊息，系統就可以正確的把該篇迴響歸到該帳號之下。

如果mt的安裝位置和部落格位置在不同網域名稱下，也可以使用cgi檔產生一段js碼，直接把commenter_name這變數指定好。另外有在第三方認證服務登入的情況下，送出的資料如果包含name，那會變成以表單送出的name為主，而忽略第三方認證的帳號，因此需要把該欄位藏起來。

花了不少時間總算弄完，中途主機root不知原因掛掉還重灌一次，最後有兩篇文章的附檔沒辦法找回來，都是HemiDemi的Firefox擴充套件，不過反正都是測試版的，所以就放著不理了，以後要是有新版在直接加註吧。

另外昨天看到hlb提到W3C的working group是開放給所有人加入的，還有一篇文章教人怎樣加入「 How YOU can join the W3C HTML5 Working Group in six easy steps」，我目前有在考慮加入，實際參與規格的制定好像還蠻有趣的，畢竟以前都只能跟著別人的腳步走。