這個專案怎麼規劃的?【0】

回到過去～為什麼會想「重做」而不是「改版」

當我開啟 2020 個人專案，

從專案內部來看，舊專案並非框架式架構。若要改版並搬到 Nuxt，CSS 雖然能直接沿用，但 HTML 必須重新拆分成頁面與元件，原本使用的 jQuery 也需要依照框架 API 全面改寫，幾乎無法直接共用。評估後發現，與其在舊結構上拆解與轉寫，不如從零開始，成本反而更低。

從視覺面來看，當時首頁採用滿版輪播，以「旅行動線」的方式依序呈現個人資訊與作品。但以現在的角度回頭看，第一個滿版畫面並無法有效傳達網站重點，未來在擴充頁面與功能時，也會面臨視覺延伸與整體一致性的問題。

連結：旅圖-mandy

總結上面專案結構與視覺層面的考量，「改版」不只需要處理技術轉換，也必須重新思考首頁如何帶入資訊，以及擴充頁面與功能後，是否仍能達成原本的目的。在多重因素下，我決定「重做」並重新審視這次建立個人網站的核心目的。

審視我的個人網站目的？

多數人建立個人網站，都是希望能透過網站推銷自己，在求職或被搜尋時被看見，這也是我當初製作我的網站的初衷。隔了五年我才重新打開它，原本只是想擴充 Blog，但在重新評估後，這次網站能同時具備：能代表自己、能與人互動、能持續更新內容。

在視覺上以資訊為主，保持畫面乾淨俐落，減少不必要動畫，希望這次個人網站回到傳達個人與分享資訊的本質。

我實際需要哪些頁面與功能？

在正式開始製作前，我會先從「頁面」開始規劃，再思考每個頁面實際需要哪些功能，最後才進到技術選擇。選擇這樣規劃，避免對現有技術限制，忽略網站真正呈現內容。

頁面規劃

首頁：網站初衷、自我介紹
作品頁：展示個人作品
部落格：文章列表頁
分類頁：文章標籤列表
作品內頁：單一作品的詳細介紹
文章內頁：單篇文章內容頁
錯誤頁：404 錯誤狀態頁面

功能規劃

則以「閱讀與瀏覽體驗」做核心功能，列出幾項：

文章排序
留言功能
搜尋功能
黑暗模式

這個專案需要框架與技術？

框架

這次我選擇 Nuxt 作為主要框架。這幾年工作上主要以 Vue 開發為主，但在回頭檢視開發網站時，也發現單純使用 SPA 架構，對 SEO 並不友善。後續在查資料的過程中，注意到 Nuxt 3 預設 SSR，是我改用 Nuxt 的關鍵原因。

補充說明： SSR 在首次請求會由伺服器端回傳已渲染完成的 HTML，讓使用者能立即看到內容；同時瀏覽器會在背景下載並執行 SPA 所需的 JavaScript。待混合完成後，頁面互動與路由切換才完全交由瀏覽器端處理，兼顧 SEO 與 SPA 的操作體驗。（網路文章與官方文件都有非常多說明，如果理解有誤也歡迎留言指正）

技術與套件

在技術搭配上，主要仍以 Nuxt + Vue Composition API 為核心，並視需求使用 Nuxt modules，樣式部分則採用 Tailwind CSS，以原子化的方式撰寫樣式，減少樣式維護成本。

這次網站的研究重點，則放在「文章與作品資料要如何管理與取得」。在不建立後台、也不自建資料庫的前提下，我整理了兩個可行方案：

Firebase 是 Google 提供的雲端 NoSQL 資料庫，可直接透過官方 API 進行資料的新增、修改、刪除與讀取，不需要自行建立後台。（Supabase 也在觀望清單中）
Nuxt Content 是 Nuxt 官方推出的模組，開發者轉寫 Markdown、YAML 或 JSON 檔案內容，透過官方 API 能夠查詢內容與顯示內容在頁面中。

這兩種方案都能達到需求。差別在於： Firebase 背後 Google 維護，資料在線上管理不用後台，專案上不需要佔有資料空間; Nuxt Content 背後 Nuxt 團隊維護，資料都放在專案中，在開發上相對單純直接取得。

最後我選擇 Nuxt Content 。主要考量到 Firebase 的費用，以及自己實際能產出內容的時間成本，現階段讓網站相對單純快速處理資料為優先，未來若遇到更適合雲端資料庫，只需要替換資料取得方式即可。