Netlify教學：7個步驟建立可更新的AI線上網頁

Netlify教學從瞭解不同方案、上傳HTML檔案、修改網址、更改版本，一整套流程操作下來，對於這個工具會更加清楚。本文以台積電月營收分析儀表板為例，用 Claude Code 生成視覺化網頁，帶你走過整個流程，掌握如何將AI產品變成線上網頁的操作。

一、從 MOPS 取得營收資料準備上線素材

在「MOPS 公開資訊觀測站」的查詢條件欄位中，輸入公司代號「2330」，資料時間切換為「自訂」，接著從月份下拉選單點選「3月」，路徑依序為「首頁 > 單一公司 > 營運概況 > 每月營收 > 月營業收入資訊」，就能查詢台積電當月的月營業收入資訊。

取得資料後交給 Claude Code 生成儀表板，在本機瀏覽器開啟時，網址列顯示的是「/Users/zanzan/Desktop/TSMC_115年03月營收分析儀表板.html」這樣的電腦路徑，儀表板標題「台積電 115年03月 營收分析儀表板」與下方「本月關鍵指標」四張 KPI 卡片雖然完整呈現，卻還無法直接分享給別人。

MOPS 公開資訊觀測站是台灣公開發行公司查詢月營收資訊的重要官方平台，這裡的數字是公司依法申報的公告版本，相較於財經媒體整理後的資料，更接近第一手來源。當 HTML 檔案還停留在本機路徑時，代表這個網頁只存在自己的電腦裡，接下來使用 Netlify 的目的，就是把它變成真正可以開啟的線上網址。如果對戰情室儀表板的製作流程有興趣，可以先參考這篇從 0 到 1 的完整教學。

二、前往 Netlify 官網註冊免費帳號

進入 Netlify 官網，畫面左上角有「netlify」品牌標誌，右上角有「Sign up」按鈕，點擊即可開始免費註冊。定價頁面上四個方案並排，最左側的「Free」方案以紅框標示，標示「$0 forever」與「Build and deploy free forever」，包含「Deploy from AI, Git, or API」、「Unlimited deploy previews」、「Build with Agent Runners」、「Add Custom domains with SSL」等功能，目前可免費使用。

註冊完成後進入部署頁面，上方標示「Deploy your first project」，其中「Start building with an AI agent」區塊提供 400 Extra Credits 的 AI 建站入口，下方「Upload your project files」區塊說明「Drag and drop your project folder, zip file, or a single HTML file to deploy instantly」，也提供「browse files to upload」與「choose a folder」兩個連結。

Netlify 對單一 HTML 網頁特別友善，不要求使用者一定要先建立完整網站架構，也不一定要連接 GitHub。畫面中的 AI agent 建站入口和 Git repository 匯入選項都是其他進階入口，如果只是要把 Claude Code 產出的 HTML 檔案放上網，最直接的做法就是選擇「Upload your project files」，不需要碰其他任何設定。對Netlify Drop這個更快速的拖曳上線方式有興趣的話，也可以參考這篇介紹。

三、從 Finder 選取 HTML 檔案上傳

點擊「browse files to upload」連結，Finder 視窗開啟，畫面停在「桌面」，可以看到「TSMC_115年…析儀表板.html」的檔案圖示，右側資訊欄顯示完整檔名「TSMC_115年03月營收分析儀表板.html」與「HTML文字 – 23 KB」，確認後點擊右下角「打開」完成上傳。

Netlify 隨即進入 Project overview 頁面，頂端路徑顯示「Projects / lucky-duckanoo-ff0c59」，專案網址「lucky-duckanoo-ff0c59.netlify.app」亮起綠燈，下方標示「Last deployed from Netlify Drop」，頁面上同時出現「Quick setup」按鈕供後續設定使用。

這一步是把本機檔案交給 Netlify 代管，HTML 原本只能在自己電腦開啟，上傳後就有了一個可以分享的公開網址。這份儀表板之所以能直接部署，是因為 Claude Code 生成的 HTML 把 CSS 樣式與資料數字內嵌在同一個檔案中，Chart.js 則透過 CDN 載入，不依賴任何外部伺服器端程式碼，Netlify 收到之後可以直接對外提供服務。

四、Quick Setup 修改專案名稱

點擊「Quick setup」按鈕進入設定流程，第一步標題為「Update the project name」，說明文字指出「The project name determines the default URL of your project – make it your own! Only alphanumeric characters and single hyphens allowed.」在「Project name」欄位輸入「zanzan-tsmc」，下方即時顯示對應網址「https://zanzan-tsmc.netlify.app」，並出現綠色勾號確認「Project name is available」，點擊「Update project name」完成更新。

接著畫面進入下一步，左側出現「Set custom domain」選項，說明「Custom domains allow visitors to access your project at your own domains」，提供「Add a domain you own」與「Buy a new domain」兩個按鈕；右側出現「Set password protection」選項，說明「Keep your project private and share it with others – ideal for early-stage or client-facing work」，提供「Configure password protection」按鈕。

隨機網址雖然可以馬上使用，但要放進文章、課程或客戶展示文件，一個有意義的名稱會更容易辨識。命名時要注意只能使用英文、數字與連字號，網址一旦對外分享出去再改名，之前傳出去的連結就會全部失效，因此建議在第一次部署後立刻完成命名。未來製作多個 AI 網頁作品時，統一前綴規則，例如品牌名稱加上專案主題，網址管理起來也更清楚。

五、密碼保護與首次上線確認

