創意探索

和AI一起從零開始手搓個人網頁

5 分鐘閱讀

這篇文章算是一個給我自己的小紀錄，記錄我是如何從0開始構想、試錯和實現這個網頁的。

  • Web開發
  • AI輔助開發
  • 個人網頁製作

開端

我常常有在休息時間隨便找一些網頁前端設計或是小工具之類的創意來看，前陣子看到Claude-Code更新了Frontend-design的Skill，加上我一直都想要弄一個個人的空間，可以放我的履歷、興趣跟一些其他無聊時的作品（偶爾也能在這邊寫一些我想分享的東西，寫自己開心的。），於是就起心動念準備開始做這個網站。

也先打一下預防針，這篇文章算是一個給我自己的小紀錄，記錄我是如何從0開始構想、試錯和實現這個網頁的，所以我的方法不會是最正確或是高效的，有資訊工程專業的人們一定還是在這部份有更多知能和資訊，所以我這邊僅提供我自己的做法（或是我額外想到的作法）給大家參考。如果你也想做一個屬於自己的網站，希望這篇文章能給你一些Idea。

Step１電腦中的前置作業

在製作個人網站之前，有些必要，或幾乎必要的程式最好先安裝一下，這邊列出我有安裝的程式，你也可以找到平行替代方案來使用，凡事順手就好。

  1. VS Code - 程式碼編輯器
  2. VS Code Claude-Code 插件 - AI 開發的核心工具
  3. Git - 版本控制
  4. GitHub 帳號 - 託管程式碼和部署網站
  5. GitHub 倉庫 - 存放專案

Step２制定工作流程

一開始我還是先從制定工作流程開始，我在規劃比較大型的專案項目的時候常常是這樣：

1.從需求出發

  • 我想要做些什麼？
  • 想完成什麼目的或是我的需求？
  • 有哪些功能是必要的？

對我而言，我想要：

  • 一個履歷頁面（關於我）
  • 作品集展示（分成學術研究、程式開發、音樂創作）
  • 部落格功能（而且我打算做成一個方便更新的框架，因為我很懶，日後想要用Obsidian就達成新增/維護BLOG文章的工作流程。）
  • 聯絡方式（希望讓有興趣聯絡我的人能找到我）

2.規劃骨架

  • 網頁的整體分頁要如何設計？
  • 想呈現給人什麼氛圍？

我最後採用比較淺色系的風格，因為我喜歡像美術館或是極簡雜誌的設計方向，而且我自己很愛穿大地色衣服，喜歡。

3.構想功能如何實現

  • 必要的功能要用哪種框架實作？

這邊我的心得是可以選那種社群專案發達的，所以我選React、TypeScript、TailwindCSS（好方便）、和Vite來建置

4.規劃階段性任務、開始實踐

到這邊就可以開始製作了，我的實作經驗是如果希望主要靠AI來Coding（像我），最好不要抱著可以One Shot就成功的心態，雖然新的模型已經越來越厲害和越來越注意細節了，但是一但任務量龐大，AI很容易就直接生一坨 出來給你，而不懂程式的我們也不會知道到底哪裡出錯了。

所以我自己的習慣會是

  1. 先做好上面三個步驟的規格規劃
  2. 再讓AI規劃階段性的任務，寫成文檔
  3. 再請AI規劃階段性任務，每次完成一個階段就測試、Git commit存個安全存檔點

5.細節打磨或是新增好玩小東西

這是我的個人愛好，不如說最後其實這裡最花時間，比如我在網站裡面

  • 加了Q版的頭像（利用Icon-z.com做的），還做了小互動，點頭像會變笑臉，嘻嘻。
  • 增加了深色主題模式，而且做了一個精美小開關
  • 在連絡的網頁部分，參考大神的設計做了一個捲動式的特效

AI可以協助的部分

上面這些步驟完全都是可以和AI一起討論出來的。
像我在1~3階段是用Gemini 3協助規劃的
而在實踐時就是請Gemini整理產品的規格，然後移到Claude-Code中實作。

基本上這個流程有點接近（或者就是）規格驅動開發，所以想要用OpenSpec之類的工具也是完全沒問題，只是對我來說現在的做法最適合我而已。

Step ３部屬上線

這邊會是需要一些人工操作的地方，但是有不會的可以請AI教你。注意有時候AI還是會有幻覺，或是回答的牛頭不對馬嘴，所以這時候請回歸傳統：去YouTube上或是Reddit上找答案，有時候比向AI澄清半天自己的問題還要快許多。

要部屬網站，你需要一個可以Host你的網頁的第三方服務廠商，我這邊選的是Cyber活佛CloudFlare，當然也是可以選GitHub pages，但是我覺得它功能稍微少一些。

在CloudFlare Pages上面部屬網站是免費的，只有購買網域會是要付費的，但預設也會有一個基本的.dev結尾的網址。

我的CloudFlare Pages 部署步驟

1. CloudFlare Pages

  • 登入或新建帳號
  • 創建一個Pages
  • 創建API（需要去找到你帳號的API以及新增一個Pages的API）

2. 在 GitHub 建立倉庫

  • 新增倉庫
  • 到倉庫的設定中去新增兩個Secrets，分別是你CloudFlare帳號的API以及剛剛建立的CloudFlare Pages的API

3.在IDE裡面新增GitHub Actions自動部屬的腳本

  • 這步你可以請AI做，他會新增一個.yml的檔案

4.Git push

  • 在網站製作到一個階段之後，就可以用commit & push到GitHub中，GitHub Actions就會開始幫你進行部屬作業了。

Step ４網站的日常更新維護

一開始AI幫我做好網站雛形後，Blog的內容預設都是寫死在constants.ts這個檔案裡面，但是這樣會變成如果我以後要新增Blog，我得打開VS code > 找到constants.ts > 找到Blog的程式碼字段 > 手動Key上各種分類標籤 > 最後才是寫內容 > 推送。

這種更新的方式本身就很耗費心智，一不小心還可能會弄壞網站裡面的其他內容，要單獨刪除文章也很不方便。

所以我在Claude-Code輸入

我想要做一個方便更新的BLOG框架，我的BLOG內文打算使用Obsidian撰寫MD格式檔案，我希望網站可以自動載入這些檔案。

Claude-Code就協助規劃利用Vite 插件自動載入這些 Markdown檔案，於是，我現在更新Blog文章的工作流程是：
打開Obsidian > 新增檔案 > 插入模板 > 寫文 > 推送公開。

而且因為Obsidian的介面比較簡潔，所以我也可以省下很多認知資源，專注在撰寫內容，寫完只要從Obsidian中的Git插件按一下Commit & push就好。另一個好處是，就算我今天使用其他電腦，只要裝了Git，登入Github帳號，我就可以用任意的MarkDown編輯器來寫文（甚至Windows記事本也可以），寫完再推送到GitHub，就算沒有原本的電腦一樣可以實現寫作與發佈。

甚至手機也可以更新，只要直接用瀏覽器打開GitHub，登入後直接進到倉庫中的對應資料夾新增MD檔案，就可以開始寫文了，寫完直接Commit changes就會發布到網頁中，超級方便（不過手機這樣操作對我來說比較沒效率也比較傷眼睛，所以我通常不這樣做）。

以上就是我在創建這個網站時的思考歷程和脈絡了，有些細節因為篇幅的關係所以就沒有多贅述，如果有人有興趣我可以再多說一些，但現在AI很方便應該也是可以直接問AI找解答，只要注意一下查證就好了。

好的，希望這篇文有幫助到你，下次見囉