碼力獅開張：這個網站是怎麼做出來的

一直以來，我都想要有一個可以長期累積的地方。

不是只放作品截圖，也不是單純寫幾篇零散筆記，而是一個可以把 AI 學習、Side Project、遊戲開發、技術文章和後台管理串在一起的個人網站。於是，碼力獅 MaliLion 就這樣開始了。

這個網站的目標很簡單：把每一次學習變成作品，把每一個作品變成可以被整理、被分享、被延續的紀錄。

技術選型

前端使用 Vue 3 和 Vite，原因是開發速度快、組件結構清楚，也很適合做互動式個人網站。路由和頁面由 Vue Router 管理，靜態產出則交給 vite-ssg。

我選擇 SSG，是因為個人網站大多數內容其實不需要每次請求都即時運算。首頁、文章頁、專案頁都可以在 build 階段先產好，使用者打開時會更快，SEO 也更穩。

資料來源則接 Supabase。文章、專案、技能、證照和關於我的內容，都可以從後台管理。這樣我不用每次新增文章或修改專案都改程式碼，只要更新資料，再重新部署一次，正式站就會更新。

這個網站不是只有前台。

我也做了一個後台，用來管理網站內容。後台登入後可以編輯文章、專案、技能、證照，也能查看一些操作紀錄。前台是靜態網站，後台則是 CSR，直接和 Supabase 溝通。

因為正式站是 SSG，所以後台修改資料後，前台不會立刻自動變動。為了解決這件事，我加了一個發布流程：按下發布後，Vercel deploy hook 會被觸發，網站重新 build，新的 Supabase 內容就會被寫進靜態頁面。

這讓網站同時保有兩種優點：

一開始網站只是能用，但我希望它更像一個有生命感的作品集。

所以後來加入了亮色與沉浸暗色兩種風格。亮色模式比較清爽，適合閱讀；暗色模式則偏深夜實驗室，有琥珀、青綠和紫色光感，呼應 AI、遊戲和創作的氛圍。

首頁也加上了互動效果：滑鼠光暈、Hero 3D tilt、作品卡片 hover、scroll-driven 動畫、Skills 區塊的技術宇宙跑馬燈。這些效果不是為了炫技，而是想讓網站在瀏覽時有一種正在被探索的感覺。

後來我也做了一輪效能調整。因為動畫太多時，捲動會變得有點卡，所以我把滑鼠與捲動事件都改成 requestAnimationFrame 節流，降低 blur 和 filter 的成本，手機上也關掉比較重的游標光暈。

互動可以存在，但不能犧牲閱讀體驗。

網站也補上了 SEO：每個頁面都有 title、description、Open Graph、Twitter card、canonical，文章和專案頁也加入 JSON-LD 結構化資料。

另外也產生 sitemap.xml 和 robots.txt，讓搜尋引擎更容易理解網站結構。

最近我也把 iThome 鐵人賽 RSS 接進文章頁。做法不是 iframe，而是 build 前同步 RSS 成本地 JSON，然後在 /articles 顯示成自己的文章卡片。這樣不會被外站 iframe 限制影響，版面也可以維持 MaliLion 自己的設計風格。

這個網站很大一部分是和 AI 一起完成的。

我把需求拆成一段段，例如修 SSG、補 Supabase fallback、調整 UI、加互動、優化 SEO、接 RSS、改善流暢度。每次都先確認問題，再改程式、跑 typecheck、build、audit，最後 commit 和 push。

這個流程讓我感覺 AI 不只是拿來產生程式碼，而是像一個可以一起檢查、推敲、整理節奏的開發夥伴。

重要的是，網站不是一次完成的。

它是透過很多小步驟慢慢變好的：先能跑，再能管理內容，再讓畫面好看，再讓 SEO 完整，再讓動畫更順。

MaliLion 會繼續累積三種內容：

這個網站本身也會繼續進化。它不只是展示作品的地方，也是一個記錄我如何學習、如何做東西、如何把想法慢慢變成產品的空間。

碼力獅開張了。

接下來，就繼續把學習做成作品，把作品做成品牌。