Netlify 完整指南：免費部署教學、費用方案與 Vercel 比較【2025】

你寫好了網站，興奮地想讓全世界看到。然後你發現：要租主機、設定伺服器、搞 SSL 憑證... 光想就頭痛。有沒有辦法把網站丟上去就自動上線？有，這就是 Netlify 存在的原因。

這篇文章會帶你從零認識 Netlify，包含免費方案能做什麼、什麼時候要付錢、跟 Vercel 該選誰。看完你會知道 Netlify 適不適合你的專案。

Netlify 是什麼？為什麼這麼多人用

Netlify 是一個專門部署網站的雲端平台。你把程式碼推上去，它自動幫你編譯、部署、上線。不用自己管伺服器，不用擔心網站掛掉。

為什麼 Netlify 這麼受歡迎？

說白了，Netlify 解決了一個痛點：部署太麻煩。

傳統部署網站要：
- 租一台 VPS 或虛擬主機
- 安裝 Nginx 或 Apache
- 設定 SSL 憑證
- 手動上傳檔案或設定 CI/CD
- 自己處理 CDN 加速

Netlify 把這些全包了。你只要：
1. 連結 GitHub repo
2. 設定 build 指令
3. 按下部署

三步驟，網站就上線了。而且免費。

Netlify 的核心特色

誰適合用 Netlify？

Netlify 特別適合這些類型的專案：

• 靜態網站：個人部落格、作品集、公司官網
• 前端框架：React、Vue、Next.js、Nuxt 專案
• 文件網站：用 VitePress、Docusaurus 建的文件站
• 行銷活動頁：Landing page、促銷頁面

如果你的網站需要複雜的後端邏輯（像是即時聊天、大量資料庫操作），Netlify 可能不是最佳選擇。但如果只是需要簡單的 API 功能，Netlify Functions 其實夠用了。

Netlify 免費方案到底能用多少？

這是大家最關心的問題：免費版夠不夠用？

答案是：對大部分個人專案和小型網站來說，完全夠用。

免費方案的具體限制

100GB 頻寬是多少？

假設你的網站首頁大小是 2MB（包含圖片、CSS、JS），100GB 頻寬大約可以支撐：

100GB ÷ 2MB = 50,000 次頁面瀏覽

如果你的網站優化得好，首頁只有 500KB，那就是 200,000 次瀏覽。

對個人部落格或小型專案來說，一個月 20 萬瀏覽量？免費方案綽綽有餘。

什麼情況會超過免費額度？

根據實際使用經驗，這些情況容易超額：

1. 圖片太多太大：沒壓縮的高清圖片會快速消耗頻寬
2. Build 太頻繁：每次小修改都 push，300 分鐘很快用完
3. Function 被濫用：沒做 rate limiting，被惡意呼叫
4. 突然爆紅：文章上了 Hacker News 或被大量分享

如果你的網站流量穩定、內容有做優化，免費方案可以撐很久。

免費方案的隱藏限制

有些限制官網沒有大字寫出來：

• Build 平行數：免費版一次只能跑 1 個 build
• Analytics：詳細流量分析要付費
• Background Functions：長時間執行的函數要 Pro 方案
• Team 協作：免費版只有 1 個 member

想了解更多免費方案細節？看這篇 Netlify 免費方案完整解析。

Netlify 費用怎麼算？什麼時候要升級

免費方案不夠用時，Netlify 有三種付費方案。

方案價格一覽

什麼時候該升級到 Pro？

這些訊號代表你該考慮付費了：

• 每月頻寬用量超過 80GB
• Build 時間經常不夠用
• 需要多人協作管理網站
• 想要詳細的流量分析
• 需要更快的 build 速度（平行執行）

超額費用怎麼計算？

如果不想升級但偶爾超額，Netlify 的超額計費是：

• 頻寬：$20/100GB
• Build 時間：$7/500 分鐘
• Functions：$25/200 萬次

重要提醒：超額費用會自動收取，建議設定用量警報避免帳單驚喜。

想精算自己需要哪個方案？看這篇 Netlify 費用計算完整指南。

5 分鐘快速部署：Netlify Drop 教學

沒有 GitHub 帳號？沒關係，Netlify 有一個超簡單的部署方式叫 Netlify Drop。

什麼是 Netlify Drop？

Netlify Drop 是一個拖曳部署功能。你把網站資料夾拖進去，幾秒鐘後就上線了。

優點：
- 不需要 Git
- 不需要任何設定
- 不需要帳號（但建議註冊）

缺點：
- 沒有自動部署
- 更新要手動重新拖曳
- 不適合需要 build 的專案

快速部署步驟

