一句話說明

用 AI 做網站可以把開發時間壓縮到幾小時，但 AI 產生的程式碼在安全性和效能上需要人工檢查，不能直接丟上線就不管了。

第 1 步：選網域和 DNS

買網域用 Cloudflare Registrar 或 Namecheap，選 .com 或 .tw。設定 DNS 時把 nameserver 指向你的 hosting 平台。這一步跟 AI 無關，但很多人跳過直接寫程式，結果上線時才發現 DNS 沒設好。

建議：如果是個人品牌或作品集，直接用 Vercel 或 Netlify 的免費子網域先上線測試，確認內容沒問題再買自己的網域。

第 2 步：選 Hosting 平台

靜態網站（Landing Page、作品集）：Vercel、Netlify、GitHub Pages，免費方案就夠用。

需要後端（會員系統、資料庫）：Vercel + Supabase、Railway、Render。Bolt.new 可以直接產生 full-stack 專案並部署到自己的 hosting。

WordPress：Cloudways 或 SiteGround，搭配 AI 外掛（Jetwp.ai、Jetwp 等）做內容生成。

第 3 步：用 AI 生成設計稿

Vercel v0 可以用自然語言描述你想要的頁面，它會產生 React + Tailwind CSS 的元件。例如輸入「一個 SaaS 產品的定價頁面，三個方案，深色主題」，它會給你可以直接用的程式碼。

限制：v0 產生的設計比較偏向北美風格的 SaaS 頁面，台灣本地的設計偏好（例如資訊密度較高、中文排版的行距和字級）需要手動調整。AI 不會幫你做資訊架構（Information Architecture），哪些內容放首頁、哪些放子頁、導覽動線怎麼設計，這些需要你自己規劃。

第 4 步：準備網站內容

AI 可以幫你產生文案初稿，但直接用 AI 產生的文案上線有兩個問題：一是讀起來很像 AI 寫的（用詞制式、節奏單一），二是 AI 可能產生不正確的資訊。

建議流程：自己寫大綱和關鍵事實 → 用 AI 擴寫 → 自己校對修改 → 再用 AI 檢查錯字和語順。

圖片：用 AI 生成的圖片（Midjourney、DALL-E）要注意版權授權條款。產品照片和團隊照片還是用真實攝影比較好，AI 生成的人物照片容易被識破，反而傷害信任感。

第 5 步：AI 輔助開發

Vercel v0：適合不會寫程式的人。描述需求 → 產生 React 元件 → 預覽 → 微調 → 部署。從描述到可展示的頁面大約 30 分鐘。限制是只能做前端，需要後端功能時要另外接。

Bolt.new：可以用自然語言建立 full-stack 專案（前端 + 後端 + 資料庫）。它會在瀏覽器裡建立一個可用的開發環境，你可以即時預覽。適合快速原型，但產生的程式碼品質參差不齊，上線前需要仔細審查。

Cursor：適合有程式基礎的人。在 VS Code 的基礎上加了 AI 輔助，可以用自然語言描述功能，它幫你寫程式碼。靈活度最高，但學習曲線也最高。

WordPress + AI 外掛：最快上線的路徑。選一個佈景主題 → 用 AI 外掛產生頁面內容 → 調整版面 → 上線。適合部落格和中小企業官網。

第 6 步：測試

在不同裝置上測試：手機（iOS Safari + Android Chrome）、平板、桌面瀏覽器。AI 產生的 CSS 經常在特定螢幕寬度下出問題，特別是 375px（iPhone SE）和 768px（iPad）的斷點。

用 Chrome DevTools 的 Lighthouse 跑一次效能、無障礙、SEO 評分。AI 產生的程式碼常見的問題：圖片沒有設定寬高導致版面位移（CLS）、缺少 alt 屬性、標題層級跳過（h1 直接跳到 h3）。

第 7 步：SEO 基礎設定

每個頁面要有獨立的 title 和 meta description。用 AI 產生初稿沒問題，但要確認每頁的 title 都不同，description 要包含目標關鍵字。

設定 Open Graph 標籤（og:title、og:description、og:image），讓頁面在社群媒體分享時有正確的預覽。建立 sitemap.xml 和 robots.txt。如果用 Next.js（Vercel v0 預設框架），這些大多已經內建。

第 8 步：安全檢查

這是 AI 建站最容易被忽略的步驟。AI 產生的程式碼常見的安全問題：

XSS（跨站腳本攻擊）。AI 產生的元件如果使用 dangerouslySetInnerHTML（React）或 v-html（Vue）來顯示使用者輸入的內容，就有 XSS 風險。用 grep -rn 'dangerouslySetInnerHTML\|v-html' src/ 搜尋你的專案。

