Skip to content

建立 2026-09-15 更新 2026-09-15

Netlify

Netlify 是最早推廣「Jamstack」（JavaScript、API、markup 預先建置成靜態檔案）佈署模式的平台之一，介面簡單、上手快，除了靜態網站佈署外，也內建表單收集、身份驗證、Edge Functions 等附加功能，適合不想額外串接第三方服務的專案。

核心概念

  • 多種佈署方式：可以連接 Git repository 做自動化佈署，也可以直接把建置好的資料夾拖拉到網頁上的 Netlify Drop 完成一次性上線，很適合展示與快速測試。
  • netlify.toml 設定檔：在專案根目錄放一個 netlify.toml，可以明確指定建置指令、發佈目錄、轉址規則（redirects）與標頭（headers），比起完全依賴網頁介面設定更容易版本控管。
  • Deploy Previews：如同 Vercel 的預覽部署，每個 Pull Request 都會自動產生獨立測試網址。
  • 內建表單處理：靜態網站的 <form> 只要加上 data-netlify="true" 屬性，Netlify 就會自動收集送出的表單資料，不需要自己架後端。

佈署步驟

  1. 到 netlify.com 使用 GitHub／GitLab／Bitbucket 帳號註冊登入。
  2. 點選 Add new site → Import an existing project，選擇要佈署的 repository。
  3. 填入 Build command（例如 npm run build）與 Publish directory（例如 dist）；多數常見框架 Netlify 會提供預設值。
  4. 若需要環境變數，於 Site configuration → Environment variables 新增。
  5. 點擊 Deploy site，完成後會取得一個 *.netlify.app 網址；也可以在 Domain management 綁定自訂網域。
  6. 之後 git push 到指定分支即會自動觸發重新佈署。

方案與限制

Netlify 提供免費的 Starter 方案，涵蓋一定額度的建置時數與頻寬；團隊協作、更高流量或進階功能需升級付費方案。實際限制請以 Netlify 官方定價頁面 為準。

官方學習資源

官方文件

Netlify Docs 提供完整的設定說明，包含 netlify.toml、Functions、Edge Functions 等進階主題。

Netlify 官方頻道教學

Netlify 官方頻道（@NetlifyApp）整理了四種把網站佈署到 Netlify 的方法，從最簡單的拖拉檔案（Netlify Drop）、CLI 指令列、到連接 Git 自動化佈署都有涵蓋，適合了解不同情境該選哪一種佈署方式。

精選 YouTube 教學

freeCodeCamp 製作的完整教學，從本機開發環境一路講到全域佈署，涵蓋建置流程、表單處理、身份驗證等 Netlify 特色功能，內容較長但涵蓋面完整，適合想深入了解 Netlify 生態系的讀者。

相關資料