Netlify Drop：讓你的 AI 產出 30 秒上線成為網頁

Netlify Drop 是一種靜態網站部署服務，可以先不登入帳號，把 HTML 專案拖進瀏覽器取得臨時公開網址；若要長期保存、更新版本或管理設定，則需要註冊 Netlify 帳號。贊贊小屋以 Claude Code 新手教學系列為背景，以 Claude Code 產出的採購分析儀表板為例，記錄從桌面本機檔案到 Netlify Drop 上線的完整流程，涵蓋 file:// 協定說明、上線方式比較、拖放部署、rename 提示、密碼保護機制，以及後續帳號管理的考量，讀完就能掌握 AI 產出 HTML 報告的發布節奏。

一、採購分析儀表板：Claude Code 產出的 HTML 報告

贊贊小屋在 Claude Desktop 輸入：

「我電腦桌面有個 HTML 檔案，可以用瀏覽器開啟，看起來就跟一般網頁相同，可是它沒有網址？」

Claude 的回答是：這是正常的，HTML 檔案可以直接用瀏覽器開啟，不需要網路伺服器，瀏覽器網址列顯示的是 file:///Users/zanzan/Desktop/檔案名稱.html 這樣的路徑。畫面中 Claude 同時提供了一張對照表，一欄是「一般網頁」，另一欄是「桌面 HTML 檔案」，從協定（https:// vs file://）、來源（遠端伺服器 vs 本機硬碟）、需要網路（是 vs 否）、功能限制（無 vs 部分功能受限，如跨域請求）四個維度清楚呈現兩者差異。

這裡其實是很多人第一次接觸 AI 寫程式時容易混淆的地方：瀏覽器能打開，不代表它已經是一個網站。桌面上的 HTML 檔案只是被瀏覽器讀取，本質上仍存在自己的電腦裡，換一台電腦打開的路徑就不同，無法直接分享給他人。更實際的限制是，file:// 頁面在載入外部資源或發出部分 API 請求時，可能和正式網站環境不同；部署到 https:// 之後，網頁會以正式網站來源執行，比較接近真正上線後的使用狀態。這也是戰情室儀表板這類 Claude Code 成品值得進一步部署上線的原因之一。

二、Netlify Drop 是什麼：詢問如何讓 HTML 上線

贊贊小屋接著問：

「要怎麼讓它變成跟一般網頁一樣，有個網址，別人也可以瀏覽？」

Claude 依難易度列出幾種方式，其中 GitHub Pages（免費，推薦）與 Netlify Drop（最快，拖拉就好）各自框出重點。GitHub Pages 的步驟是：註冊 github.com、建立 Repository、把 HTML 檔案上傳進去、到 Settings → Pages 選擇 branch 發布，完成後會自動取得 https://你的帳號.github.io/repository名稱 這樣的網址。Netlify Drop 則更直接：前往 netlify.com/drop，把 HTML 檔案直接拖進去，幾秒內得到網址。同一段對話中，Claude 也列出「比較進階：自己架伺服器」選項，說明可租 VPS（如 DigitalOcean、Linode）自行架設 Nginx/Apache，並附上情境建議表，根據「只是想分享給別人看」、「長期維護、日後更新」、「需要自訂網域名稱」三種情境，各自對應 Netlify Drop、GitHub Pages 或兩者皆可的建議。

三個選項背後各有一條清楚的分岔點：「要不要帳號」加上「需不需要長期更新」。Netlify Drop 無帳號、適合臨時用；GitHub Pages 免費，但比較需要 GitHub、Repository 與版本管理概念；自架伺服器靈活但門檻最高。對 AI 產出的一次性 HTML 報告來說，Netlify Drop 是最低摩擦的選擇，不需要懂 Git，只要能操作瀏覽器即可，這個邏輯同樣適用於未來任何 Claude Code 可以做什麼系列文章所示範的 HTML 成品。

贊贊小屋在此又補問了一句：

「桌面的「採購分析儀表板」你看看。」

三、Claude Code 讀取桌面檔案：確認儀表板是否適合上線

