TL;DR

• 學習如何將 AI 生成的網頁打包成 .html 檔案，在平板或筆電上離線使用。
• 學習使用 Netlify Drop，透過「拖曳」的簡單動作，將工具發布到網路上。
  • 範例：退休金缺口計算機
• 了解 Netlify 的免費方案，確認我們的專案成本遠低於免費額度。

我們在昨日成功扮演了「藝術總監」，為我們的退休金計算機換上了一身專業、亮麗的新裝。這個工具不僅功能強大、經過驗證，現在外觀也同樣令人信賴。
但再好的工具，如果只能躺在我們的 Canvas 工作區裡，就永遠無法發揮它真正的價值。今天，我們的任務就是學習如何將這個工具「打包帶走」，讓它能在任何時間、任何地點，為我們的客戶服務。

方法一：你的「隨身簡報神器」—— 本機離線部署

這是在顧問實務中，最常用、也最穩定的一種方法。它的核心是將我們的互動網頁，變成一個可以獨立運作的檔案，就像一個 PDF 或 Word 文件一樣。

這個方法最大的優點是：

• 無需網路：在網路不穩定的咖啡廳、客戶的會議室，甚至高鐵上，都能完美運行。
• 高度安全：所有操作都在你的裝置上完成，不涉及任何網路傳輸，客戶的個資絕對安全。
• 專業展示：在平板電腦上流暢地操作一個客製化工具，專業形象立刻加分。

【實戰演練：打包你的 HTML 檔案】

1. 回到 Canvas 專案：打開我們在 Day 10 美化完成的退休金計算機。
2. 取得完整程式碼：點擊畫面右上角的「程式碼」，確保看到的是完整的 HTML 程式碼。
3. 全選並複製：使用鍵盤快捷鍵 (Ctrl+A 或 Cmd+A) 全選所有程式碼，然後複製 (Ctrl+C 或 Cmd+C)。
4. 打開純文字編輯器（Windows 的「記事本」或 Mac 的「文字編輯」）。
5. 貼上並儲存：將程式碼貼上後，點擊「另存新檔」。這一步是關鍵：
   • 檔案名稱：請輸入 退休金缺口計算機.html。
   • 存檔類型：請務必選擇「所有檔案」。
   • 重點：檔案的結尾必須是 .html！
6. 部署完成！：現在，直接用滑鼠雙擊這個檔案，我們的計算機就會在「瀏覽器」中完美打開，而且完全不需要網路！

手機也適用喔！只要把檔案放入手機中，點擊後就會由遊覽器打開，就可以用了！

方法二：你的「線上體驗中心」—— 雲端網頁分享

有時候，我們希望客戶在與我們會面前，能先親身體驗一下這個工具的威力。這時我們就需要一個可以公開分享的網址。在這裡，要介紹一個對初學者最友善的神奇工具：Netlify。

Netlify：史上最簡單的網站上傳

Netlify 是全球頂尖的網站託管平台，而他們的「Drop」功能，簡化了所有流程，讓上傳網站就像傳送一個檔案一樣簡單。

【實戰演練：拖曳你的網站上線】

1. 前往 Netlify Drop：在瀏覽器中打開 https://app.netlify.com/drop
2. 準備好你的檔案：將我們剛剛製作好的 退休金缺口計算機.html 檔案放在桌面上，並且用一個檔案包起來（假設資料夾名稱為website）。
3. 拖曳，然後放開：直接用滑鼠將 website 資料夾拖曳到網頁的虛線框中。
4. 部署完成：沒錯，就是這麼簡單！幾秒鐘後，Netlify 就會提供一個可以公開分享的網址。我們可以試著把這個網址傳給朋友，他們就能立刻玩到你親手打造的工具了！

但注意是這個只有暫時一個小時（目前），如果要長久的話，就註冊會員。會員註冊完畢後，一樣拖拉的方式進入虛線中就可以囉！

〈拖曳資料夾〉

接著跟著步驟做一下基本設定，像是設定 URL 等等可使用預設值，然後三兩下就完成。真的超快速！

〈修改URL〉

接著使用它給我們的 URL 網址，然後再加上「/」與我們檔案名稱－退休金缺口計算機.html，這樣就可以進入我們的網站。像我的檔案名稱為 退休金缺口計算機-iron.html，所以網站就會在這邊：https://snazzy-dieffenbachia-4dd635.netlify.app/退休金缺口計算機-iron.html

Netlify 真的免費嗎？—— 深入了解 Credits 制度

這麼好的服務，真的不用錢嗎？答案是：對我們的專案來說，是的，完全免費，而且額度非常慷慨。

Netlify 的免費方案，每個月會提供 300 credits (積分) 讓我們使用。現在，讓我們來估算一下，我們這系列課程製作的兩個工具，大概會花掉多少積分。

【成本估算】 根據官方的價目表，我們主要會用到這幾項服務：

• Production deploys (部署)：每次上傳或更新，花費 15 credits。
• Web requests (瀏覽次數)：每 10,000 次瀏覽，花費 3 credits。
• Bandwidth (流量)：每 1 GB 的資料傳輸，花費 10 credits。

讓我們做一個非常寬裕的估算：

• 我們製作了 2 個工具，來回修改更新了 5 次。
• 我們的工具大受歡迎，第一個月被瀏覽了 10,000 次。

總花費計算：

1. 部署成本 (一次性)：5 次 * 15 credits/次 = 75 credits
2. 瀏覽成本 (每月)：10,000 次 = 3 credits
3. 流量成本 (每月)：我們的工具檔案很小 (約 100 KB)，一萬次瀏覽的總流量約為 1 GB，成本為 10 credits。

第一個月總計：75 + 3 + 10 = 88 credits

結論非常清晰：即使在我們非常樂觀的估算下，第一個月的總花費也只有 88 credits，遠低於免費的 300 credits 額度。而從第二個月開始，每月的花費更是低於 15 credits。所以，請大家放心使用！

本日總結

恭喜我們！至此，我們的第一個實戰專案，已經從一個抽象的「想法」，經歷了「藍圖設計」、「AI 開發」、「功能驗證」、「UI 美化」，最終到今天的「成功部署」，畫下了一個完美的句點。

後記：一個來自真實訪談的新靈感

就在我撰寫這個系列的同時，我把這個計算機分享給別人使用，又得到了一個很棒的功能升級點子，也想在這裡分享給大家：「每年的固定大額支出」。

他們提到許多客戶除了人生中的一次性大事，他們每年幾乎都有一筆固定的、非月常性的支出，例如：

• 年度家庭旅遊（通常是國外旅遊）
• 高階健康檢查費用
• 保險年繳費用

這個功能將讓我們的退休金模擬，從一個單純的財務模型，變得更像一本真實的人生帳本。這也再次證明了，最好的工具，永遠來自於與客戶最真實的互動！

💡 我的工具獨自升級

我們可以試著回到 Canvas 專案，用下面這個 Prompt 範例，為自己的計算機加上這個新功能：

做得很好！現在請為我的計算機增加一個「年度固定支出」的功能。
新增功能需求：

1. 在「退休後一次性大額支出」下方，新增一個名為「退休後年度固定支出」的區塊。
2. 在這個區塊中，我需要一個「新增年度支出」的按鈕。
3. 每次點擊，下方就會出現一組新的輸入欄位，包含「支出項目」、「每年金額」與「持續年期（從退休後開始，共幾年）」（數字）。
4. 更新計算邏輯：在退休後的資產計算中，每一年都需要從當年度的總資產中，額外減去所有在「持續年期」內的「年度固定支出」的總和。

這樣就會有一個新的功能囉～

〈最終版計算機〉