Foliohaven 是我開發的開源靜態網站與部落格系統，採 MIT 授權。目前的 alfred.wiki 就使用這套系統，首頁與文章版型依本站需求客製。
為了讓 Studio、編輯器與 Agent 共用來源，同時省去資料庫的建置與管理，內容直接保存為檔案，也方便備份和版本管理。正文採用 HTML，保留段落、表格與媒體結構。分類、日期、摘要與 SEO 等資料則使用 JSON，方便獨立驗證。作者在本機編輯與建置，完成後再發布靜態網站。
開發動機：把時間投入內容、閱讀體驗與必要功能
PHP 遠端程式碼執行漏洞
2026 年 10 月 21 日，PHP 公布 CVE-2026-109618 與 CVE-2026-109619。兩項漏洞都可能導致未經認證的遠端程式碼執行，官方因此要求立即更新 PHP。WordPress 也同日通知站長檢查主機的 PHP 版本，因為這是 PHP 層的問題，更新 WordPress 核心無法代替更新 PHP。[1]
站長要追的還有 WordPress 核心、主題與外掛。10 月 28 日的 WordPress 7.1.4 安全更新就修補了升級過程可能導致遠端程式碼執行的問題，以及多項儲存型 XSS。收到公告後，站長得先確認影響、安排更新，再檢查頁面和功能是否正常。即使網站只用來發布文章，底層執行環境與 CMS 的維護工作仍然少不了。
WordPress 看起來什麼都有，但又什麼都沒有
從功能清單看，WordPress 確實很完整。核心有 Sitemap、多尺寸圖片與 srcset，也支援 WebP 與 lazy loading，因此很容易以為內容網站需要的東西都準備好了。可是，等到要精細控制索引、分享圖片、轉檔或載入方式，才會發現這些設定分散在不同地方。想讓它們按照同一個需求運作，還得先弄清楚主題、外掛和程式設定各自管哪一段。
文章編輯器有一套選項，主題另有一套，SEO 與圖片外掛又各有預設。要改一個結果，先得找出哪一層正在生效，再確認其他元件沒有把它蓋回去。設定填完了，實際輸出卻可能還是不對，最後仍得回到網頁原始碼與網路請求檢查。原本只是想調整一張分享圖或一種頁面的索引方式，卻先花時間釐清工具之間的關係。
主題與外掛疊上去之後，問題也跟著延伸到效能。版面和功能稍微複雜一點，PageSpeed 一測，結果往往就很難看，接著又得回頭做效能調校。主題載入了多少 CSS、外掛帶進了哪些 JavaScript、圖片是否過大、快取是否正常，都要逐項追查。每次增加功能，還得確認新資源會不會影響原本的載入與操作，後續工作常常比新增功能本身還耗時間。
繼續找外掛，還會碰到另一個問題：有些功能到了實際設定時才發現，免費版不夠用，想調整的選項被放在付費版。偏偏那往往也不是什麼多特別的功能。名義上有一套 CMS，真正要把細節做好時，卻還得繼續拼外掛、找設定。即使願意付費，整合、更新與相容問題仍要自己處理，花掉的時間並沒有因為多裝一個外掛就消失。
Foliohaven 適合誰
Foliohaven 以文章管理、媒體處理、內容導覽與共用版型為基礎，減少為了發布內容而反覆整合工具的時間。這樣的取向，可以從人與使用場景兩方面來看：
- 適合的人：預算與維護人力有限的個人、自由工作者或小型團隊，以及希望持續寫作的部落格作者。需要一個外觀好看、操作順手的網站，但更希望把時間花在整理內容與改善閱讀體驗，不想為了基本功能反覆安裝外掛、調整設定或管理資料庫。
- 適合的場景：只需要官網、形象網站、作品集或基本 CMS，以資訊展示與公開閱讀為主，沒有金流或即時交易等需求。也適合一次建置完成後便長期不再更動內容或功能的網站，供人查閱固定資訊。另一類則是持續寫作的部落格，可以沿用共用版型管理文章，兼顧外觀、閱讀體驗與管理便利。
對這類網站，可以先完成固定頁面與共用版型，之後有內容異動時，再透過 Studio 更新文章和媒體。後續投入的時間，就能用來改善內容與閱讀體驗，或增加確實需要的功能。
網站客製、內容管理與發布
Foliohaven 的工作流程從網站客製開始：先調整固定頁面與共用文章版型，接著準備文章、媒體與 SEO 設定，最後建立並部署網站。固定頁面和版型可以直接修改原始碼，日常內容則透過 Studio 管理。
固定頁面與共用文章版型
首頁、About、FAQ 或服務介紹頁，可以依網站用途安排內容。以本站的 CyberLoom 首頁為例，品牌導覽、作者介紹、分類入口與精選文章都有各自的位置。要改變資訊順序、配色或區塊配置，就調整這些頁面與共用元件。
文章使用共用版型，統一呈現標題、日期、封面、目錄、正文與延伸閱讀。字級、閱讀寬度或目錄行為調整一次，就能套用到所有文章。版型完成後，新增文章只需準備正文與屬性，不必逐篇建立頁面元件。
固定頁面與共用版型的客製需要修改程式和樣式，也可以請 Agent 協助。這部分先處理網站的外觀與功能，日常寫作再交由內容管理流程接續。
文章管理與內容導覽
Studio 提供文章、分類、Tag、媒體與網站設定的管理介面。文章可以先存成草稿，一邊編輯 HTML、一邊預覽內容，再填寫標題、摘要、分類、封面與發布資料。標記為發布後，文章才會納入正式建置。
文章整理好之後，Foliohaven 也提供讀者瀏覽與查找內容的功能。分類與 Tag 各有對應的文章列表，站內搜尋則會比對標題、摘要、分類與 Tag，結果也會附上摘要。進入文章後，可以透過自動產生的目錄跳到各個章節。作者也能設定文末的「延伸閱讀」，推薦接著閱讀的文章。已發布內容則提供 RSS 訂閱，讓讀者用閱讀器追蹤更新。
工作區提供 Studio 與 IDE 兩種模式。Studio 模式透過管理介面編輯內容與設定。IDE 模式則由編輯器或 Agent 直接修改來源檔案。兩種模式共用同一份資料，因此直接改檔前要先切到 IDE 模式，暫停 Studio 保存來源。完成修改與檢查後，再切回 Studio 並重新讀取。
從原始素材到頁面引用
圖片先上傳到媒體庫，再透過處理工作產生 WebP、多種寬度與分享圖變體。正文、文章封面和社群分享可以引用同一份素材的不同輸出，原圖則保留下來，之後仍可重新處理。
這些位置的顯示尺寸與比例不同，因此頁面還要搭配響應式圖片候選，讓瀏覽器選擇合適的檔案。客製版型時，需確認實際欄寬、候選尺寸與裁切方式，並分別安排首屏與離屏圖片的載入優先序。
媒體流程也支援影片轉碼與 Poster，以及 favicon、Apple 圖示、多尺寸網站圖示和 Manifest。若要提供離線閱讀，則還需要另外實作 Service Worker 與快取策略。
SEO 設定與生效來源
SEO 採全域、頁型與單筆三層設定。全域提供整站預設，頁型設定決定文章、分類等同類頁面的共用規則，單筆設定則套用到個別文章或頁面。標題、描述、索引與分享圖片各自繼承，未覆寫的欄位才沿用上層設定。
文章摘要用於站內列表、搜尋與延伸閱讀，SEO 描述則提供搜尋引擎與社群平台使用。文章頁型預設讓 SEO 描述沿用摘要，分享圖使用精選圖片，也能另行調整這些來源。單篇只覆寫描述時，其他欄位仍按原有設定繼承。Studio 會顯示每個欄位的生效值與來源，方便確認設定結果。
網站建置時，系統會依內容與設定產生 canonical、robots、Sitemap、社群分享資料（OG、Twitter Card）及結構化資料。
保存來源、建立網站與部署
文章與設定保存後，先透過來源預覽查看修改。接著執行完整建置，系統會檢查內容、路由及引用資產，產生可交付的網站。建置成功後才更新本機成功網站，失敗則保留上一次的成品。草稿不會進入正式頁面、公開列表、搜尋索引、RSS 或 Sitemap。
對外發布是另一個動作。專案提供 Cloudflare 的部署與還原流程，也能將完整的靜態網站成品交給其他合適的主機服務。公開端只需要建置完成的網站檔案，Studio 與本機管理服務留在作者環境。
共通的開發與品質標準
Foliohaven 將網站客製與驗收要求寫進共用文件，自行開發與透過 AI 協作都沿用同一套標準。README 說明環境、啟動方式與整體工作流程，AGENTS.md 則引導開發者與 Agent 找到對應任務的文件和修改位置。實作固定頁、共用版型、文章或部署功能時，再依操作指南，以及共用的網站開發與品質標準和 SEO 指引完成修改與檢查。
這些要求具體涵蓋以下幾個部分：
- 初始頁面內容：文章、導覽、列表與目錄在建置時輸出完整 HTML，停用 JavaScript 後也能閱讀並循連結瀏覽。標題層級與頁面結構依內容安排，互動功能再逐項增強。
- 媒體與載入：圖片使用實際可用的響應式尺寸，搭配版型欄寬設定。首屏重要圖片優先載入，離屏圖片延後載入。圖片、影片、嵌入內容與工具區域預留空間，字型也要留意載入與替換時的換行，減少版面位移。
- 手機閱讀：字級、行距與閱讀寬度適合小螢幕，長連結不撐破頁面。程式碼與寬表格在自己的區塊內捲動，目錄可以定位章節，返回上一頁或原本位置後仍能接續閱讀。
- 無障礙與操作：圖片有合適的替代文字，按鈕與欄位有清楚名稱，文字對比足夠。導覽、目錄與控制項可使用鍵盤操作，焦點位置清楚，放大文字後也能閱讀和操作。
- SEO 輸出：客製頁面沿用既有的繼承規則與正式網址，檢查實際 HTML 的標題、描述、canonical、索引設定與分享資料，再確認 Sitemap、RSS 及站內連結一致。
檢查依修改範圍安排。文章與設定先執行 pnpm validate:content，程式修改再加入型別與相關測試，需要更新網站時執行完整建置。日常可用 pnpm verify:quick 在隔離副本完成快檢，完整 pnpm verify 則包含全部整合測試、三種瀏覽器與正式 Build。
頁面完成後，實際操作手機與桌機的閱讀、導覽與工具。網站公開上線後，使用 PageSpeed Insights 檢查效能、無障礙、最佳做法與 SEO。這些檢查從開發階段就納入流程，後續客製與內容更新也沿用相同標準。
讓 AI 理解專案，再描述網站需求
Foliohaven 可以搭配各種 AI 模型與開發 Agent，選擇自己習慣的工具即可開始協作。準備好專案與開發環境後，先讓 AI 閱讀專案文件，再描述網站用途、頁面與閱讀需求。接著依預覽結果提出修正，逐步完成網站。
讓 AI 理解專案
第一次開啟專案，先讓 AI 了解目前的網站，可以直接輸入：
理解專案README 提供環境與工作流程，AGENTS.md 則引導 AI 找到任務指南、修改入口與品質要求。Agent 從這些文件了解專案，再確認現有文章、版型與修改狀態，就能在保留既有內容的基礎上繼續開發。
描述頁面與閱讀需求
接著交代網站用途、讀者、頁面、內容順序與視覺偏好。下面的範本可以填入自己的資料，尚未決定的項目再透過對話補齊：
我想建立一個【個人部落格／公司官網／作品集】。
網站名稱：【網站名稱】
主要用途：【分享技術文章／介紹公司服務／展示作品】
目標讀者：【希望哪些人來看這個網站】
需要的頁面：【首頁、About、Contact……】
首頁希望呈現：【自我介紹、精選文章、服務項目……】
整體視覺風格：【簡潔、溫暖、專業、活潑……】
文章閱讀偏好：【文字大小、閱讀寬度、配色或其他偏好】
目前已有的素材：【Logo、圖片、文案，或尚未準備】
參考網站或喜歡的元素：【網址與具體喜歡的部分】以個人技術部落格為例，可以要求首頁先介紹作者和網站主題，再放精選文章與最新文章，About 頁則說明背景與聯絡方式。共用文章版型希望有較大的字級、寬鬆的行距，手機上也能閱讀程式碼、捲動表格和開啟目錄。
這些需求分別對應固定頁面的資訊安排，以及所有文章共用的閱讀版型。Agent 可以依專案中的元件與規則實作，使用者再從預覽確認內容與呈現是否符合預期。
查看預覽並修正
初版完成後，同時查看桌機與手機，從資訊順序、文案、閱讀和操作提出具體修正，例如：
首頁希望先看到我的介紹與精選文章，最新文章放在下方。
文章頁的文字再大一點，整體閱讀感希望更寬鬆。
手機上的導覽希望簡單一些。
請沿用目前的文章與圖片，完成後再檢查桌機、手機和鍵盤操作。修正後再確認預覽，逐步完成首頁與共用版型。後續無論是撰寫文章、整理圖片、調整網站設定或增加功能，都能繼續請 Agent 協助。日常管理也可以依工作內容與習慣，選擇 Studio 或 IDE。
網站成果與 PageSpeed 表現
依照 Foliohaven 的網站開發、SEO 與閱讀品質指引完成頁面、圖片和互動調整，桌機與手機的 PageSpeed 四項分數都有機會達到 100。這些共通標準讓效能、無障礙、最佳做法與 SEO 從開發階段就一起處理。
以 alfred.wiki 首頁為例，手機與桌機在效能、無障礙、最佳做法與 SEO 四項評分中的最佳分數，都有測到 100 分佳績。
完成客製或更新內容後，建議再檢查一次 PageSpeed Insights，並實際操作手機與桌機的目錄、程式碼、表格和閱讀工具。圖片、字型或第三方工具有變更時，也順手確認載入與版面是否正常。
使用成本
Foliohaven 本身免費，但還是要考量網域、開發電腦、備份、AI 工具與雲端服務的費用，以及初期建站、後續更新和維護所需的時間成本。
AI 工具
如果沒有工程背景，或打算主要透過 Agent 建站，初期建議先使用每月 US$100 級距的方案。對剛接觸開發的人來說，初期當個「課金玩家」，選用旗艦模型並搭配較高的思考程度，協作起來比較省心。有經驗的開發者則可以依工作習慣與任務複雜度，選擇模型、思考設定和訂閱方案。
網站完成後，可以評估每月 US$20 級距，是否符合日常寫作、修改與維護的需求。
| 階段 | Codex 搭配訂閱 | Claude Code 搭配訂閱 |
|---|---|---|
| 初期建站與客製 | ChatGPT Pro，US$100／月級距 | Claude Max，US$100／月 |
| 日常內容與維護 | ChatGPT Plus，US$20／月 | Claude Pro，月繳 US$20／月 |
以上價格於 2026/11/10 依 OpenAI 與 Claude 官方定價核對。各方案的模型與用量依工具而異，使用 API 時則另按用量計費。
Cloudflare
Worker
網站透過 Workers Static Assets 提供 HTML 等靜態檔案。由於這類靜態資產的儲存與請求免費，Worker 這部分的費用預期為每月 US$0。
R2
圖片、CSS 與 JavaScript 等資產放在 R2，費用依儲存量與操作次數計算。以下使用 Standard 類別，假設帳戶的免費額度供這個網站使用，先不計快取效果：
| 項目 | 估算條件 |
|---|---|
| 儲存空間 | 每月平均儲存量在 10 GB-month 免費額度內 |
| 上傳、列出檔案等 Class A 操作 | 每月 100 萬次免費額度內 |
| 讀取等 Class B 操作 | 每月 1,000 萬次免費，超額每 100 萬次 US$0.36 |
| R2 對外傳輸流量 | 不收取 egress 費用 |
為了簡單估算，將每次完整瀏覽首頁視為載入 14～15 個 R2 資產，每個資產讀取一次。這樣每月 1,000 萬次免費讀取，約能支應 67～71 萬次首頁瀏覽。超額讀取費用如下：
| 每月首頁 PageView | 估計 Class B 次數 | 讀取超額費用 |
|---|---|---|
| 50 萬 | 700～750 萬次 | US$0 |
| 100 萬 | 1,400～1,500 萬次 | US$1.44～1.80／月 |
| 200 萬 | 2,800～3,000 萬次 | US$6.48～7.20／月 |
這裡每次開啟首頁算 1 個 PageView，重訪也計次。表格只計 Class B 超額讀取費，儲存與 Class A 操作假設在免費額度內。估算整站時，再把其他頁面、影片與部署上傳的用量加進去。
雲端價格於 2026/11/10 核對，實際以 R2 官方定價及帳戶用量計算。若另外使用動態 Worker、表單後端或其他服務，再加上各項費用。
採用前準備
開始前，先確認網站需要哪些動態功能。會員、金流、即時庫存、個人化權限與複雜流程，需要額外服務或後端設計。Contact 頁可以先提供聯絡資料，若要用表單收件，再把收件服務納入規劃。
接著整理網站需求、文案與品牌素材，準備開發環境，並安排帳號管理及備份。已有網站時，也要盤點文章、圖片、分類、舊網址和客製程式，再決定搬移方式。主要透過 Agent 實作時，也建議自己看過內容、素材與預覽結果。
程式與使用文件在 GitHub 專案，正式來源包與同版 SHA256SUMS 校驗檔則在 Release。取得並校驗來源後，再依 README 選擇 Docker 或原生環境開始建站。完整的環境準備、客製、內容管理與部署流程，會在建站篇接續說明。
備註
[1] 兩項 PHP 漏洞的影響範圍與實際可利用性，取決於版本、設定與執行路徑。技術細節請參考 PHP 安全公告，更新提醒另見 WordPress 通知。↩