切換到 Claude Code 桌面版，贊贊小屋讓它讀取桌面上的採購分析儀表板 HTML 檔案。畫面左上角顯示「讓我讀取桌面上的檔案。Ran a command, read a file」，Claude Code 讀完後摘要回應：「看完了。這是一個完整的採購分析儀表板，結構整齊，用 Chart.js 畫了 7 張圖表」，KPI 區包含累計採購金額 2.48 億、採購單 14,750 張、廠商 81 家、採購人員 7 人，最後詢問「你有什麼想調整或新增的嗎？例如：改樣式、加新圖表，或是把它上線？」贊贊小屋回答「上線。」，Claude Code 立刻說最快的方式是 Netlify Drop，不需要註冊帳號，30 秒搞定，並逐步列出操作流程，同時特別提醒「這份儀表板裡有廠商名稱、採購金額、人員姓名等資料，上線後任何人都能看到，確認這些資料對外公開沒問題再上傳」，接著詢問「要繼續嗎？或是想先把敏感資料遮掉？」

贊贊小屋簡單回應：「上線」。

這一節最能凸顯 Claude Code 與一般 Claude 網頁版的差異。Claude Code 可以直接讀取本機檔案，確認 HTML 裡有多少圖表、使用什麼套件、資料是否完整，甚至主動提醒是否適合上線，而不是等人把程式碼貼進對話框才開始作業。對幾百 KB 的大型 HTML 報告來說，直接讀檔比複製貼上更穩定，也不會有格式跑掉的問題。Claude Code 補上的這個判斷——「先確認內容，再決定下一步」——讓 AI 的角色從產生程式碼延伸到協助發布前的把關，這正是Claude Code 試用之後很多人開始感受到差異的地方。

四、Netlify Drop 上線：進入部署頁面

用瀏覽器開啟 app.netlify.com/drop，頁面標題是「Drop a project, make it yours」，下方列出四個功能說明區塊，贊贊小屋在 Claude Desktop 對話中同步詢問這四個功能是什麼，具體提示詞：

「我之前沒聽過 Netlify，介紹一下，然後它網頁上說的這四個功能是什麼？」

Claude 介紹 Netlify 是一家美國雲端公司，專門提供靜態網站托管服務，對一般靜態網頁測試、作品展示或課程範例來說，入門方案通常已能應付基本需求，接著逐一說明四個功能：「Put your project online（拖拉上線）」是把 HTML 檔案或資料夾直接拖進去，馬上得到一個臨時網址，不需要註冊帳號；「Sign up to keep dropping（註冊後可持續更新）」是如果之後想更新網頁內容，需要先註冊免費帳號，這樣拖新版本進去時網址不會變；「Add a custom domain（自訂網域）」是預設網址是隨機英文字，如果有自己買的網域可以綁上去；「HTTPS is automatic（自動加密）」則是網址會是 https:// 開頭，瀏覽器網址列會顯示鎖頭圖示，Netlify 自動處理，不用額外操作。

四個功能裡最值得留意的是 HTTPS 自動處理。對初學者來說，SSL 憑證申請與設定在傳統伺服器架設中是一道門檻，Netlify 把這個步驟完全吸收掉，上線後的網址直接就是安全連線，瀏覽器不會跳出「不安全」的警告。這對要把儀表板連結分享給主管或客戶的情境來說，省掉了一個可能讓人卻步的環節。

五、Netlify Drop 拖放部署：把 HTML 拖進瀏覽器

Netlify Drop 的操作介面正中央有一個圓形拖放區，提示文字寫著「Drag and drop your project folder, zip file, or a single HTML file to deploy instantly.」（拖放你的專案資料夾、zip 壓縮檔，或單一 HTML 檔案以立即部署），下方還有「Or browse files to upload」和「choose a folder」兩個連結，頁面底部則是大字標語「Drag & drop. It’s online.」贊贊小屋把桌面的「採購分析儀表板.html」直接拖進圓形區域，畫面立刻切換成青綠色背景，顯示「Drop it!」，檔名「採購分析儀表板.html」出現在中央。接著跳出一個確認彈窗「Rename to index.html?」，說明「Without an index.html file, your site’s homepage will show a ‘Page Not Found’ error. Rename 採購分析儀表板.html to index.html?」，提供「Rename and deploy」與「Deploy without renaming」兩個按鈕。

index.html 是靜態網站裡的預設首頁名稱。Web 伺服器在收到「只有網域名稱、沒有指定檔名」的請求時，預設會尋找目錄下的 index.html 作為回應，這個慣例來自傳統 Web 伺服器的預設首頁設定，也成為靜態網站部署時最常見的檔名規則。Netlify 偵測到上傳的不是 index.html 就跳出這個提醒，選「Rename and deploy」之後網址乾淨可分享；如果選「Deploy without renaming」，訪客直接輸入根網址會出現 404 錯誤，必須在網址結尾加上 /採購分析儀表板.html 才能開啟，因此絕大多數情況都應該選前者。

