Hexo優化:新增圖片圖床、更換文章閱讀計數器服務

架設 Hexo 約莫半年了,目前用起來還算滿意,網站的讀取速度很快,用 Markdown 來寫文章對我來講也很方便,但還是有遇到一些小問題。

  1. 1個月前NexT主題宣布他們要移除「full-image tag」,這讓我要重新改寫圖片的引用方式。
  2. 文章閱讀計數器服務 LeanCloud 宣布使用中國版如果不綁定自己的域名的話服務將會被禁用,必須要將域名提交給中國政府審查。

這篇文章主要是記錄我自己是怎麼解決這兩個問題。

圖床服務 Cloudinary

市面上的圖床服務蠻多的,像台灣人比較熟知的應該是 imgur ,而我個人是上網查詢到別人推薦的 Cloudinary,因為他除了影片外還支持影片上傳。

Cloudinary 的免費版本會給你 25 GB 的空間以及 25 GB 的頻寬,所以說如果你的圖片平均只有 200 KB(對網頁來講已經很大了)的話可以放 12,500 張圖片以及顯示 12,500 次圖片,我自己是覺得這樣對我來說已經蠻夠用了,如果會超出這個頻寬範圍的話代表我應該經營的還算有起色,可以直接付費了?XD

當然 Cloudinary 跟 Dropbox 一樣有方法可以獲得額外的空間和頻寬,如果以下都做完的話最多可以免費得到額外的 148 GB 空間,有沒有覺得其實超夠用了!

  1. 將你的「推廣網址」推到 Twitter 或是分享到 Facebook 上,可以得到 6 GB 空間。
  2. 追蹤 Cloudinary 的 Twitter 帳號和成為他們的 Facebook 粉絲,即可得到 2 GB 空間。
  3. 當有人透過你的「推廣網址」註冊成為免費用戶即可得到 3 GB 空間,成為付費用戶可以得到 7 GB 空間(上限 20 名)。

Cloudinary 推廣取得空間說明

此外,Cloudinary 還有提供分析工具,讓你知道哪一張圖片、影片顯示最多次,可以幫助你分析哪張圖片表現較好。

替 Hexo 更換文章閱讀計數器服務

NexT 主題官方支援兩個文章閱讀計數器服務,一個是使用中國的 LeanCloud,另一個是 Google 的 firestore。

原本我的部落格是使用比較簡易設置的 LeanCloud,但就像前述所說的,中國那邊越管越嚴格,加上我試著轉去 LeanCloud 的國際版但帳號一直無法驗證成功,我只好改投往 firestore 的懷抱了,缺點是轉移過去後要手動進 firebase 的專案後台一篇篇文章更改閱讀次數,不然就要重新開始了。

現在就來一步步教學大家怎麼使用 firestore 來幫部落格紀錄文章閱讀次數吧!

  1. 首先到 Firebase 網站按新增專案,並輸入你想要的專案名稱,如果你本身有在用 Google Analytics 的人在建立 Google Analytics 的時候可以先跳過,等等再進去專案內把原本使用的整合進去。
    Google Firbase 建立專案
  2. 點選新增網頁應用程式,然後一樣輸入你的應用程式名稱,不用勾選代管服務,然後按註冊應用程式。
    輸入應用程式名稱
  3. 接下來到左側的 database,按建立資料庫,選擇下方的「以測試模式啟動」,然後選擇 Cloud Firestore 的儲存位置。
    建立新的資料庫
    選擇以測試名稱啟動
  4. 更改資料庫的讀取和寫入規則,讓 hexo 可以紀錄你的文章閱讀次數。
    資料庫內的規則改寫

更改代碼如下

1
2
3
4
5
6
7
8
service cloud.firestore {
  match /databases/{database}/documents {
    match /articles/{any} {
      allow read: if true;
      allow write: if true;
    }
  }
}
  1. 至 Firebase 的專案設定找到 API KEY 和 Project ID 並更改 NexT 主題內的 _config.yml 設定文件。
    API KEY 以及 Project ID

更改_config.yml代碼如下

1
2
3
4
5
firestore:
  enable: true
  collection: articles # Required, a string collection name to access firestore database
  apiKey: AIzaSyA9Anvm5yaugqbcIb-zAs50yYr_spOayJ0
  projectId: hexo-teaching

上述作業都完成後應該就可以順利的紀錄部落格內文章的閱讀次數了,現在就執行 hexo ghexo s先去試試看吧!如果沒問題的話就可以用hexo d推送到正式端囉!

備註:文章標題中不能含有 ’/‘ 斜槓符號,不然 js 會報錯無法在文章外層正確顯示閱讀次數。

總結

希望以上兩點能夠幫助到也有在用 Hexo 的你們,如果有問題的話歡迎在下方留言一起討論。

參考資料

Read more

Wealthfolio,基本但非常夠用的桌面版股票資產追蹤軟體

Wealthfolio,基本但非常夠用的桌面版股票資產追蹤軟體

