當今的數位世界中,網站用戶要求即時、動態和高度互動的體驗。我們需要確保用戶始終能夠訪問最新的內容,同時保持優秀的性能。在這方面,透過結合 Cloudflare Pages、Worker 和 KV,我們可以實現伺服器端渲染,提供動態且實時的內容,從而提升網站的性能和可用性。本文將深入探討這三個工具,解釋它們如何協同運作,以實現即時伺服器端渲染,提供更出色的用戶體驗。
2023 年,我回到香港,從全棧工程師,行過死蔭幽谷,現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走,十分感激當初的百般試煉。現在,就讓我回顧這一年我採用的前端後端雲端 Web3 方案,希望可以拋磚引玉
透過重構博客網站,我得以體會結合 Static Site 和 Vue 的優點。在靜態網站生成和動態組件的結合下,可以實現更出色的網站開發,接下來的內容中將分享開發心得
Storybook 最大的優點是它可以提供不同的頁面來顯示組件的不同狀態,讓我們在各種不同的情況下測試和評估組件。通過為不同狀態創建不同的頁面,我們可以輕鬆地測試組件。另外,Storybook 也可以輸出一個 Static Website,可以輕鬆分享給設計師和其他團隊成員,讓他們容易理解組件的外觀和行為。
GatsbyJS 提供了一個簡單易用的命令行工具,我們可以透過它來構建一個基本的 React 網站,並實時看到修改代碼所帶來的變化。
時光飛逝,我已從大學畢業成為前端工程師。回想這一年,我完成了三件事情:改版博客系統,讓不同用戶可以快速啟動項目,它是我第一個過百 Star 數的項目;翻譯並校對技術文章,學習了不少前端實用的技術;對博客系統框架的 GatsbyJS,ReactJS 技術研究。
感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。
上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧
GatsbyJS 是一個現代化開發網站的網站產生系統,擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用,讓前端工程師,編輯,用戶都感到滿意。就讓我們一步步地探索這個系統吧。
初探 React 組件生命週期
二十一世紀的鍊金術士,以 AI 為觸媒,將想法具現化,以邏輯築陣、用創作構築可能。
自 2017 年開始寫作,目前已累積 298 篇煉金筆記,專注於全端開發、AI 應用與開發者工具。
我目前開放全端工程師與 AI 相關產品的合作與工作機會(TypeScript、React、Next.js、Node.js 等技術棧)。
如果你有 AI 專案、網站開發或技術整合需求,或正在為團隊尋找工程師,歡迎來信交流:partner@calpa.me
離職後我沒投履歷,改用 AI 工具建立每日寫作與實作節奏,打造可擴展的創作系統。這篇文章記錄這段失業期間的節奏、過程與轉機,也是一場關於「如何被看見」的真實實驗。
2025年6月12日
5988 分享
我不是命理師,也不是行銷高手,但我用 ChatGPT 結合 GUI,打造出一款無需寫 prompt、卻能完整解盤的紫微分析工具。在沒宣傳、沒推廣的情況下,它卻意外地自然爆紅。
2025年5月30日
3613 分享
想用 AI 寫程式又怕爛 code?這篇文章分享我如何結合 ChatGPT、TypeScript、JSDoc、Zod 與 Vitest,打造可維護、可驗證的 Vibe Coding 流程,讓靈感不只是 prototype,而是真正能安全上線的產品級程式碼。
2025年5月23日
3505 分享
這篇文章記錄了我與 AI 寫程式的真實經歷,從最初的興奮與疑惑,到逐漸學會反思與調整。每一次 prompt、每一場 debug,都讓我更清楚自己對技術的渴望與局限。Vibe Coding 不只是提升生產力的工具,更是一場關於信任、對話與釋放焦慮的自我修煉。
2025年6月07日
3256 分享
React 開發團隊於 2025 年 2 月 14 日正式宣布淘汰 Create React App (CRA),並鼓勵開發者轉向使用現代框架或構建工具如 Vite、Parcel 或 RSBuild。這一決定標誌著前端開發工具生態系統的重大轉變,開啟了以框架為中心的新時代。
2025年3月21日
3109 分享
2023年10月13日
2167 分享
Google Forms 是現代工作中不可或缺的資料收集工具。本文將教你如何結合 Google Apps Script 和生成式 AI(如 ChatGPT),快速自動化建構表單、串接 Google Sheets,並大幅提升開發效率與資料管理品質。讓即使沒有程式背景的人,也能輕鬆打造專業級的智能表單!
2025年4月15日
2035 分享
我沒有靠廣告,也不追求爆文,只靠一套 ChatGPT 寫作流程,讓內容在 Threads 上穩定輸出、自然擴散。短短一個月內,累積 92 萬曝光與 2400 名追蹤者,這篇文章完整揭露我的內容重組流程與流量策略。
2025年6月26日
1847 分享
曾經我一個月只能寫一篇技術文,直到我用工程師思維打造 ChatGPT 協作的自動化寫作系統,現在每天一篇、穩定日更。這篇文章完整公開我的內容生產流程,從靈感整理、架構設計到 ChatGPT 審稿與多平台發佈,幫助你也建立屬於自己的高效創作引擎。
2025年5月25日
1659 分享
開發者的工作場所,常常被綁在一張桌子上。本文記錄我如何用 Tailscale 把手機和 AWS EC2 開發機放進同一個私有網路、用 Termius 在手機上維持 SSH 終端、用 tmux 讓 AI agent 在斷線後繼續工作,把自然語言變成 commit。從架構設計、安全模型、踩過的地雷,到非同步委派的工作模式與成本,完整拆解「手機叫 AI 寫程式」這件事。
2026年10月23日
這個小專案把三座教堂的 360° 全景照片變成一個可以在瀏覽器裡自由切換的 WebXR 體驗。從內容到技術棧,再到工程化部署,本文記錄我如何用 A-Frame、Vite 和 Cloudflare Pages,做出一個既簡單又有臨場感的 360 教堂圖庫。
2025年12月02日
17 分享
一直想用 Go 做一個實戰專案,最後選擇從 Telegram Bot 開始。這篇文章會分享為什麼我用 Go,go-bot 專案的架構設計,以及如何在本機與雲端部署一個 Webhook-based Telegram Echo Bot。
2025年11月27日
1 分享
Umami v3 不只是介面更新,而是一場從架構、資料模型到分析能力的全面升級。本文以敘事方式,帶你走過從 v2 到 v3 的轉型歷程,理解這次改版如何為現代網站帶來更高品質的數據洞察。
2025年11月19日
5 分享
長年在 TypeScript / Node.js 生態打滾的我,第一次用 Go 寫工具:同時從八家加密貨幣交易所抓取 BTC 價格,計算最佳買賣點與價差。這篇文章從需求、架構設計到並發實作,完整拆解我如何用 goroutine 與 channel 建立一套可擴充、可觀測的行情聚合器。
2025年11月16日
總覺得 ChatGPT 回答不夠準、不像你想的?這篇文章教你如何用工程思維設計 prompt,讓 AI 回應貼合語氣、格式與目標,真正成為創作上的專屬協作者。
2025年6月22日
691 分享
工程師不擅長說故事?這篇文章將帶你透過努力人公式 × ChatGPT,打造屬於自己的敘事模組。即使你是工程師,也能用文字駕馭語言模型,達到言出法隨,將個人經歷轉化為有感染力的故事。
2025年6月21日
1009 分享
我不只是使用 ChatGPT,而是與它雙修、共鍛語言系統,打造出一套可重複優化的知識煉金術流程。這篇文章揭示我如何結合數據觀察、語氣調整與阿德勒目的論,把寫作轉化為現實部署的煉金工程。
2025年6月17日
261 分享