Netlify Drop 教學：5 分鐘免費上線你的網站【免寫程式】
你做好了一個網站，想讓朋友看看。但一查部署教學，什麼 Git、什麼 CI/CD、什麼環境變數... 看得頭都暈了。有沒有最簡單的方法，把網站丟上去就好？
有。Netlify Drop 就是這樣的東西。把資料夾拖進去，5 分鐘後你的網站就在網路上了。這篇教你怎麼用。
什麼是 Netlify Drop？
Netlify Drop 是 Netlify 提供的拖曳部署功能。你不需要會 Git，不需要寫任何指令，只要把網站資料夾拖進瀏覽器，網站就上線了。
Netlify Drop 的運作原理
- 你把資料夾拖進 Netlify 網頁
- Netlify 上傳所有檔案
- 檔案被部署到全球 CDN
- 你得到一個網址，網站就能存取了
整個過程不需要任何技術背景。如果你會把檔案從一個資料夾拖到另一個，你就會用 Netlify Drop。
什麼情況適合用 Netlify Drop？
Netlify Drop 最適合這些場景：
- 快速展示：做好的 prototype 想給客戶看
- 測試效果：確認網站在線上環境正不正常
- 臨時分享：把靜態檔案分享給別人下載
- 學習練習：剛開始學網頁，想看自己的作品上線
- 簡單專案：純 HTML/CSS/JS 的小網站
什麼情況不適合？
這些情況建議用 GitHub 連結部署：
- 需要經常更新的網站
- 需要 build 指令的框架專案（React、Vue 等）
- 多人協作的專案
- 正式上線的產品
想了解完整的 Netlify 部署方式？看這篇 Netlify 完整指南。
Netlify Drop vs GitHub 部署：該選哪個？
Netlify 有兩種主要部署方式，來看看差在哪。
比較表
| 項目 | Netlify Drop | GitHub 部署 |
|---|---|---|
| 需要 Git 嗎 | 不需要 | 需要 |
| 設定難度 | 超簡單 | 簡單 |
| 自動部署 | 沒有 | 有 |
| 版本控制 | 沒有 | 有 |
| 更新方式 | 重新拖曳 | Push 程式碼 |
| Build 功能 | 沒有 | 有 |
| 適合專案 | 靜態 HTML | 所有類型 |
簡單說
- Netlify Drop：最快、最簡單，但每次更新要手動重傳
- GitHub 部署：一開始要設定，但之後改 code 就自動更新
如果你的網站會經常修改，強烈建議學一下 GitHub 部署。初期多花 10 分鐘設定，之後省下無數次手動上傳的時間。想比較其他部署平台？看這篇 Netlify vs Vercel 比較。
但如果只是臨時展示或測試，Netlify Drop 完全夠用。
完整操作步驟：從零開始部署
準備好了嗎？讓我們開始。
事前準備
確認你有這些東西：
- 一個網站資料夾：裡面至少要有
index.html - 瀏覽器：Chrome、Firefox、Safari 都可以
- 網路連線：上傳檔案需要
資料夾結構大概長這樣：
my-website/
├── index.html
├── style.css
├── script.js
└── images/
├── logo.png
└── photo.jpg
步驟一：打開 Netlify Drop
在瀏覽器輸入：
https://app.netlify.com/drop
你會看到一個頁面，中間有一個虛線框，寫著「Drag and drop your site output folder here」。
小提醒：不用登入也能用，但建議先註冊帳號。不然網站 24 小時後會被刪除。
步驟二：拖曳資料夾
把你的網站資料夾從檔案總管（Windows）或 Finder（Mac）拖到那個虛線框裡。
重要：
- 拖整個資料夾，不是單獨的檔案
- 資料夾裡要有 index.html
- 如果拖錯了，重新拖一次就好
步驟三：等待上傳
拖進去後，Netlify 會開始上傳檔案。你會看到進度條在跑。
上傳時間取決於：
- 檔案大小
- 檔案數量
- 你的網路速度
一般來說，一個簡單的網站（幾 MB）只需要幾秒鐘。
步驟四：取得網址
上傳完成後，Netlify 會給你一個網址，格式像這樣：
https://random-name-12345.netlify.app
點擊這個網址，你的網站就出現了！
步驟五：（建議）註冊並綁定
如果你還沒登入，現在點「Claim this site」註冊帳號。
這樣做的好處：
- 網站不會被自動刪除
- 可以改網址名稱
- 可以設定自訂網域
- 可以看到流量統計
進階設定技巧
基本部署搞定了，來看一些實用技巧。
更改網站網址
預設的網址是隨機的，不好記。你可以改成自己想要的名稱：
- 登入 Netlify
- 選擇你的網站
- 點「Site configuration」>「Site details」>「Change site name」
- 輸入新名稱（例如：
my-portfolio） - 儲存
新網址就會變成：my-portfolio.netlify.app
注意：名稱要是獨一無二的，如果被別人用了就要換一個。
更新網站內容
用 Netlify Drop 部署的網站，更新方式是重新拖曳：
- 在本地修改檔案
- 回到 Netlify 後台
- 點「Deploys」
- 把更新後的資料夾拖進去
每次更新都會留下紀錄，你可以在 Deploys 頁面看到所有版本。
設定自訂網域
想用自己的網域（像是 www.example.com）？
- 去「Domain settings」
- 點「Add custom domain」
- 輸入你的網域
- 按照指示設定 DNS
詳細教學看這篇 Netlify 自訂網域設定教學。
設定 404 頁面
當訪客進入不存在的頁面，預設會顯示 Netlify 的 404 頁面。你可以自訂：
在資料夾根目錄建立 404.html，寫入你想要的內容。下次部署時，這個頁面就會生效。
設定 Redirect 規則
如果需要網址轉址，在資料夾根目錄建立 _redirects 檔案：
# 將 /old-page 轉到 /new-page
/old-page /new-page 301
# 將所有路徑導向 index.html（SPA 用）
/* /index.html 200
常見問題與限制
Netlify Drop 很方便，但有些限制要知道。
檔案大小限制
- 單一檔案最大：無明確限制，但太大會上傳很久
- 整個網站建議：控制在幾百 MB 以內
- 圖片建議：壓縮過再上傳
沒有 Build 功能
Netlify Drop 只是「上傳檔案」，不會執行任何 build 指令。如果遇到 502 錯誤，可以參考 Netlify 502 錯誤解決指南。
這表示：
- React 專案要先 npm run build，然後上傳 build 資料夾
- Vue 專案要先 npm run build，然後上傳 dist 資料夾
- 不能直接上傳原始碼
如果你的專案需要 build，考慮用 GitHub 連結部署。
沒有自動部署
每次更新都要手動拖曳。如果網站經常更新，這會很煩。
解決方案：
- 改用 GitHub 部署（推薦）
- 用 Netlify CLI 指令部署
- 接受手動更新的麻煩
24 小時自動刪除
如果沒有登入帳號，網站 24 小時後會自動刪除。
解決方案：註冊一個免費帳號，反正不用錢。
檔案類型限制
Netlify Drop 支援所有靜態檔案：HTML、CSS、JS、圖片、PDF、字型等。
但不支援：
- 需要伺服器執行的檔案（PHP、Python 等）
- 需要資料庫的功能
這些需要用 Netlify Functions 或其他後端方案。
常見問題 FAQ
上傳後網站是空白的？
可能原因：
1. 資料夾裡沒有 index.html
2. index.html 裡沒有內容
3. 路徑寫錯了（例如圖片路徑）
檢查方式：在本地用瀏覽器打開 index.html，看看正不正常。
圖片顯示不出來？
通常是路徑問題。確認：
1. 圖片有放進資料夾
2. 路徑是相對路徑（例如 images/photo.jpg，不是 C:\Users\...）
3. 檔名大小寫正確（伺服器通常區分大小寫）
可以上傳 React/Vue 專案嗎？
可以，但要先 build：
# React
npm run build
# 然後上傳 build 資料夾
# Vue
npm run build
# 然後上傳 dist 資料夾
直接上傳 src 資料夾是不行的。
網站多久會生效？
上傳完成後立即生效。如果看到舊內容，清除瀏覽器快取試試。
可以綁定自己的網域嗎？
可以。註冊帳號後，在 Domain settings 設定。免費方案就支援自訂網域和 HTTPS。
流量有限制嗎？
免費方案每月 100GB 頻寬。對小型網站來說非常夠用。
想了解更多免費方案細節？看這篇 Netlify 免費方案完整解析。
Netlify Drop 跟一般部署有什麼不同？
技術上沒有不同，網站都是部署到 Netlify 的 CDN。差別只在於上傳方式：Drop 用拖曳，一般部署用 Git。
總結：什麼時候用 Netlify Drop？
Netlify Drop 是部署網站最簡單的方式，零技術門檻。
適合用 Netlify Drop：
- 快速展示作品
- 測試網站效果
- 純 HTML/CSS/JS 的簡單網站
- 不需要經常更新的頁面
不適合用 Netlify Drop：
- 需要頻繁更新的網站
- 需要 build 的框架專案
- 多人協作的專案
- 正式的線上產品
如果你的需求更進階，建議學習 GitHub 連結部署。一開始多花一點時間設定，之後會省下很多麻煩。
現在就試試看吧！打開 app.netlify.com/drop，把你的網站拖進去。
VibeFix 是專門幫助非工程師處理程式部署問題的服務。AI 幫你寫代碼，我們幫你上線。
網站部署遇到問題？不確定該用什麼方式？讓 VibeFix 幫你搞定