環境變數外洩。AI 產生的程式碼有時會把 API Key 直接寫在前端程式碼裡。檢查方式：grep -rnE '(sk-|pk_|NEXT_PUBLIC_.*KEY)' src/。確認所有機密都放在 .env 檔案裡，而且 .env 有加入 .gitignore。

HTTPS。部署到 Vercel 或 Netlify 時預設就有 HTTPS。如果自架伺服器，用 Let's Encrypt 設定免費憑證。確認所有 HTTP 請求都會 redirect 到 HTTPS。

相依套件漏洞。跑一次 npm audit，看有沒有已知的安全漏洞。AI 產生的 package.json 有時候會引入過時或有漏洞的套件版本。

CSP（Content Security Policy）。在 HTTP header 中設定 CSP，限制頁面可以載入的外部資源。這可以降低 XSS 攻擊的影響範圍。

第 9 步：部署上線

Vercel 部署流程：連結 GitHub repo → 設定環境變數 → 點 Deploy。每次 push 到 main branch 都會自動觸發部署。建議設定 Preview Deployment，讓每個 PR 都有獨立的預覽網址。

上線前用 curl -I https://你的網域 檢查 HTTP header，確認 HTTPS redirect、Cache-Control、CSP 都有正確設定。

第 10 步：上線後監控

設定 Google Search Console，監控搜尋表現和索引狀態。設定 Google Analytics 或 Plausible Analytics（注重隱私的替代方案）追蹤流量。

用 UptimeRobot（免費）監控網站可用性，掛掉時會收到通知。定期跑 npm audit 檢查相依套件的安全更新。

各工具費用比較

Vercel v0：免費版可以產生元件，Pro 版每月 20 美元。Vercel Hosting 免費方案含 100GB 流量。

Bolt.new：免費版每天有使用次數限制，Pro 版約每月 20 美元。不含 hosting，產生的專案需要自行部署。

Cursor：免費版有 AI 使用次數限制，Pro 版每月 20 美元。只是開發工具，hosting 費用另計。

WordPress + Hosting：Cloudways 最低方案每月約 14 美元，SiteGround 約每月 3 美元（首年優惠）。AI 外掛通常另外收費。

安全與限制

AI 建站最大的風險是「看起來沒問題就直接上線」。AI 產生的程式碼在功能上通常可以正常運作，但可能缺少輸入驗證、錯誤處理、存取控制等安全機制。

不要用 AI 建站工具處理金流。支付功能需要 PCI DSS 合規，AI 產生的程式碼無法保證符合這些標準。使用 Stripe、綠界等第三方金流服務，讓它們處理信用卡資訊。

如果網站收集使用者個資（姓名、Email、電話），需要在網站上放隱私政策，並確認資料儲存方式符合台灣個資法的要求。

知識檢測

讀完文章後，測試一下你對這個主題的理解。

常見問題

不會寫程式可以用 AI 做網站嗎？

可以。Vercel v0 和 Bolt.new 都支援用自然語言描述需求，不需要寫程式。但如果你想要客製化程度較高的網站，有基本的 HTML/CSS 知識會讓你更有效率地調整 AI 產生的結果。

用 AI 做的網站 SEO 表現好嗎？

AI 工具產生的網站在技術 SEO 方面通常沒問題（正確的 HTML 結構、Response 速度快）。但 SEO 的核心還是內容品質和使用者意圖匹配，這些不是 AI 自動產生就能解決的。

免費方案可以做到什麼程度？

Vercel v0 免費版 + Vercel Hosting 免費方案可以做出一個有自訂網域的靜態網站。CapCut 免費版可以做基本的短影片。但免費方案通常有流量限制和品牌浮水印，正式商用建議升級到付費方案。

AI 產生的程式碼可以直接上線嗎？

技術上可以，但不建議。AI 產生的程式碼需要經過安全檢查（XSS、環境變數外洩、相依套件漏洞）和效能測試（Lighthouse 評分）之後才適合上線。跳過這些步驟等於把網站的安全交給 AI 來決定，風險很高。

做一個網站大概要花多少錢？

最低成本路線：Vercel v0 免費版 + Vercel Hosting 免費方案 + 免費網域（xxx.vercel.app）= 0 元。正式商用：自訂網域（每年約 300-500 台幣）+ Vercel Pro（每月 20 美元）+ Cursor Pro（每月 20 美元）= 每月約 1,500 台幣。

相關文章

參考資料

  • Vercel v0 官方文件
  • Bolt.new 使用說明
  • OWASP Top 10 Web Application Security Risks
  • Let's Encrypt 免費 SSL 憑證