前言

昨天把最後幾個細節整理好之後，診所終於準備從自己的電腦搬進網路。之前只要在本機開啟 index.html 就能使用，但如果想讓其他人也能體驗，就需要一個可以直接點開的網址。

今天的重點不是再加新功能，而是把作品整理好、部署到 GitHub Pages，並確認線上版本能正常使用。這次正式版本的測驗共有 十題，題目與介面都支援中文、英文、日文、韓文四種語言。

開業前，先整理好檔案

這個作品目前以單一 index.html 為主，樣式、互動邏輯、題庫和多語言文字都整合在同一個檔案裡。這樣的好處是部署時不需要另外處理圖片、CSS 或 JavaScript 檔案的相對路徑。

上傳之前，我先確認幾件事：

• 首頁檔名是全小寫的 index.html。
• 測驗題庫共有十題，題目與選項都提供四種語言。
• 題目進度會依照題庫長度自動顯示，例如「第 1 題 / 共 10 題」。
• 完成測驗後，結果分析、雷達圖和其他功能仍能正常顯示。
• 網頁不依賴本機檔案路徑，也沒有把私人資料寫死在程式裡。

四種語言不能只檢查首頁標題。測驗題目、選項、抽籤按鈕、結果頁和分享文字都有可能漏翻，因此需要切換語言實際操作，才能確認使用體驗一致。

把作品放進 GitHub Repository

GitHub Repository 可以理解成專案的線上檔案庫。登入 GitHub 後，先建立一個新的 Repository，例如 cyber-clinic (賽博診所)。如果使用 GitHub 免費方案搭配一般的 GitHub Pages 專案網站，Repository 設為 Public 是最直接的做法。

建立完成後，把最終版 index.html 上傳到 Repository 的根目錄。上傳時要注意，不能把檔案放在另一層資料夾裡，否則 GitHub Pages 可能找不到預期的首頁。

這次先使用網頁介面上傳，不需要另外安裝 Git 或輸入指令。檔案上傳後，記得完成 Commit，讓變更正式存進 Repository。

開啟 GitHub Pages

接著進入 Repository 的 Settings → Pages，在 Build and deployment 區塊選擇 Deploy from a branch。分支選 main，資料夾選 / (root)，儲存設定。

GitHub 完成建置後，就會提供一個網站網址，格式通常如下：

https://你的帳號.github.io/你的專案名稱/

實際網址必須以 Repository 的 Pages 頁面顯示為準。剛設定完成時，網站可能需要一點時間才會出現；可以查看 Repository 的 Actions 分頁，確認 pages build and deployment 工作是否完成。

上線後的驗收清單

網站網址出現不代表工作已經結束。線上環境和本機仍可能有差異，所以我會再用瀏覽器實際操作一次：

• 網址能正常開啟，沒有出現 404。
• 中文、英文、日文、韓文都能切換，畫面沒有漏字或突然退回中文。
• 十道題目能依序完成，進度顯示正確。
• 完成測驗後，結果報告和雷達圖能正常呈現。
• 音效、主題切換、病歷紀錄、匿名發洩牆及其他互動功能沒有明顯異常。
• 分享區塊的複製功能在 HTTPS 網址下能正常使用。
• 用手機開啟時，按鈕、文字和卡片沒有超出畫面。

其中，分享功能特別值得在線上測試。部分瀏覽器 API 需要安全的 HTTPS 環境，本機檔案能開啟，不代表部署後一定會有完全相同的行為。

診所的門牌

作品網址： https://cocopink198-coder.github.io/cyber-clinic/

部署畫面：

這次部署學到的事

第一，檔案能在自己的電腦上執行，只代表本機環境沒問題；要讓其他人使用，還得確認檔案位置、部署設定和線上瀏覽器的行為。

第二，多語言功能不只是翻譯文字。題目數量增加時，進度、計分、結果分析和每個語言版本都必須一起維護。這次把題目進度綁定題庫的實際長度，未來調整題數時就不用再手動修改固定的「共幾題」。

第三，上線不是按下發布就結束。真正的驗收，是用讀者會使用的方式打開網站，從首頁一路操作到結果頁，並且在手機上再走一遍。

今日結語與明日預告

今天完成的是把作品從本機檔案整理成可以公開存取的網站。等部署與驗收都完成後，這間賽博紓壓診所就不再只是自己電腦裡的一個 HTML 檔，而是能透過網址分享給其他人使用的作品。

明天來到 Day 30，最後一篇不再追著功能跑，而是回頭整理這三十天做過的事：從最初的想法、功能逐步整合，到最後把作品部署上線，為這段鐵人賽旅程收尾。