為什麼這個網站存在？

學習任何新技術長期以來的一個問題是，你在網路上或從各種 AI 得到的大多數文件與範例都太過瑣碎，導致你完全無法判斷這項技術或你對它的實作，是否能承受真實且複雜的工作負載。最典型的例子就是大量的待辦清單（to-do list）範例。

我計畫了一個基於數個技術假設的 SASS 專案，這些假設在嘗試建置真正的專案之前都需要先測試；而像這樣的個人檔案網站，由完整的 CMS 後端驅動，複雜度剛好足以值得做一次正式的生產級建置，同時又簡單到不至於花太久時間拼起來；另外還有一個好處：如果一切順利，我就能得到一個效能良好的個人檔案網站，並且會是一個很好的測試平台，用來進行更多技術實驗。

以 Cloudflare 作為部署目標

Cloudflare Workers https://workers.cloudflare.com/ 乍看之下似乎是部署複雜應用程式的一種極度便宜的方式。後端開發看起來簡單且穩健，而 OpenNext https://opennext.js.org/ 套件似乎提供了一種高效率的方式，讓你用 Next.js https://nextjs.org/ 開發前端並部署到 Cloudflare。

我懷疑這個網站不會吸引太多真人流量；不過，我會盡可能把更多網頁搜尋與 AI 爬蟲流量導向這裡。如此一來，我應該就能弄清楚在 Cloudflare 平台上跑一個繁忙網站的實際成本。

讓這個網站比它應該的更複雜

內容管理後端（CMS）

老實說，這個網站以目前的樣子，可能用一個寫程式代理在幾個小時內就能拼湊出來；然而，一個嚴肅的系統不應該為了修改基本內容就必須重新部署。因此，本網站使用一個完整的 CMS：以 Payload CMS（https://payloadcms.com/）為基礎，並作為獨立的 Cloudflare Worker 進行部署。

Payload 本身使用 SQL 資料庫，而這又需要部署成一個 CloudFlare D1 SQLite 資料庫實例 https://developers.cloudflare.com/d1/，並且要透過資料庫遷移（migrations）妥善管理，以支援整個開發生命週期。

自動化翻譯

本網站支援 20 種語言。由於網站本身只是 CMS 內容的簡單骨架，i18n 的部分在開發期間是透過寫程式代理（Co-pilot 和 Claude Opus 4.5）來處理。

這就使得所有目前與未來的 CMS 內容，都需要在任何英文內容變更時自動重新翻譯。

基於 Queue 與 Cron 的 Worker

翻譯需求需要一個相當複雜的流程來：

由 Cron 計時器觸發。
識別任何需要新翻譯的內容。
可靠地執行翻譯。
可靠地從失敗中復原。

因此，會使用另一個 CloudFlare D1 實例來追蹤翻譯工作，並搭配 Cloudflare queues（https://developers.cloudflare.com/queues/）以基於 cron 的生產者-消費者模式來管理與擴展任務。呼叫 OpenAI 的 gpt-5.2 API 來進行翻譯，而 AI.SDK https://ai-sdk.dev/ 則把所有東西串接起來。

對這個網站來說，這有點大材小用，但任何規模的生產系統都需要一個穩健的模式來協調後台處理。

這個網站的先前版本

我已經把這個網站做過兩次，作為學習新技術的工具：

2013 - 學習 Ruby 與 AWS

Ruby on Rails v4.0.0。
Bootstrap 樣式 v3。
使用 CoffeeScript 開發 UI。
Backbone Marionette VMC 前端模式。
部署在 AWS 主機上。

2017 - 學習 React

使用 React v16.0.0 製作 UI。
使用 Redux 與 Thunk 處理非同步操作。
使用 Semantic UI 進行樣式設計。

接下來

本網站已正確串接 SEO，而要帶動爬蟲流量，需要以固定節奏產出新內容。我將會發佈更詳細的文章，介紹所使用的各種技術與解決方案。

關於本網站