這篇講你現在看的這個網站背後怎麼運作。網站是怎麼跟 Claude Code 一起做出來的，另外寫在〈用 Claude Code 架個人網站〉。
文中的狀態是 2026-11-05 的情形。
先講結論
這個網站是「建置好的網頁」：文章、遊記、照片都在我自己的電腦上寫好、挑好，跑一個指令，把它們排成一頁一頁的網頁檔，再整包放到 Cloudflare。讀者打開網頁時，Cloudflare 直接把做好的檔案送出去，中間不用查資料庫、不用跑程式。
唯一的例外是文章最後的「這篇有幫到你嗎？」，按下去要記一筆，所以有一個很小的程式和資料庫。
一張圖看懂
內容從哪裡來
- 文章：每篇是一個 Markdown 文字檔，跟網站程式放在一起。Markdown 是加幾個符號就能標出標題、清單的純文字寫法，Obsidian 也是用它。
- 遊記：寫在我平常用的 Obsidian 筆記庫裡，一趟一篇。篇首標了「網站: 發布」的才會上網站，沒標的就只是我自己的筆記。
- 照片：在我的「數位暗房」資料夾，每趟旅程從完稿照裡挑幾張，複製到那趟的「網站精選」資料夾。網站沒有上傳照片的後台，這個資料夾就是後台。
我在意的是：內容放在我本來就在用的地方。想加一篇遊記，就是寫一篇筆記、挑幾張照片，不用登入任何網站後台。
一個指令做了哪些事
網站用 Astro 做。Astro 是專門做內容網站的工具，它在「建置」的時候把 Markdown、照片和版面組成網頁檔，之後就不用再算一次。這一步順便做了幾件事：
| 做什麼 | 為什麼 |
|---|---|
| 照片長邊縮到 2048 像素、拿掉 GPS 位置和相機資料、右下角壓 LOGO 浮水印 | 手機看得順，也不會洩漏拍照的地點 |
| 產生站內搜尋的索引（Pagefind） | 搜尋在讀者的瀏覽器裡跑，不用接外部搜尋服務 |
| 每篇文章產生一張分享預覽圖 | 網址貼到 LINE、Facebook、LinkedIn 時有圖，不只是一串網址 |
| 算出文章和名詞之間的關係 | 給關聯圖用 |
建置完是一整個資料夾的網頁檔，上傳到 Cloudflare 就上線了。每次上線後，公開的文章會另外存一份回筆記庫，網站哪天出問題，內容也還在我手上。
為什麼選靜態網站
- 快：網頁事先做好，讀者打開時只是下載檔案。
- 便宜：用 Cloudflare 的免費方案就夠，目前每年只付網域費（US$11.17）。
- 不用顧伺服器：沒有要更新的系統、沒有要備份的資料庫，被攻擊的地方也少。
- 改壞了可以退回：網站程式放在 Git，每改一批存一次紀錄，想回到哪一版都可以。
代價是：每改一個字都要重新建置、上傳一次。對一個人寫的網站來說，這個代價很小，一次只要幾分鐘。
為什麼不直接把筆記庫變成網站
Obsidian 有直接把筆記庫發布成網站的服務，我沒有用。筆記庫是我的私人知識庫，裡面有工作紀錄、還沒想清楚的草稿，也有不該公開的資料；網站是我挑過、改寫成給別人看的版本。兩者分開，網站只讀我指定的那幾份內容，筆記庫怎麼亂都不會影響網站。
讓中國也打得開
我常跟中國的朋友分享，所以從一開始就照這幾條做：
- 不載入 Google 字型這類外部字型，用手機和電腦內建的字型。
- 網站只走自己的網域
vincent5588.com，不用 Cloudflare 預設給的網址（那個網址在中國常連不上）。 - 文章裡的 YouTube 影片做成「點了才載入」的卡片，載不到也不影響頁面。
- 流量統計的小程式在背景載入，載不到也一樣不影響。
還沒到中國實際測過，等下次去再看。
唯一的一點後端
文章最後的「這篇有幫到你嗎？」，按下去要把「哪一篇、按了哪一個、補充的一句話」記下來，靜態網頁做不到，所以用了 Cloudflare 的小程式（Workers）和資料庫（D1）。它只處理這一件事，其他網頁照樣是直接送出。
這裡不記 IP、不用 cookie，也不需要留名字或 Email。瀏覽統計用的是 Cloudflare Web Analytics，同樣不用 cookie。細節寫在隱私說明。
參考資料
- Astro 官方文件：Why Astro?
- Cloudflare 官方文件：Static Assets（Workers 靜態資源）、D1、Web Analytics
- Pagefind 官方網站：pagefind.app
官方文件為 2026-11-05 查閱，服務內容與價格以官網為準。