六、Netlify Drop 成功上線：取得網址與密碼保護

完成部署後，Netlify 顯示「Check it out!」畫面，網址連結 https://spiffy-sprinkles-e53909.netlify.app 下方說明「Your project will be live for 1 hour」，並告知「The password for accessing the project is: My-Drop-Site」，頁面另有「To keep your Netlify projects online, create a free account」的說明與「Sign up for free」按鈕，底部大字「Your project is live!」。贊贊小屋用瀏覽器開啟這個網址，出現「Password protected site」畫面，提示「Please enter your password to get access」，輸入密碼並點擊「Submit」才能進入。

這次畫面顯示的密碼是「My-Drop-Site」，它不是贊贊小屋自行設定的私人密碼，而是 Netlify Drop 在臨時部署流程中提供的存取密碼。這類密碼比較適合臨時預覽，不應視為正式的資料保護機制。如果儀表板含有敏感的廠商名稱或採購金額，正確做法是先遮蔽敏感欄位再上傳；若要正式控管存取權限，則需要進一步確認 Netlify 帳號方案是否支援密碼保護或團隊登入功能。

七、Netlify Drop 上線成果：儀表板正式可瀏覽

輸入密碼後，瀏覽器網址列穩定顯示 spiffy-sprinkles-e53909.netlify.app，採購分析儀表板完整呈現在畫面上：標題「採購分析儀表板」、資料期間 2020-01-02 至 2021-04-30、共 16,163 筆明細，四個 KPI 卡片整齊排列，月度採購金額趨勢折線圖（2020 vs 2021）清楚可見，與本機開啟時的效果完全相同。接著贊贊小屋前往 Netlify 的註冊頁面 app.netlify.com/signup，頁面左側提供「Sign up with Google」、GitHub、GitLab、Bitbucket 與 email 等多種登入方式，右側標示了「Publish on the web instantly」與「Make it yours」兩個核心功能，說明包含自訂網域、表單處理、密碼保護等進階設定。

從臨時展示升級到長期管理的時機很清楚：如果只是一次性分享，1 小時的臨時網址已經夠用；如果需要更新版本、保持網址不變，就要先註冊帳號，下次拖新版本進去時連結依然有效；如果要綁定自訂網域或設定更完整的存取管理，同樣需要帳號。對大多數 AI 產出的分析報告來說，先用 Drop 快速驗證可行性，確認有持續維護需求後再升級，是最不浪費時間的路徑。

Netlify Drop 讓 AI 產出的報告真正流通起來

本文透過簡單操作，把原來電腦裡面的檔案變成公開網頁。在過程中，看到了 AI 代理的強項與可能的短板。

範例的 HTML 程式碼文件，對於任何 AI 都是輕而易舉的任務。不管是網頁版 ChatGPT，或者付費 Claude Code，其實它們做的是同一件事。但如果是在網頁 AI 詢問得到代碼，它仍然在 AI 工具的網頁上，不會是自己電腦的檔案，必須下載，而且可能還有改檔名或者編碼的問題。此時就會瞭解 AI 代理的好處，它原本就是電腦裡的軟體，因此跟其他應用一樣，生成好的檔案就在你的電腦裡面，省下一些操作。

到這裡，一切都很美好。可是等到你想要把設計好的東西做成線上網頁，馬上會發現到 AI 代理的限制：它就在自己的電腦裡，所以它不在網路上。想將你的 AI 產品轉換成線上應用，強大的 Netlify 就是專注於做這件事。

所以，問題並非 Claude Code 不夠強大，而是在瞭解它的強大之後，能夠找到另一個與之互補的工具，把這裡的短板接上那裡的長橋。兩者搭配，就能實現更多的可能性。想從頭建立 Claude Code 操作基礎的讀者，可以從 Claude Code 安裝教學開始，完整的應用案例則收錄在 Claude Code 大全集。

學會計、學Excel、學習AI工具，歡迎加入贊贊小屋社群。

Claude Code 教學：從安裝到 Excel、PPT 與網頁實戰

Claude Code 教學、ChatGPT怎麼用？、ChatGPT Excel教學、ChatGPT寫ExcelVBA、Gemini是什麼？、Notion教學、AI對會計的影響。

贊贊小屋AI課程：OpenClaw AI 代理、Codex 網站、Claude Code 實戰、ChatGPT課程、AI工具全攻略、Notion課程。