在過去的 26 天裡，我們從 HTML 骨架、CSS 排版、JavaScript 互動、串接 API、LocalStorage 到使用 Tailwind CSS，我們已經在自己的電腦（Local）打造出了一個個精美的網頁小工具。

但有一個很現實的問題是：如果這些檔案只存在你的電腦裡，朋友點不到、面試官也打不開啊！

今天我們就要來解鎖前端工程的最後一哩路——部署（Deployment）。我們要教你如何把程式碼免費放到雲端上，產生一個專屬網址，讓全世界的人都點得進來看你的心血結晶！

什麼是「部署（Deployment）」？

• 在過去，架設網站需要買主機、租伺服器，手續非常繁雜。
• 但現在，有很多對開發者超級友善的雲端託管平台，提供完全免費的靜態網頁代管服務。
• 這就像是你把檔案上傳到雲端硬碟，然後點擊「公開分享連結」一樣簡單！

目前最推薦給新手的兩大免費神器

1. GitHub Pages（GitHub 內建功能）：

• 如果你的程式碼已經乖乖上傳到 GitHub 了，只要在專案設定裡勾選一下，GitHub 就會自動幫你把網頁變成一個 https://你的帳號.github.io/專案名稱/ 的免費公開網址！

2. Vercel（現代前端部署之神）：

• 這是近年來在前端圈紅到發紫的部署神器。只要把你的 GitHub 專案連動上去，它在幾秒鐘之內就會幫你自動編譯並上線，還會自動綁定一個漂亮的 .vercel.app 網址！

以 Vercel 為例：三步驟輕鬆上線

1. 上傳程式碼到 GitHub：確保你的 HTML、CSS、JS 檔案都已經乖乖 Commit 並 Push 到你的 GitHub 遠端倉庫。
2. 註冊並登入 Vercel：使用你的 GitHub 帳號直接登入 Vercel 官網。
3. 點擊 Import 專案：選擇「Add New Project」，然後點選你想上線的那個 GitHub 倉庫，一路按下一步（通常預設設定不用改），最後點擊 Deploy！
   等待個三到五秒鐘，畫面就會噴出漂亮的煙火動畫，並給你一個專屬的線上網址。點進去，你就會看到自己親手刻的網頁正式在雲端運作了！

今日小結

今天我們學會了如何把電腦裡的程式碼部署到雲端，擁有了屬於自己的上線網址。看著作品在真實網路上運作，成就感真的一瞬間達到頂峰！

隨著 30 天挑戰進入倒數階段，明天我們要來聊聊：身為一個設計背景轉職前端的人，我們在職場上到底有哪些獨一無二的優勢與心態調適！