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 技巧