1. 打開 drop.netlify.com
2. 把你的網站資料夾拖進去
3. 等待上傳完成
4. 獲得一個隨機網址（像是 random-name-12345.netlify.app）

就這樣，你的網站已經上線了。

適合用 Netlify Drop 的情況

• 快速展示靜態 HTML 頁面
• 測試網站在線上的效果
• 給客戶看 prototype
• 臨時分享檔案

如果你需要正式部署，建議還是連結 GitHub，這樣才有自動部署的好處。

完整的 Netlify Drop 使用教學？看這篇 Netlify Drop 拖曳部署完整教學。

💡 VibeFix 小提醒：Netlify Drop 很方便，但正式專案建議用 Git 連結。這樣每次修改都有紀錄，出問題也能快速回滾。

部署遇到問題？讓 VibeFix 幫你搞定

從 GitHub 部署網站：完整流程

大部分人用 Netlify 都是連結 GitHub 自動部署。這樣每次 push code，網站就自動更新。

步驟一：註冊 Netlify 帳號

1. 前往 netlify.com
2. 點選 "Sign up"
3. 選擇用 GitHub 登入（推薦）
4. 授權 Netlify 存取你的 repo

步驟二：新增網站

1. 登入後點選 "Add new site"
2. 選擇 "Import an existing project"
3. 選擇 GitHub
4. 找到你要部署的 repo

步驟三：設定 Build

Netlify 會嘗試自動偵測你的框架，但你也可以手動設定：

步驟四：部署！

點選 "Deploy site"，Netlify 會：
1. Clone 你的 repo
2. 執行 build 指令
3. 把產出的檔案部署到 CDN
4. 給你一個網址

第一次部署通常需要 1-3 分鐘，之後的部署會更快。

設定自動部署

預設情況下，Netlify 會在這些時候自動部署：

• 推送到設定的 branch（通常是 main）
• Pull Request 合併時
• 手動在 Netlify 觸發

你也可以設定只在特定 branch 部署，或是完全關閉自動部署。

Netlify 核心功能深入解析

除了基本部署，Netlify 還有很多實用功能。

Deploy Preview：PR 預覽功能

這是 Netlify 最棒的功能之一。每次開 Pull Request，Netlify 會自動部署一個預覽版本，有獨立網址。

好處：
- 程式碼 review 時可以直接看效果
- 不影響正式網站
- QA 可以在合併前測試

Serverless Functions

不想另外架後端？Netlify Functions 讓你用 JavaScript 或 TypeScript 寫簡單的 API。

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

部署後就能這樣呼叫：

https://your-site.netlify.app/.netlify/functions/hello

Form 表單處理

網站有聯絡表單？不用自己寫後端處理。在 HTML 加上 netlify 屬性，Netlify 就會自動收集提交的資料。

<form name="contact" netlify>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">送出</button>
</form>

提交的資料會出現在 Netlify 後台，也可以設定 email 通知。

Split Testing（A/B 測試）

想測試兩個版本的網站哪個效果好？Netlify 內建 Split Testing，可以把流量分配到不同 branch。

這個功能在 Pro 方案才比較完整，免費版功能有限。

Edge Functions

比 Serverless Functions 更快，在 CDN 邊緣節點執行。適合需要低延遲的場景，像是：

• 根據地區顯示不同內容
• 驗證請求
• URL 重寫

Netlify vs Vercel：該選哪個？

這是最常被問的問題。兩個平台都很優秀，但有些差異。

快速比較表

選 Netlify 的情況

• 你需要內建的表單處理
• 你想用 Netlify CMS 管理內容
• 你的專案不是 Next.js
• 你比較習慣 Netlify 的介面
• 你需要 Split Testing 功能

選 Vercel 的情況

• 你的專案用 Next.js
• 你需要更多 Serverless 部署區域
• 你需要更多免費 build 時間
• 你重視 Edge Functions 效能

其實...兩個都可以

說實話，對大部分專案來說，兩個平台的差異沒有那麼大。都是優秀的平台，免費方案都很夠用。

如果你是新手，建議：
- 用 Next.js → 選 Vercel
- 其他框架 → 兩個都可以，選你喜歡的介面

更詳細的比較分析？看這篇 Netlify vs Vercel 完整比較。

💡 VibeFix 小提醒：不確定該選哪個平台？可以兩個都試試，反正都免費。最終選擇通常取決於團隊習慣和專案需求。

需要專業建議？讓 VibeFix 幫你評估

常見錯誤與解決方法

用 Netlify 難免會遇到問題，這裡整理最常見的錯誤。

Build Failed：編譯失敗

這是最常見的問題。可能原因：

1. Node 版本不對：在 netlify.toml 指定版本

[build.environment]
  NODE_VERSION = "18"

2. 套件安裝失敗：檢查 package.json 是否正確

