Netlify Deploy 完整教學：靜態網站一鍵部署指南

「我用 React 做了一個網站，想讓朋友看看，但不知道怎麼放上網...」

如果你有這個困擾，Netlify 絕對是最簡單的解決方案。只要把 GitHub 連上去，每次 push 程式碼就自動部署，完全不用管伺服器的事。

這篇文章會帶你從零開始，學會用 Netlify 部署靜態網站。從連接 GitHub、設定 Build 指令、到綁定自訂網域，一步步帶你完成。

Netlify 是什麼？

在開始部署前，先認識一下 Netlify 這個平台。

Netlify 平台介紹

Netlify 是專門為靜態網站和 JAMstack 應用設計的部署平台，2014 年創立，現在是最受歡迎的前端部署平台之一。

Netlify 的核心理念：

連接 Git，自動部署，全球 CDN 分發。

當你把 GitHub repository 連接到 Netlify：
1. 每次 push 程式碼，自動觸發 Build
2. Build 完成後，自動部署到全球 CDN
3. 提供一個 xxx.netlify.app 網址

這整個過程完全自動化，你只需要專注寫程式碼就好。

Netlify 免費方案提供：
- 每月 100 GB 頻寬
- 每月 300 Build 分鐘
- 無限靜態網站數量
- 自動 HTTPS
- 自訂網域

對於個人專案和小型網站，免費方案綽綽有餘。

Netlify vs Vercel vs GitHub Pages

這三個是最常被比較的靜態網站部署平台：

選擇建議

• Netlify：靜態網站、需要表單功能、JAMstack 專案
• Vercel：Next.js 專案、需要 Edge Functions
• GitHub Pages：簡單的文件網站、個人部落格

Netlify 適合什麼專案

非常適合
- React / Vue / Angular 單頁應用（SPA）
- 靜態網站生成器（Gatsby、Hugo、Jekyll）
- 作品集、個人網站
- 文件網站
- Landing Page

可能不適合
- 需要後端 API 的全端應用（可搭配 Netlify Functions）
- 需要資料庫的應用（Netlify 本身不提供）
- 需要長時間運行的背景任務

想了解更多部署選項，可以參考 程式部署完整指南。

Netlify 部署方式

Netlify 提供三種部署方式，各有適用情境。

方式一：連接 Git 儲存庫（推薦）

這是最推薦的方式，實現「push 即部署」的自動化流程：

優點
- 自動化：push 就部署
- 版本控制：每個 commit 都有對應的部署
- 分支預覽：每個 PR 都有獨立的預覽 URL
- 回滾容易：可以一鍵回到前一個版本

適合
- 團隊協作專案
- 需要持續更新的網站
- 想要 CI/CD 流程的專案

方式二：拖曳上傳

直接把 build 好的資料夾拖到 Netlify 網站：

優點
- 超級簡單，不需要 Git
- 適合快速測試

缺點
- 沒有版本控制
- 每次更新都要手動上傳
- 不適合正式專案

適合
- 快速展示靜態 HTML
- 一次性的 Landing Page
- 測試 Build 結果

方式三：Netlify CLI

使用命令列工具部署：

# 安裝 Netlify CLI
npm install -g netlify-cli

# 登入
netlify login

# 部署（手動）
netlify deploy

# 部署到正式環境
netlify deploy --prod

優點
- 可以整合到自己的 CI/CD 流程
- 適合進階使用者

適合
- 已有其他 CI/CD 工具
- 需要客製化部署流程

💡 Netlify 設定卡關？ 雖然 Netlify 已經很簡單了，但 Build 設定和環境變數有時還是會讓人困惑。如果你遇到問題，讓 VibeFix 幫你處理，我們可以快速幫你搞定部署設定。

Netlify 部署實戰

接下來一步步帶你完成 Netlify 部署。我們以連接 GitHub 的方式為例。

Step 1：註冊 Netlify 帳號

1. 前往 Netlify 官網
2. 點選「Sign up」
3. 選擇「Sign up with GitHub」（推薦，之後連接更方便）
4. 授權 Netlify 存取你的 GitHub 帳號

Step 2：連接 GitHub 專案

1. 登入後，點選「Add new site」→「Import an existing project」
2. 選擇「Deploy with GitHub」
3. 選擇你要部署的 repository
4. 如果看不到 repository，點選「Configure the Netlify app on GitHub」調整權限

Step 3：設定 Build 指令

Netlify 需要知道如何建置你的專案：

常見框架的設定

Step 4：部署與預覽

設定完成後，點選「Deploy site」，Netlify 就會開始建置：

1. Building：執行你的 build command
2. Processing：處理和優化靜態檔案
3. Published：部署到 CDN

第一次部署通常需要 1-3 分鐘。完成後會得到一個網址，例如：
https://amazing-site-abc123.netlify.app

查看部署日誌

如果 Build 失敗，可以在「Deploys」頁面查看詳細日誌：

10:30:00 AM: Build ready to start
10:30:05 AM: Installing dependencies
10:30:30 AM: npm run build
10:31:00 AM: Build successful
10:31:05 AM: Deploying to CDN
10:31:10 AM: Published

Step 5：自訂網域設定

預設的 .netlify.app 網址不太好記，你可以設定自己的網域：

新增自訂網域

1. 進入 Site settings → Domain management
2. 點選「Add custom domain」
3. 輸入你的網域，例如 www.yourdomain.com

DNS 設定

Netlify 提供兩種方式：

方式一：使用 Netlify DNS（推薦）
- 將網域的 Nameservers 指向 Netlify
- Netlify 會自動處理所有 DNS 設定

方式二：外部 DNS
- 在你的 DNS 服務商新增記錄：
- A Record：指向 75.2.60.5
- 或 CNAME：指向 your-site.netlify.app

