終於來到專案部署啦！
這次的演算法視覺化平台使用 Vue 3 + Vite + TypeScript 開發，原本打算使用 GitHub Pages 的 Deploy from a branch，但最後決定改用 GitHub Actions，為什麼呢？
一開始我在 GitHub Pages 選擇 Deploy from a branch，並指定 main 分支。
結果開啟網站後，Console 出現：
Failed to load resource: 404
/src/main.ts
後來才知道，這種方式會發布指定分支中的網站檔案，但不會自動執行 Vite Build。
我的 main 分支放的是 Vue 原始碼，而不是編譯後的靜態檔案，因此網站無法正常顯示。
| Deploy from a branch | GitHub Actions | |
|---|---|---|
| 部署來源 | 分支根目錄或 /docs |
Workflow 指定的檔案 |
| 自動執行 Vite Build | 不會 | 可設定 |
| Vue + Vite | 可以 | 可以 |
其實 Deploy from a branch 也能部署 Vue，只要先 Build，再將產生的靜態檔案放到指定分支的根目錄或 /docs 即可。
但我希望每次 Push 程式碼後，都能自動完成 Build 和部署，所以最後選擇 GitHub Actions。
因為 Repository 名稱是 Algorithm，網站路徑會是：
https://使用者名稱.github.io/Algorithm/
因此在 vite.config.ts 加上：
export default defineConfig({
base: '/Algorithm/',
})
否則網站可能從 /assets/ 而不是 /Algorithm/assets/ 尋找資源，導致 404。
原本使用 createWebHistory()，但 GitHub Pages 不會自動將 SPA 子路徑導回 index.html，重新整理時可能出現 404。
所以改成：
createWebHashHistory()
雖然網址會多出 #，但路由可以交給 Vue Router 處理。
在 Repository 根目錄建立 .github/workflows/deploy.yml，設定自動化流程：
Push → 安裝依賴 → Vite Build → 部署 dist
另外還需要注意：
dist。完成設定後，進入 Repository → Settings → Pages，將 Source 改成 GitHub Actions。
接著到 Repository → Actions，找到部署的 Workflow，點選 Re-run all jobs 重新執行。
等待 Build 和 Deploy 都成功後，終於可以正常看到網站畫面啦！
終於經過這 30 天啦！！！沒想到一個月就這樣結束了，過得好充實 XD
回想一開始，自己連演算法、資料結構都沒有學過，現在已經慢慢理解 Bubble Sort、Quick Sort、Dijkstra，甚至把它們做成視覺化平台。
雖然只有三種演算法，但對我來說已經是很重要的第一步！
最後想回到 Day 1 問自己的問題：
「演算法，究竟能為前端帶來什麼？」
經過這 30 天，我發現現在的前端開發，其實真的不太需要自己實作這些經典演算法。
排序有 JavaScript 內建方法，搜尋通常交給後端，路線規劃也有現成的 API 可以使用。
既然都有現成的工具，那學演算法還有意義嗎？
我覺得有，但意義可能跟我一開始想的不太一樣。
這次學習讓我開始理解，原來很多複雜的邏輯，都是透過條件判斷、迴圈、遞迴，一步一步組合而成。
學習演算法不一定是為了以後自己重新實作，而是練習如何拆解問題、理解程式的執行過程。
雖然目前學到的還只是皮毛，但至少當我再次遇到複雜邏輯時，能試著從不同角度思考，而不只是想著怎麼把功能做出來。
這就是這 30 天帶給我最大的收穫！
30 天鐵人賽，完賽啦!!! 
iThome鐵人賽
看影片追技術