AI 時代的網站開發：你需要知道的一切
不是教你從零開始學寫程式，而是給你一張地圖，讓你知道整個網站開發的全貌，然後用 AI 幫你實現。
為什麼現在是最好的時機
以前，如果你想有自己的網站，大概有兩條路：
路線 A：自己學寫程式
花幾個月學 HTML、CSS、JavaScript，再學框架，搞懂部署、網域、DNS… 完全掌控，但門檻高。
路線 B：用現成平台
WordPress、Wix、Webflow，或是寫部落格就用 Medium、方格子。不用學程式，但受限於平台。
現在？有了第三條路：AI + 程式碼。
你可以跟 AI 說「幫我做一個個人作品集網站」，然後它就開始寫程式了。你不用自己寫，但你擁有完整的程式碼，想改什麼都可以。
但這不代表你什麼都不用懂。
用買房子來理解網站
台灣人愛買房，那我們就用買房來比喻。
想像你要買一間房子。現在有了 AI，就像你多了一個超強的房仲 + 設計師 + 工班，幫你找房、畫圖、裝潢。但你還是需要知道：
| 買房子 | 做網站 | 為什麼重要 |
|---|---|---|
| 結構體 — 地基、鋼筋、骨架 | HTML — 內容結構 | 結構不穩，什麼都白搭 |
| 設計 — 室內設計、空間規劃、風格 | CSS — 視覺樣式、版面配置 | 好不好看、好不好用 |
| 機電 — 水電管線、開關、智慧家電 | JavaScript — 互動功能、動態行為 | 讓房子能「運作」 |
| 地址 — 門牌號碼 | 網域 — yourname.com | 別人怎麼找到你 |
| 土地 — 房子蓋在哪裡 | 託管 — 網站放在哪台伺服器 | 你的網站要有個「家」 |
這篇文章就是給你那張「看房地圖」。
網站的本質
不管技術怎麼變，網站的本質不會變：
你的瀏覽器向某台電腦（伺服器）要資料，然後把資料顯示出來。
就這樣。所有的技術、框架、工具，都只是在優化這個過程。
三個核心元素（房子的三大系統）
| 元素 | 作用 | 買房比喻 |
|---|---|---|
| HTML | 內容結構 | 結構體（地基、鋼筋、骨架） |
| CSS | 外觀樣式 | 設計（室內設計、空間規劃） |
| JavaScript | 互動行為 | 機電（開關、水電、智慧家電） |
當你跟 AI 說「把這個按鈕改成藍色」，AI 會去改 CSS（換個油漆顏色）。 當你說「點擊按鈕後顯示一個彈窗」，AI 會去寫 JavaScript（裝一個新的開關）。
你不需要會寫，但你需要知道它們各自負責什麼，這樣才能：
- 跟 AI 溝通時用對詞彙
- 判斷 AI 給的答案對不對
- 出問題時知道往哪個方向找
靜態 vs 動態：兩種房型
靜態網站 = 樣品屋
- 所有內容都是「寫死」的
- 每個訪客看到的內容一樣
- 例如：個人網站、作品集、部落格
- 優點：便宜、安全、好維護（不用管複雜的後端）
動態網站 = 客製化豪宅
- 內容根據使用者或資料庫變化
- 需要後端伺服器處理
- 例如：Facebook、電商網站、會員系統
- 優點：功能強大、高度客製化
給初學者的建議：先從「樣品屋」開始。90% 的個人需求都能用靜態網站解決，而且現在的靜態網站技術（像 Astro）已經非常強大。
現代開發方式的選擇
| 方式 | 買房比喻 | 例子 |
|---|---|---|
| No-code 工具 | 買預售屋（選配色、選格局，但不能大改） | Wix、Squarespace、Framer |
| AI + 程式碼 | 找設計師 + 工班（你說想要什麼，他們幫你做） | Claude Code、Cursor、GitHub Copilot |
| 純手寫 | 自己當工班（完全掌控，但要會蓋） | VS Code + 自己寫 |
這篇文章假設你選的是 AI + 程式碼 這條路——你想要控制權，但讓 AI 幫你做大部分的事。
你的網站要住在哪裡？
網站做好了，要讓別人看到，就像房子蓋好了要有地址讓人找得到：
1. 網域（Domain）= 門牌地址
- 就是
yourname.com這種東西 - 需要跟網域商購買（一年約 NT$300-500）
- 常見網域商：Namecheap、Cloudflare、GoDaddy
2. 託管（Hosting）= 土地
- 你的網站檔案要放在某台伺服器上
- 現代方案：GitHub + Vercel 或 GitHub + Netlify
- 免費，而且自動化程度很高（像是有人幫你管社區）
開發流程概覽（蓋房子的步驟）
1. 規劃 → 你想要什麼房子？給誰住？幾房幾廳？
2. 設計 → 畫平面圖（手繪或用 Figma）
3. 施工 → 跟 AI 協作「蓋」網站
4. 驗收 → 在自己電腦上跑跑看，檢查有沒有漏水
5. 交屋 → 推到 GitHub，自動部署到 Vercel（入住！）
6. 維護 → 更新內容、修 bug、看訪客數據這個流程不管用什麼工具都一樣，差別只在於每個步驟你自己做多少、AI 幫你做多少。
跟 AI 協作的心法
1. 需求要具體
❌ 「幫我做一個房子」
✅ 「幫我設計一間 20 坪的兩房一廳，現代簡約風格，要有陽台，採光要好。」
同樣的：
❌ 「幫我做一個網站」
✅ 「幫我用 Astro 做一個個人作品集網站，要有首頁、作品頁、關於我頁面。風格要簡潔現代，深色主題。」
2. 分階段施工
不要一次叫 AI 做完所有事。先打地基（HTML 結構），再做裝潢（CSS 樣式），最後裝電器（JavaScript 功能）。
3. AI 會犯錯
AI 就像新手工班，有時候會出包。如果跑不起來：
- 把錯誤訊息貼給 AI（就像把漏水的照片傳給師傅）
- 讓 AI 解釋它做了什麼
- 不確定的話，問 AI「這樣做有什麼風險？」
4. 學會看驗收報告（錯誤訊息）
你不需要會寫程式，但要學會看錯誤訊息。通常錯誤訊息會告訴你：
- 哪個檔案出問題（哪個房間）
- 第幾行（哪個位置）
- 大概是什麼類型的錯誤（漏水？跳電？）
把這些資訊給 AI，它通常能幫你修好。
入住後要做的事
房子交屋只是開始，網站上線也一樣。
SEO：讓別人找得到你家
就像房子要登記地址、掛門牌，網站也要讓搜尋引擎找到：
- 設定好 title、description（門牌、信箱名字）
- 確保網站速度夠快（路好不好開）
- 提交 sitemap 給 Google（跟郵局登記地址）
數據分析：知道誰來過
- Google Analytics 4：看流量、訪客行為（誰來過、逛了哪些房間）
- Google Search Console：看搜尋表現（別人怎麼找到你的）
安全性：裝保全系統
- 確保用 HTTPS（門鎖要夠好）
- 定期更新依賴套件（保全系統要更新）
常見問題
「我完全不懂蓋房子，可以有自己的網站嗎？」
可以。用 No-code 工具（Framer、Wix）就像買預售屋，零基礎也能入住。如果想要更多控制權，跟著 AI 一步步做，也能完成。
「我該學 React 還是 Vue 還是…？」
先別急。這就像問「我該學水電還是木工？」——如果你只是要自住，不需要樣樣都會。先用 AI 幫你蓋出來，遇到瓶頸再學。
「免費託管有什麼限制？」
Vercel/Netlify 的免費方案對個人網站來說綽綽有餘。除非你的網站每月有幾十萬訪客（像百貨公司那種人流），不然不用擔心。
「需要買網域嗎？」
不一定。Vercel 會給你一個 yourproject.vercel.app 的免費網址（像是社區的統一地址）。但如果你認真經營，買一個自己的網域比較專業（有自己的門牌）。
下一步
根據你的目標：
| 我想… | 建議 |
|---|---|
| 做個人網站/作品集 | 用 Astro + AI 部署到 Vercel |
| 寫部落格 | 同上，Astro 內建 Markdown 支援 |
| 深入學前端 | 先理解 HTML/CSS/JS 基礎，再學框架 |
| 做電商/會員系統 | 考慮 Shopify 或找專業開發者 |
總結
AI 時代的網站開發，就像買房子一樣：
- 你要懂基本結構 — 知道地基、裝潢、水電各是什麼（HTML、CSS、JS）
- 你要會描述需求 — 跟 AI 說清楚你要什麼風格、幾房幾廳
- 你要會驗收 — 知道 AI 給的東西對不對、有沒有問題
掌握這三點，剩下的就是實作和累積經驗。
現在就開始看房吧。
聯絡我
想了解怎麼使用 Claude Code，或是用 Claude Code 開始打造自己的網站？填寫這份表單，我會跟你聯繫！