今年過年的時候接觸到了 Wealthfolio 這套開源的股票資產追蹤的軟體,那時候看他網站的介紹,頓時被他精美的圖表給吸引。但當初在匯入我過往的交易紀錄的時候遇到了很大的問題,他出現了一些錯誤但介面沒有很好的說明錯誤的原因,導致一些功能例如「Performance(績效追蹤)」的圖表因為我的歷史交易明細有問題但我找不出 bug 幾乎等於廢掉。 但在 2025/5/19 的時候作者發佈了大更新從 1.0 版本提升到 1.1 版本,新增了許多功能之外,對我來講最棒的是 log 和 error message 變得明確,它讓我知道我匯入的檔案造成了 app 的什麼問題,例如他會跟我說股票的股數有負數產生,我就可以回頭查原始檔案和原始交易紀錄在哪裡有誤,也的確發現了之前自己記錄的交易紀錄有一些小問題可以逐步修復。我花了整整半天的時間修復了我台股從 2014 年、美股從 2020 年開始的逐筆歷史,當看到終於在 Wealthfolio 正常運作的時候真的是非常感動,也趕緊進行備份,避免之後又要再重來一次。 🚀 Wealthfolio v1.

iOS 26 更新微心得,介面改變有感、功能提升有限

iOS 26 更新微心得,介面改變有感、功能提升有限

警語:iOS 26 現在還在 Beta 階段,很有可能隨時會有重大 Bug 出現,一定要先行備份再升級或是拿備用機來嘗鮮即可。 由於去年換了 iPhone 16,原本猶豫要不要更新 Developer Beta 版本,因為怕過熱或當機會很傷電池健康度,但就在我找了 WWDC 2025 的發表會影片來看之後,看到 Liquid Glass 這個美美的 UI 還是忍不住搶先更新嘗試了,而且這次竟然進化成從 Developer Beta 1 就開始更新了! 跟 iOS 18 比起來,在使用的操作上會有些微的 Lag(畢竟 UI 改成更耗效能的 liquid glass)以及手機更容易發燙一些(最近天氣熱更加重這個體感?),但是在我常用的 App 中沒有遇到什麼太嚴重的 Bug,

AI 浪潮下,身為專業工作者的我們還能做些什麼?

AI 浪潮下,身為專業工作者的我們還能做些什麼?

自己在 2 年前寫過一篇數位廣告的 AI 行銷時代,靠工人智慧幫忙的人工智慧文章,那時候針對了 Meta 和 Google 的 AI 廣告做了一番說明。2 年過去了,廣告系統的介面沒有太多改變,比較明顯的變動是 AI 加強了「增加創意數量」的部分。 Meta 這兩年在 AI 上比較重大的功能是開始利用 AI 去幫你的產品圖生成背景或是創造不同風格的圖片,甚至會用你原本的文案去新增出不同版本的文案。目的是要讓你的廣告有更多的排列組合,減輕廣告主(廣告投手)在生成素材和文案上的負擔,同時也可以讓使用者不要一直滑到一樣的廣告素材,造成廣告創意太快疲乏的問題。 Google 這兩年在 AI 上的更新我感覺比較多是針對 YouTube 這個廣告版位的調整,包含影片的剪輯、比例裁切、長影片變短影片等,而在搜尋廣告和最高成效廣告上沒有太多的變化。或許它在底層系統邏輯有更多的變動,因為現在在客群的部分有更細分成流失客、既有顧客、待開發顧客...等不同分類,等於是可以給系統更多標籤讓他去找到對應的族群。

ForeWhat,記錄你所預測的事情,增進你的思辨能力

ForeWhat,記錄你所預測的事情,增進你的思辨能力

你曾經心裡想過「這次股價應該會漲吧」、「我支持的球隊可以贏得總冠軍」、「選舉的結果跟我想的一樣」嗎? 與其讓這些想法每次發生後就流逝了,不如把它記錄下來、搭配信心指數,事後看看你是否值得相信自己。 ForeWhat 就是為了這件事而生的:幫你記錄你的思考過程,試圖提升對於未來看法的準確性。 為什麼我決定自己做一個預測的服務? 2023 8 月的時候,有用到一個自己很喜歡的 App 叫 Foresee,那時候也寫了一篇Foresee:追蹤你的預測,讓觀察這個世界變得更有趣文章來介紹這個 App。 我覺得把自己的觀察記錄下來,並且等時間到後看事情發生與否是一件有意義的事情,也可能是因為工作上的荼毒?因為行銷的工作要一直做出假設,並且設計做法去驗證原本的假設是否可行。這某種層面來說也是一種預測? 因為 Foresee 缺少了一些社群和篩選、排序功能,於是我想說也來試試看做一個自己的預測服務,並取名為 ForeWhat。 ForeWhat 的誕生歷程 2024 年 6 月份找了一個工程師朋友來著手製作這個網站,但跟之前幾次的合作一樣,一開始對方是有熱忱的,但隨著時間的經過或