Felimet Hub 是一個以 Astro Starlight 為基礎的個人網站，結合 starlight-theme-obsidian 主題與自訂的 Wabi-Sabi 有機設計系統。目標是建立一個兼顧閱讀體驗與視覺溫度的文件型網站。
| 類別 | 技術 |
|---|---|
| 框架 | Astro 5 + Starlight |
| 主題 | starlight-theme-obsidian |
| 樣式 | Tailwind CSS v4 + 自訂 Wabi-Sabi 色彩系統 |
| 字型 | Crimson Pro（英文）+ Noto Sans TC（中文） |
| 部署 | 靜態輸出（Static Site Generation） |
本站採用 Wabi-Sabi 雙模式材質引擎，在亮/暗模式間切換不同的物理隱喻：
「墨水與水彩於奶油紙上」
- 背景：奶油色粗纖維紙
#F9F7F2 - 墨線：深炭色墨水
#36454F - 填色：半透明水彩暈染，
mix-blend-mode: multiply - 色彩融入紙張紋理，呈現柔和的手繪質感
「粉筆與水粉於石板上」
- 背景：深炭色啞光石板
#1F1F21 - 墨線：奶白色粉筆
#E6E0D4 - 填色：不透明鮮豔水粉，
mix-blend-mode: normal - 色彩浮現於暗色表面，呈現明亮的塗料質感
資料夾src/
資料夾components/
- GalleryCard.astro
- GalleryGrid.astro
- TagBadge.astro
資料夾content/docs/
- index.mdx
- about.mdx
資料夾projects/
- …
資料夾notes/
- …
資料夾pages/
- projects/index.astro
- notes/index.astro
資料夾styles/
- global.css
- wabi-sabi-tokens.css
- wabi-sabi-organic.css
- wabi-sabi-typography.css
- astro.config.mjs
- package.json
-
安裝依賴
Terminal window pnpm install -
啟動開發伺服器
Terminal window pnpm dev -
建置靜態網站
Terminal window pnpm build -
預覽產出結果
Terminal window pnpm preview
- Docker 容器化工具集 — 另一個使用 Docker 部署的專案
- Docker 指南 — 容器化技術筆記，本站部署時的參考
- Figma 設計技巧 — 本站 UI 設計過程中使用的 Figma 技巧