上線與放進作品集｜Vibe Coding 作品怎麼上線並放進作品集？

做好的 App 只有你自己能用，怎麼拿去面試？很多人做完程式，就覺得大功告成了。但這堂課要告訴你，程式做好只完成了一半。能讓別人點一個連結就用到，才算真正的作品。我們這次做的是單一 HTML 檔的小工具，屬於靜態網頁。靜態網頁可以放到 GitHub Pages 這類靜態網站託管服務上。放上去之後，你就會拿到一個公開網址，可以分享給任何人。接下來就一步步看，怎麼把作品公開上線。那實際要怎麼上線呢？你不用自己查一堆教學。直接請 AI 一步一步帶你操作就可以了。你可以先告訴它，你有一個叫 tracker.html 的檔案。再請它教你用 GitHub Pages 上線。記得要補一句，每一步都告訴我要點哪裡。這樣就算你完全沒操作過，也能跟著一步步完成。不過上線前，有一件事你一定要先檢查。那就是程式裡面，不能有任何密碼或 API 金鑰。因為放在網頁裡的內容，任何人都能看到原始碼。所以如果把金鑰寫在網頁裡，等於直接公開給全世界。之後你做的 App 若需要呼叫 LLM API，金鑰必須放在後端伺服器。這是新手最常犯、後果也最嚴重的錯誤，千萬要小心。金鑰一旦外流，後果可能相當嚴重。來做個小檢查，看看你記得多少。把網頁小工具公開上線前，課程提醒一定要檢查什麼？選項一是程式碼是否超過五百行，選項二是配色是否為最新流行色。選項三是程式裡沒有任何密碼或 API 金鑰。先想想看，答案是哪一個？答案是第三個，程式裡沒有任何密碼或 API 金鑰。因為網頁原始碼任何人都看得到，金鑰外流後果嚴重，必須放在後端。上線之後，接下來要把它整理成面試官看得懂的作品。作品集要放四樣東西，第一樣是公開網址。讓面試官不用安裝任何東西，就能直接操作。第二樣是示範影片或動圖，展示主要功能。第三樣是 README，說明你解決什麼問題、核心功能、開發歷程，還有你如何測試。第四樣是誠實說明 AI 的角色，哪些由 AI 產生，你又做了哪些判斷。為什麼要特別準備影片或動圖呢？因為面試官不一定會點進去操作你的網址。所以請準備一段三十到六十秒的示範，展示主要功能。讓對方在很短的時間內，就看懂你做了什麼。很多人會擔心，用 AI 做的作品，面試官會不會覺得沒價值？其實企業在意的，不是你有沒有用 AI。而是你能不能把問題定義清楚、指揮 AI 做出來，並且負責驗證品質。在 README 裡展示需求書、迭代紀錄與測試清單，正好能證明這套能力。這比單純展示功能，更有說服力。這代表你不只會用工具，也能為結果負責。接下來，我們動手請 AI 幫你寫 README 初稿。做法很簡單，把需求書、迭代紀錄與測試清單，一起貼給 AI。這樣你就不用從空白頁開始寫起。然後請它整理成包含各個段落的作品 README。提示詞裡要提醒它，語氣專業精簡，不要誇大。還要加上一句，不要寫我沒做到的功能。拿到初稿之後，一定要自己讀一遍並修改。確保每一句都是真的，而且你都講得出來。完成第一個 App 之後，還可以繼續往上延伸。例如把資料改存到雲端資料庫，或加上 B3 學到的 LLM 功能。也可以換成 Python 寫後端，每一次延伸，都是作品集裡新的一筆。最後，面試前記得把自己的作品，從頭操作一遍。並且練習用一分鐘，說明為什麼做、怎麼做、學到什麼。能流暢講出開發過程的人，遠比只展示畫面的人令人印象深刻。這樣你的作品集就會越來越豐富。能上線、能說清楚，才是好作品。