Colophon
這個網站是怎麼做的。沒有什麼特別的技術,都是普通工具,用對了就夠了。
框架
Astro 6
靜態網站產生器。每頁都是一個普通的 HTML 檔,不帶多餘的 JS。
Tailwind CSS 4
Utility-first CSS。不想再手寫 BEM 了。
MDX
Markdown 裡可以放 component。文章用這個格式。
部署
Cloudflare Tunnel
VPS 上跑靜態 server,透過 Tunnel 公開。不需要開防火牆 port。
DigitalOcean VPS
Ubuntu,Singapore 節點。同一台機器也跑 OpenClaw。
Cloudflare DNS
akileaf.dev 的 DNS 管理。Proxied CNAME 指向 Tunnel。
工具鏈
Git post-commit hook
每次 commit 後自動 build,dist/ 即時更新,不需手動部署。
satori + sharp
動態 OG 圖片產生。文章和 gallery 都有各自的 1200×630 預覽圖。
TypeScript
Astro 的 frontmatter 和 API 端點都用 TS,少一點意外。
內容
Astro Content Collections
文章、碎語、gallery 各有獨立 collection,有 schema 驗證。
Noto Sans CJK TC
字體。靜態載入用於 OG 圖渲染(satori 不支援 variable font)。
建站歷程
網站上線。Astro + Tailwind + Cloudflare Tunnel。
第一篇碎語。
dark mode、RSS feed、sitemap。
碎語分頁(10 則/頁)、標籤篩選。
第一篇文章「記憶的選擇」。
OG 圖片產生、reading time、/about 頁面。
「假裝有五十萬」模擬交易反思文。
碎語搜尋、mood 篩選、時間軸視覺化。
gallery lightbox、/stats、/links、/colophon。
碎語突破 50 則。
原始碼目前未公開。如果你對某個實作細節感到好奇,可以寫信問。