用 Vibe Coding 打造自己的個人網站
我們把整個流程梳理一遍，用清晰的條列式呈現，讓我們能跟著節奏一步步用 Vibe Coding 打造自己的個人網站。
🎯 什麼是 Vibe Coding？
這是 2025 年開始流行的開發模式：你負責描述「想要什麼」，AI 負責生成程式碼。你不用記語法，但要學會怎麼跟 AI 溝通需求、審視成果，像個製作人一樣引導專案方向。
🗺️ 四階段建站攻略（條列版）
1️⃣ 準備心態與工具
· 心態調整：拋開「一次到位」的完美主義，擁抱「快速疊代」。先求有，再求好。
· 推薦工具：
· 首選整合型 IDE：Cursor 或 Windsurf（AI 深度整合，可自動編輯檔案）
· 輕量入門：ChatGPT、Google Gemini 或 Claude（直接對話生成程式碼）
· 輔助工具：v0.dev（生成 React 元件）、Perplexity（查技術問題）
2️⃣ 挑選你的技術路線
根據你的目標和技術背景，選擇一條路起步：
· 路線 A：標準部落格／作品集
· 適合誰：想寫文章、展示作品、重視 SEO 和外觀自訂
· 核心技術：Next.js（React 框架） + Tailwind CSS（樣式） + 可選 Ghost CMS（內容後台）
· 優點：彈性大、SEO 友善、社群資源豐富
· 需留意：需稍微理解前後端渲染（SSR／CSR）概念
· 路線 B：極簡上線／單頁式工具
· 適合誰：只想快速有個個人頁面，或做個小工具
· 核心技術：純 HTML／CSS／JavaScript，部署在 Vercel 或 GitHub Pages
· 優點：門檻極低、部署免費、AI 生成準確率高
· 需留意：後續若要新增複雜功能，可能要重構
如果你是新手，強烈建議從 路線 B 開始，成功上線建立信心後再挑戰路線 A。
3️⃣ 動手實作：跟 AI 協作的節奏
這是最關鍵的部分，記得循序漸進，一次只加一個功能。
🧱 第一步：建立骨架
給 AI 一個非常具體的初始指令，包含頁面結構、風格和技術限制。
Prompt 範例：
「請幫我生成一個個人網站的 HTML 程式碼。它是一個單頁式網站，需要有『關於我』、『作品集』、『聯絡我』三個區塊。風格簡潔現代，主色調是深藍色和白色。所有樣式請寫在 <style> 標籤內，不要依賴外部套件。」
🧩 第二步：疊加功能
骨架出來後，一次只加一個新區塊或效果，避免 AI 混淆。
Prompt 範例：
「在上一個程式碼基礎上，幫我在『作品集』區塊加入一個兩欄的網格佈局。每個專案項目要有一張佔位圖片、一個標題和一段簡短描述。當滑鼠移到專案卡片上時，要有輕微的上浮陰影效果。」
🐞 第三步：處理 Bug
遇到錯誤時，直接複製錯誤訊息貼給 AI，並說明預期行為。
Prompt 範例：
「我執行程式碼後，在瀏覽器控制台看到這個錯誤：『Uncaught TypeError: Cannot read property 'map' of undefined』。看起來是我的作品集資料沒有成功載入。請幫我分析這段程式碼（貼上相關部分），找出為什麼 projects 這個陣列是空的。」
4️⃣ 部署上線
AI 生成完程式碼後，你需要讓它變成真正的網站。
· 註冊帳號：準備 GitHub 和 Vercel 帳號（皆免費）
· 上傳程式碼：
· 方法一：直接在 Vercel 導入 GitHub 專案，自動部署
· 方法二：使用 VS Code 搭配 Git 推送
· 綁定域名（選擇性）：若有自己的網域，可在 Vercel 設定中加上
💡 進階心法與提醒
· 溝通重於程式：你跟 AI 描述的細膩度，直接影響成品品質。多給上下文、風格參考、具體範例。
· 接受「夠好」：個人網站不求 100 分完美，AI 通常能做出 85-90 分的成果。與其花大量時間微調最後 10%，不如趕快上線，之後再慢慢改版。
· 安全與成本：
· 盡量使用大廠提供的元件（如認證、表單服務），不要自己寫敏感功能。
· 初期用 Vercel + GitHub + 靜態頁面，完全免費，不用擔心帳單。
· 持續迭代：網站上線後，你隨時可以再把新想法丟給 AI，請它修改或新增頁面。這就是 Vibe Coding 的魅力——網站永遠可以跟著你的想法成長。
如果你想從最簡單的 HTML 頁面開始，告訴我你希望的風格（例如：設計師作品集、工程師簡歷、攝影畫廊），我可以幫你擬一段 Prompt，你直接複製去跟 AI 溝通，馬上就能生成第一個版本！
留言
張貼留言