點擊「Configure password protection」進入下一步，頁面標題為「Set password protection」，說明文字指出「Add a password to share your project privately with clients and project stakeholders. Available on our Pro plan and above.」下方展示 Pro 方案內容框，標示「Pro $20/month」，包含 Password protection、Smart secret scanning、Slack and email notifications、Email support 等功能。

由於免費方案不含密碼保護，點擊下方「or finish quick setup」跳過此步驟直接完成設定。完成後在瀏覽器輸入網址，網址列確認顯示「zanzan-tsmc.netlify.app」，畫面正確呈現「台積電 115年03月 營收分析儀表板」標題，下方「本月關鍵指標」KPI 卡片清晰顯示，三月份儀表板正式上線。

密碼保護需要升級至 Pro 方案才能使用，這帶出一個重要的資料公開策略判斷。像台積電月營收本來就是公開資訊，直接公開展示沒有問題，對於累積個人作品集也很有幫助。真正需要密碼保護的情境，通常是客戶委託的分析、含有非公開數字的內部報告，或是還不希望被搜尋引擎索引的測試頁面，這些情況才需要評估是否升級方案或改用其他私有化做法。

六、Claude Code 提問生成下一期儀表板

回到 Claude Code，左側畫面顯示儀表板的區塊結構表，列出頁首、本月 KPI 卡片、累計 KPI 卡片、3 個 Chart.js 圖表、分析摘要、資料彙整表等區塊內容，下方提問框輸入「四月份資料如下，依照三月份同樣結構，幫我另外生成一個四月份的 HTML 檔案：民國 115 年 04 月，單位：新台幣仟元，項目 營業收入淨額……」，右側預覽視窗顯示三月份儀表板標題「台積電 115年03月 營收分析儀表板」，方便對照版型結構。

Claude Code 完成後左側回覆「畫面正常，四月份儀表板已儲存至桌面：TSMC_115年04月營收分析儀表板.html」，並自動列出三月與四月數據差異對比表，本月營收從 415,191,699 變為 410,725,118，本月年增率從 +45.19% 下降至 +17.50%，累計年增率則從 +35.13% 收斂至 +29.95%，右側預覽視窗標題同步更新為「台積電 115年04月 營收分析儀表板」。

Netlify 教學最有價值的部分在於線上網頁不是只能做一次，而是可以隨著每月資料持續更新。這種「告訴 AI 結構、只換資料」的做法，本質上是把儀表板模板化，Claude Code 甚至自動判斷方向性，在分析摘要中帶入對應說明文字，這次幾乎不需要手動調整。每個月只需要幾分鐘就能完成更新，是Claude Code 可以做什麼裡效率提升最明顯的應用場景之一。

七、上傳新版本完成更新部署

回到 Netlify，瀏覽器網址列顯示「app.netlify.com/projects/zanzan-tsmc/overview」，專案概覽頁面確認網址「zanzan-tsmc.netlify.app」亮起綠燈，往下捲到「Production deploys」區塊，紅框標示「Drag and drop your project folder here to deploy new changes」，下方提供「browse files to upload」與「choose a folder」連結。

點擊「browse files to upload」，Finder 視窗開啟，桌面上可以看到「TSMC_115年03月營收分析儀表板.html」與「TSMC_115年04月營收分析儀表板.html」兩個檔案並排，選取四月份檔案，右側資訊欄顯示「TSMC_115年04月營收分析儀表板.html」與「HTML文字 – 22 KB」，製作日期為今天上午 10:03，點擊「打開」完成上傳。上傳完成後，瀏覽器開啟「zanzan-tsmc.netlify.app」，網址列確認顯示該網址，畫面標題更新為「台積電 115年04月 營收分析儀表板」，「本月關鍵指標」KPI 卡片顯示四月份數字，本月年增率欄位顯示「+17.50%」，更新成功。

更新部署的關鍵在於「網址不變，內容更新」，使用者不需要每次重新收到新連結，只要維護同一個網址就能持續看到最新資料。每次上傳新版本，Netlify 都會保留舊版本的部署紀錄，萬一新版資料有誤，隨時可以從 Deploys 頁面回滾到上一個版本，對月報型儀表板來說是很實用的安全機制，整個流程完全不需要懂任何指令列操作。

Netlify教學：讓作品不只活在自己電腦裡

Netlify教學最有感的地方，是 AI 產出的 HTML 檔案終於不只是自己電腦裡的一個作品。過去用Claude Code 教學或其他 AI 工具可以很快做出漂亮的圖表網頁，但如果停留在本機路徑，實際上仍然只能自己觀看，無法真正交付、分享或放進教學流程。Netlify 補上最後一段距離，把本機檔案變成可以公開開啟的線上網址，整個過程不需要懂任何伺服器設定，拖曳一下就完成。

更重要的是，這個流程不是一次性的。三月份資料先上線，四月份資料再用 Claude Code 新手教學熟悉的方式生成新版 HTML，接著回到同一個 Netlify 專案更新部署，網址保持不變，內容持續迭代。對贊贊小屋來說，這不只是 Netlify 教學，而是一個把 AI 成果展示化、教材化的關鍵環節，也讓整套 Claude Code 大全集的產出從「單次作品」變成「可更新作品」，莫名覺得 AI 工具的潛力又往前推進了一步。

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

AI對未來工作的影響：黃仁勳GTC 2026十大啟示

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

贊贊小屋AI課程：Claude Code、ChatGPT課程、AI工具全攻略、Notion課程。