自動 SSL

設定好網域後，Netlify 會自動申請 Let's Encrypt 憑證，通常幾分鐘內就會生效。完全不用手動處理！

Netlify 進階功能

Netlify 不只是靜態網站託管，還有很多強大的功能。

表單處理

Netlify 內建表單處理功能，不需要後端就能收集表單資料：

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" placeholder="姓名" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="訊息"></textarea>
  <button type="submit">送出</button>
</form>

只要加上 data-netlify="true"，Netlify 就會自動處理：
- 表單提交會儲存在 Netlify 後台
- 可以設定 Email 通知
- 可以串接 Zapier、Slack 等服務
- 免費方案每月 100 次提交

Serverless Functions

需要一些後端邏輯？Netlify Functions 讓你用 JavaScript 寫 Serverless 函式：

建立 Function

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  const name = event.queryStringParameters.name || 'World';

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: `Hello, ${name}!`
    })
  };
};

呼叫方式

https://your-site.netlify.app/.netlify/functions/hello?name=VibeFix

免費額度
- 每月 125,000 次調用
- 每月 100 小時運算時間

適合用於：
- 表單處理（搭配第三方服務）
- API 代理（隱藏 API Key）
- 簡單的資料處理

分支部署與 Preview

Netlify 的 Deploy Previews 功能超實用：

分支部署
- 每個 Git 分支可以有獨立的部署
- 例如 dev 分支部署到 dev--your-site.netlify.app

PR Preview
- 每個 Pull Request 自動產生預覽網址
- 團隊成員可以直接看到改動結果
- PR 關閉後預覽會自動清除

設定方式

1. 進入 Site settings → Build & deploy
2. 找到「Deploy contexts」
3. 設定要部署的分支

想比較其他平台，可以參考 Vercel 部署教學。

Netlify 常見問題

部署 Netlify 時最常遇到的問題和解決方法。

Build Failed

錯誤訊息

Build failed due to a user error: Build script returned non-zero exit code: 1

常見原因與解決方法

1. 依賴安裝失敗
   bash # 確認 package-lock.json 已 commit git add package-lock.json git commit -m "Add package-lock.json"

2. Node 版本不對

在 netlify.toml 設定 Node 版本：
toml [build.environment] NODE_VERSION = "18"

3. Build 指令錯誤

確認 package.json 有正確的 build script：
json { "scripts": { "build": "vite build" } }

4. 環境變數未設定

如果程式碼需要環境變數，在 Netlify 後台設定：
Site settings → Environment variables

404 Page Not Found

問題描述

SPA（單頁應用）直接訪問子路由時出現 404，例如：
- https://your-site.com/ ✅ 正常
- https://your-site.com/about ❌ 404

原因

Netlify 預設會尋找 /about/index.html 檔案，但 SPA 只有一個 index.html。

解決方法

在 public 目錄（或 build 輸出目錄）建立 _redirects 檔案：

/*    /index.html   200

這告訴 Netlify：「所有路徑都回傳 index.html，狀態碼 200」

或者使用 netlify.toml：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

環境變數未生效

問題描述

在 Netlify 後台設定了環境變數，但程式碼讀不到。

常見原因

1. 前端框架的限制

React (CRA) 只讀取 REACT_APP_ 開頭的變數：
```javascript
// ❌ 讀不到
process.env.API_KEY

// ✅ 可以讀到
process.env.REACT_APP_API_KEY
```

Vite 使用 VITE_ 開頭：
javascript import.meta.env.VITE_API_KEY

2. 需要重新部署

修改環境變數後，需要觸發新的部署才會生效。

3. Build 時才有效

前端的環境變數是在 Build 時注入的，不是執行時。修改後必須重新 Build。

想了解 GitHub Pages 的使用方式，可以參考 GitHub Deploy Key 教學。

FAQ 常見問題

Netlify 免費方案夠用嗎？

對於大多數個人專案和小型網站，免費方案綽綽有餘：
- 100 GB 頻寬約等於每月 10 萬次頁面訪問
- 300 Build 分鐘夠每天部署好幾次
- 無限網站數量

Netlify 和 Vercel 怎麼選？

• Next.js 專案 → Vercel（官方支援更好）
• 其他 React/Vue 專案 → 兩者都可以
• 需要表單功能 → Netlify
• JAMstack 專案 → Netlify（生態系更完整）

如何設定多個網域指向同一個網站？

1. 在 Domain management 新增所有網域
2. 設定主網域（Primary domain）
3. 其他網域會自動 301 導向主網域

Netlify Functions 和 AWS Lambda 有什麼關係？

Netlify Functions 底層就是 AWS Lambda！Netlify 幫你處理了設定和部署，讓你專注在寫程式碼就好。

如何回滾到前一個版本？

1. 進入「Deploys」頁面
2. 找到想要回滾的部署
3. 點選「Publish deploy」

整個過程只要幾秒鐘，非常方便。

Netlify 部署重點整理與下一步行動

Netlify 是目前最友善的靜態網站部署平台，主要優勢：

• 簡單：連接 GitHub 就自動部署
• 免費：個人專案完全夠用
• 功能完整：Forms、Functions、分支預覽都內建

部署流程整理：

重點整理：

1. 選對部署方式：連接 Git 是最佳選擇
2. 設定正確：Build command 和目錄要對
3. SPA 記得加 _redirects：解決 404 問題
4. 善用免費功能：Forms 和 Functions 很實用

🔧 Netlify 設定有問題？ 雖然 Netlify 已經很簡單了，但有時候 Build 錯誤或 404 問題還是讓人頭痛。如果你在部署過程中遇到困難，讓 VibeFix 幫你解決，我們可以快速診斷問題並幫你搞定部署。