我要告訴妳一件聽起來可能難以置信的事：我已經建了超過 15 個網站，而我完全不會寫程式。
沒有任何一行 HTML、CSS 或 JavaScript 是我自己寫的。我經營的每個網站——包括妳正在閱讀的這個——都完全是用 AI 工具建立的。
如果妳是一個心想「我想要有自己的網站，但我不懂技術」的媽媽，這篇指南就是為妳寫的。我會一步一步告訴妳我是怎麼做到的。
我的故事：從零技術技能到 15+ 個網站
兩年前，我是一個沒有科技背景的全職媽媽。我想開始線上事業，但以為建網站需要昂貴的工程師或花好幾年學程式。
後來我發現了 ChatGPT 和 Claude 這樣的 AI 工具。我從問簡單的問題開始，像是「你可以幫我建一個基本的網站嗎？」然後驚訝地發現它真的產生了可以運作的程式碼。
快轉到今天——我在不同領域經營多個網站，全部都用 AI 建立和維護。零程式課程。零工程師費用。
開始需要什麼
最棒的部分——幾乎所有東西都是免費的：
| 工具 | 用途 | 費用 |
|---|---|---|
| Claude 或 ChatGPT | 產生程式碼和排除問題 | 有免費版 |
| GitHub | 儲存網站程式碼 | 免費 |
| Cloudflare Pages 或 Vercel | 託管網站 | 免費 |
| Namecheap 或 Cloudflare | 網域名稱 | 約 10-15 美元/年 |
| VS Code | 編輯程式碼檔案 | 免費 |
| Canva | 設計圖片和 Logo | 有免費版 |
總啟動成本：10-15 美元/年（只有網域名稱的費用）。
逐步教學：建立妳的第一個網站
步驟 1：選擇網站平台
妳不需要知道這些的差異——只要告訴 AI 妳想用哪一個：
| 平台 | 最適合 | 難度 |
|---|---|---|
| Astro | 部落格和內容網站 | 搭配 AI 很容易 |
| Next.js | 動態網頁應用 | 搭配 AI 中等 |
| Vite + React | 互動式網站和管理後台 | 搭配 AI 中等 |
| 純 HTML/CSS | 簡單的登陸頁面 | 搭配 AI 最簡單 |
我對新手的建議： 從 Astro 做部落格或純 HTML 做登陸頁面開始。這就是我當初做的。
步驟 2：用白話文向 AI 描述妳想要什麼
這就是魔法發生的地方。打開 Claude 或 ChatGPT，用白話文描述妳的網站。要具體：
弱提示詞：
「幫我做一個網站。」
強提示詞：
「用 Astro 建立一個個人部落格網站。我想要一個列出部落格文章和封面圖片的首頁、一個關於頁面和一個聯繫頁面。使用粉色和白色配色。網站要適合手機瀏覽。」
妳給的細節越多，結果越好。包含：
- 妳想要什麼頁面
- 顏色偏好
- 需要什麼功能（部落格、商店、聯繫表單）
- 妳喜歡的任何網站作為靈感
步驟 3：設置專案
AI 會為妳產生程式碼檔案。以下是我的做法：
- 請 AI 建立專案結構 —— 它會告訴妳要建立什麼檔案以及放在哪裡
- 把程式碼複製到 VS Code —— 只要貼上 AI 給妳的內容
- 問 AI 如何在本地運行 —— 它會給妳確切的終端機指令
- 在瀏覽器中看到妳的網站 —— 通常在
localhost:3000或localhost:4321
不用擔心看不懂程式碼。妳不需要懂。AI 是妳和電腦之間的翻譯員。
步驟 4：自訂和加入內容
一旦妳的基本網站運行起來，開始自訂：
- 「把頁首顏色改成珊瑚粉」 —— AI 會準確告訴妳要改哪個檔案和哪一行
- 「新增一篇關於 X 的部落格文章」 —— AI 會為妳建立 markdown 檔案
- 「在手機上把字型放大」 —— AI 處理響應式設計
我真的像跟網頁工程師說話一樣跟 AI 對話。差別在哪？這個工程師 24 小時工作、從不嫌妳問「笨問題」、而且是免費的。
步驟 5：免費部署上線
讓妳的網站在網路上上線出乎意料地簡單：
- 把程式碼推送到 GitHub —— AI 會帶妳一步步完成
- 連接到 Cloudflare Pages 或 Vercel —— 點幾個按鈕
- 加入妳的網域名稱 —— 跟著設定精靈走
- 完成！ 妳的網站上線了
我的大部分網站都用 Cloudflare Pages，因為它快速而且完全免費。
可以搭配 AI 使用的免費建站工具
如果程式碼方式一開始感覺太嚇人，以下是一些無程式碼平台，AI 仍然可以幫助妳：
| 平台 | 免費方案 | AI 協助方式 |
|---|---|---|
| WordPress.com | 基本網站免費 | AI 寫內容、協助主題 |
| Carrd | 1 個免費網站 | AI 設計版面概念 |
| Google Sites | 無限免費 | AI 建立內容結構 |
| Notion + Super | Notion 免費 | AI 組織一切 |
| GitHub Pages | 無限 | AI 產生所有程式碼 |
小技巧： 即使用無程式碼平台，AI 也能幫妳寫更好的內容、規劃網站結構，以及用 Canva 製作圖片。
建立 15+ 個網站的真實心得
以下是我辛苦學到的經驗：
從簡單開始
我的第一個網站是一個單頁登陸頁面。不要在第一天就試圖建造 Amazon。從 3-5 個頁面開始，然後慢慢擴展。
保存 AI 對話
當 AI 給妳可以運作的程式碼時，保存那個對話。之後在其他網站建立類似功能時會需要參考。
學會描述問題
妳需要的第一技能不是寫程式——而是描述哪裡出了問題。與其說「我的網站壞了」，不如說「當我在手機上點擊選單按鈕時，什麼都沒發生」。更好的描述 = 更好的 AI 解決方案。
使用截圖
大多數 AI 工具現在都能讀取截圖。當某些東西看起來不對時，截圖然後問「為什麼這看起來跟我預期的不一樣？」
一次只改一件事
不要一次要求 AI 改 10 件事。改一件、測試、然後繼續。這樣如果出問題，妳就知道是什麼造成的。
我如何維護我的網站
管理 15+ 個網站聽起來很嚇人，但 AI 讓它變得可控：
- 內容更新： 我描述想寫什麼，AI 起草，我審核後發布
- 修復錯誤： 我截圖問題，給 AI 看，然後照著修復
- 新功能： 我描述想加什麼，AI 產生程式碼
- SEO 優化： AI 幫助處理 meta 描述、關鍵字和結構。我們免費的 SEO Meta 描述撰寫器 讓這更快。
我大部分的網站每週需要不到 1 小時的維護。需要更多關注的是那些正在積極成長的——這是好問題。
常見的恐懼（以及為什麼它們是錯的）
「如果 AI 產生了有問題的程式碼怎麼辦？」 這會發生！但 AI 也能修復它。只要貼上錯誤訊息然後要求解決方案。我從未遇到 AI 最終無法解決的問題。
「如果我的網站被駭怎麼辦？」 靜態網站（像是用 Astro 建的）非常安全，因為沒有資料庫可以攻擊。而且 Cloudflare 提供免費的 SSL 和 DDoS 保護。
「如果我需要更新某些東西，AI 給了不同的程式碼怎麼辦？」 這是真的。我的解決方法是保持 AI 對話的組織性，在要求修改前總是描述專案的完整上下文。
「這算作弊嗎？」 不！使用計算機算是數學作弊嗎？AI 是工具。創意、策略和內容仍然來自妳。AI 只是處理技術翻譯。
妳的行動計畫
以下是我希望妳這週做的事：
- 第 1 天： 註冊 Claude（免費）和 VS Code（免費）
- 第 2 天： 請 Claude 建立一個關於妳喜歡的東西的簡單單頁網站
- 第 3 天： 按照 Claude 的指示在本地運行它
- 第 4 天： 做 3 個自訂修改（顏色、文字、版面）
- 第 5 天： 建立 GitHub 帳號並推送妳的網站
- 第 6 天： 部署到 Cloudflare Pages 或 Vercel
- 第 7 天： 把妳的上線網站連結分享給朋友！
一週。零程式知識。一個上線的網站。
如果我這個完全沒有科技背景的兩個孩子的媽都能做到，妳也可以。工具是免費的，AI 很有耐心，而唯一站在妳和妳自己網站之間的，就是開始行動。
有關於建立第一個網站的問題嗎？寫訊息給我——我喜歡幫媽媽們踏出第一步！