3. Build 指令錯：確認 build command 跟本地相同

4. 環境變數沒設：去 Site settings > Environment variables 新增

502 Bad Gateway

通常跟 Serverless Functions 有關：

• Function 執行超時（免費版限制 10 秒）
• Function 程式碼有 bug
• 記憶體不足

詳細解法看這篇 Netlify 502 錯誤完整解決指南。

自訂網域問題

設定自訂網域常見卡關點：

• DNS 還沒生效（最多等 48 小時）
• CNAME 設定錯誤
• SSL 憑證還在發行中

完整的網域設定教學看 Netlify 自訂網域設定教學。

網站空白或 404

• 確認 Publish directory 設定正確
• 檢查 build 有沒有實際產出檔案
• SPA 需要設定 redirect 規則

部署成功但內容沒更新

• 清除瀏覽器快取
• 檢查是否部署到正確的 branch
• 確認 Netlify 的 build cache 沒有問題（可以 clear cache and retry）

Netlify CMS：讓非工程師也能更新網站

如果你的網站內容需要常常更新，但更新的人不會用 Git，Netlify CMS 是個好選擇。

什麼是 Netlify CMS？

Netlify CMS 是一個開源的 Headless CMS。它不需要資料庫，內容直接存成檔案（通常是 Markdown），存在你的 Git repo 裡。

優點：
- 內容有版本控制
- 不需要額外的資料庫
- 編輯介面友善
- 跟 Netlify 無縫整合

缺點：
- 設定有一點複雜
- 功能比專業 CMS 少
- 不適合超大量內容

適合用 Netlify CMS 的情況

• 部落格需要多人編輯
• 公司官網內容要非工程師更新
• 想要簡單的內容管理但不想用 WordPress

詳細設定教學看 Netlify CMS 完整設定教學。

Next.js 部署到 Netlify 注意事項

Next.js 是目前最熱門的 React 框架，部署到 Netlify 有些眉角要注意。

基本設定

Netlify 需要安裝 @netlify/plugin-nextjs 才能正確處理 Next.js 的功能：

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

注意事項

1. ISR 支援：Netlify 有支援，但行為可能跟 Vercel 略有不同
2. Image Optimization：需要額外設定或用 Cloudinary
3. Middleware：Netlify 用 Edge Functions 處理，有些限制
4. API Routes：會自動轉成 Serverless Functions

如果你的 Next.js 專案用了很多進階功能，建議評估一下 Vercel 是不是更適合。

完整的 Next.js 部署教學看 Next.js 部署到 Netlify 完整指南。

常見問題 FAQ

Netlify 真的免費嗎？

是的，Starter 方案完全免費。但有用量限制（頻寬 100GB、Build 300 分鐘等），超過要付費或升級。

Netlify 跟 GitHub Pages 有什麼不同？

GitHub Pages 只能部署純靜態檔案，沒有 build 功能。Netlify 可以執行 build 指令，而且有更多功能（Forms、Functions 等）。

我的網站流量很大，Netlify 夠用嗎？

Netlify 的 CDN 效能不錯，Pro 方案有 1TB 頻寬。如果流量更大，可以談 Enterprise 方案或評估其他方案。

Netlify 有中文介面嗎？

目前沒有，介面都是英文。但操作不複雜，基本英文就能使用。

網站資料存在哪裡？

你的程式碼在 GitHub（或其他 Git 平台），Netlify 只存 build 後的檔案。Netlify 不會修改你的原始碼。

Netlify 會倒閉嗎？我的網站怎麼辦？

Netlify 是大公司，短期內不太可能。但就算倒了，你的程式碼在 GitHub，隨時可以部署到其他平台。

可以用 Netlify 架購物網站嗎？

可以，但要搭配第三方服務（像 Stripe、Snipcart）。Netlify 本身不提供購物車、金流等功能。

總結：Netlify 適合你嗎？

經過這篇文章，你應該對 Netlify 有完整的認識了。

選 Netlify 如果你：
- 想要最簡單的部署體驗
- 需要免費又好用的主機
- 想要內建的表單處理
- 專案是靜態網站或 JAMstack

可能不適合如果你：
- 需要複雜的後端邏輯
- 需要即時資料庫
- 專案是傳統的 server-side rendering
- 流量超級大（Enterprise 等級）

對大部分前端專案來說，Netlify 是個非常好的選擇。免費方案功能齊全，付費方案也不貴。

最好的學習方式就是動手試試。現在就去 netlify.com 部署你的第一個網站吧！

VibeFix 是專門幫助非工程師處理程式部署問題的服務。AI 幫你寫代碼，我們幫你上線。

Netlify 設定有問題？網站部署卡關？讓 VibeFix 幫你搞定