前情提要
隨著開發經驗累積，文字筆記越來越多且雜亂不堪。我想搭建一個網站，方便查看自己的筆記並開源過去的經驗。同時希望不被架構局限，保有資料可遷移的彈性，並在可運行的前提下盡可能控制成本。
一開始我使用 Line 聊天室作為儲存空間，後來因為手上設備生態系統的關係轉到 Apple 備忘錄。整體使用變得更簡潔，也容易進行多裝置同步。但我還是不太滿意——Apple 備忘錄原生支援的格式有限，常常無法實現理想的文字記錄。當我想插入外部媒體資源或是 markdown、mermaid 這類特殊格式時就會有點無解。
總結一下我期待的系統需求：
- 可以快速檢索資料庫
- 有完善的文件格式化系統，最好支援 markdown 格式
- 可以跟別人共享我的筆記
依照需求進行技術選擇
可遷移的資產與自由的架構
因為不打算搭建後台，也不希望文章的撰寫和渲染被編輯器架構限制，導致之後難以遷移資產，所以打算使用 Notion 作為撰寫文章的服務，再透過 Notion API 獲取數據。
當然很多服務都可以做到一樣的事情。我選用 Notion 主要是因為它集合了幾個重要特性：免費使用空間、良好的 API 服務（分頁載入、篩選、排序），以及支援 MCP Server（快速迭代開發)。
選擇前端框架
考量到這個架構下 API 來自 Notion SDK，但不能直接在前端初始化。如果特別再部署一個後端服務去串接 Notion 數據又有點多此一舉。
因此最後選擇 Next.js 的全端架構，使用 Server Actions 調用 Notion 數據，渲染時搭配 RSC（React Server Component）在伺服器建構，提升即時渲染性能。
優化前端渲染策略
大部分文章可以在部署時預先建構好，讓網站擁有更佳性能並建立 SEO friendly 架構。所以使用 ISR（Incremental Static Regeneration）渲染策略——部署時先建構已存在的文章，其他的按需增量生成。
系統技術選型
在樣式技術上，我選擇方便快速開發且樣式乾淨的 Shadcn，搭配 Tailwind CSS 快速建構 UI。並且支援深色模式切換、RWD 響應式設計、離線快取整個頁面、Web App A2HS（Add to home screen）。這些都是我認為必須的功能——在離線時仍可使用，並透過 A2HS 展示更簡潔的 UI，去掉瀏覽器框架遮擋，讓我們擁有更大的螢幕使用空間。
Infra & CI/CD
網域直接在 Cloudflare 上購買。雖然最近出事機率有點高，但瑕不掩瑜——他們提供的一系列服務實在太香了。不管是基礎的 CDN、DDoS 防禦、Turnstile，甚至到 Email Routing 服務，這些都讓我直呼過癮。所以也沒有猶豫地選擇了 Cloudflare，相關服務也都使用 Cloudflare。
CI/CD 部分選擇透過 Github Action 建構 Docker Image 後推送到 Google Artifact Registry，再使用 gcloud CLI 執行 Cloud Run 部署。這個循環大概 2～3 分鐘，我覺得在可接受範圍內。以 Github Pro 每月 3000 分鐘的免費額度應該綽綽有餘。