Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
大家是否已經使用 AI 寫出一手漂亮的網頁程式碼了呢？雖然 Vibe Coding 可以產生漂亮的網頁或實用的功能，但只能在 AI 工具裡進行體驗，總感覺缺少了些什麼。這篇文章將帶領大家進入 GitHub 的世界，透過簡單的步驟，把各種創意從電腦硬碟釋放到網際網路上，讓全世界的人只要點開網址，就能看見精彩的作品！
快速導覽：
什麼是 GitHub？
GitHub 是由 Tom Preston-Werner、Chris Wanstrath、P. J. Hyett 和 Scott Chacon 幾位創辦人共同建立，最初的目的只是為了讓開發者更方便地分享與協作使用 Git 管理的程式碼，而隨著它的快速成長，在 2018 年被微軟 ( Microsoft ) 以 75 億美元收購，這象徵著 GitHub 正式確立了在軟體開發界的霸主地位。
發展至今，GitHub 已經進入全盛時期，成為全球最大的程式碼代管與社群平台，下列是幾個 Github 的特點：
全球規模
擁有超過一億名活躍開發者，高達數億個託管專案數量。
開發者的數位履歷
工程師通常會透過 GitHub 頁面來取代傳統紙本履歷。
AI 與開源軟體的聖地
最火熱的 AI 技術、各種機器學習框架，甚至是 Vibe Coding 的許多工具與 Prompt，絕大多數都是在 GitHub 上進行開發與共享。
主要使用族群
開源專案維護者、協作開發團隊、以及需要展示作品集的個人開發者。在 Vibe Coding 的時代，許多獨立開發者、大學生，甚至是剛接觸程式的愛好者，都會使用 GitHub 存放或展示「Prompt」與「成果」。
GitHub 可以做什麼？
除了「存檔案」，GitHub 還有許多強大的功能：
版本管控 ( Version Control )
記錄程式碼的每一段的修改紀錄，如果 AI 改壞了網頁，隨時可以「坐時光機」回到上一個正常運行的版本。
靜態網頁空間 ( GitHub Pages )
把 HTML/CSS/JS 檔案放在 Github，產生一個專屬網址，讓它變成真正的網站。
協作開發
邀請朋友一起協同編輯同一個專案，或者去「叉 ( Fork )」別人的程式碼來研究學習。
GitHub Actions
自動化流程。例如：上傳程式碼之後，它會自動幫你檢查錯誤或部署網頁。
使用 GitHub 的優缺點
使用 GitHub 有下列的優缺點：
優點：
- 完全免費：對於個人靜態網頁而言，幾乎不需要花錢。
- 方便管理：所有的作品一目瞭然，適合建立個人數位作品集。
- 業界標準：學會 GitHub 是通往軟體開發領域的必經之路。
- 整合性強：主流 AI 工具都能與 GitHub 完美連動。
缺點：
- 新手門檻較高：必須認識 Commit、Push、Repository 等專業術語。
- 全英文介面：對於英文不好的學使用者，英文介面稍微有些壓力。
- 公開性問題：免費版的「公開存儲庫」會向所有人公開原始碼。
GitHub 的使用限制
雖然 GitHub 很大方，但還是有一些基本的規範：
檔案大小限制
單一檔案建議不超過 50MB，整個專案 ( Repo ) 建議控制在 1GB~5GB 內。
靜態網頁限制
GitHub Pages 只能運行「純前端」程式碼 ( HTML/CSS/JS )，不能執行資料庫 ( 如 MySQL ) 或後端語法 ( 如 PHP、Python 網頁伺服器 )。
流量與容量
免費版每個月有 100GB 的流量限制 ( 對於個人小專案而言非常足夠 )。
隱私權
免費帳號雖然可以開「私有庫」，但如果開啟 GitHub Pages 網頁功能，該專案必須設定為「公開 ( Public )」（ 升級付費版可變成私有 ）。
GitHub 上傳檔案的方式
根據使用者的技術熟悉度，可以選擇以下幾種方式：
網頁上傳 ( 最簡單 )
類似使用 Google 雲端硬碟的方式，直接在 GitHub 裡選擇上傳檔案，選擇要上傳的網頁檔案就可以上傳 ( 或拖拉檔案上傳 )，適合少量檔案的小作品。
Git 視覺化工具 ( GitHub Desktop、Fork、SourceTree 等 )
使用 GitHub 官方的桌面軟體或其他 Git 視覺化工具，就可以透過圖形化介面觀察專案狀況，並運用介面功能就能完成上傳或修改命令，適合新手或喜歡視覺化介面的專業工程師。
Command Line ( Git 指令 )
使用終端機輸入 Git 指令進行上傳、合併或修改的功能 (
git commit、git push等 )，屬於專業工程師的做法。IDE 直接同步
使用 VS Code 或 Cursor 等程式碼編輯器 ( IDE ) 時，內建有原始碼管理功能，寫完程式碼直接按一下就能上傳，同樣屬於專業工程師的常見做法。
Github 起手式：建立 GitHub 儲存庫 ( Repository )
在開始上傳之前，需要先在註冊 GitHub 帳號，進入 Github 網站後，點擊右上角「Sign Up」按鈕，就可以註冊帳號 ( 可以直接使用 Google 第三方註冊登入，也可以輸入 email 註冊 )。
前往 Github：https://github.com/
不論用何種方式註冊，都需要建立一個「Username 使用者名稱」，只能使用英文數字加上破折號「-」。
註冊帳號進入 Github 後，點擊左上角「Create Repository」建立一個儲存庫 ( Repository )，儲存庫可以存放專案的程式碼或相關資料 ( 如果使用者介面設定為暗色系，背景就會是黑底白字，下方畫面是亮色系畫面 )。
進入建立儲存庫畫面後，在上方輸入欄位輸入這個儲存庫的名稱，接著並進行一些儲存庫設定 ( 建議勾選「Add README」，相關說明參考下表 )，完成後點擊最下方的綠色按鈕「Create repository」，專屬的儲存庫就建立完成。
| 功能 | 說明 |
|---|---|
| Owner | 儲存庫擁有者，預設是自己帳號，如果有多人協作可以選擇別人。 |
| Choose visibility | 切換 Public ( 公開 ) 或 Private ( 私有 )，但部分私有權限只有付費版才有。 |
| Add README | 新增說明文件，專案的首頁說明。強烈建議勾選！讓儲存庫初始化，建立後能立刻看到網頁操作介面，方便直接上傳檔案。 |
| Add .gitignore | 忽略特定檔案，建立一個規則檔，告訴 GitHub 哪些檔案「不需要上傳」（ 例如暫存檔或密鑰 ）。對於純網頁開發的新手，目前可以先維持預設的 None。 |
| Add license | 選擇授權協議，定義別人能不能複製或商用你的程式，如果只是想公開分享作品，可以選擇 MIT License ( 最寬鬆的授權 ) 或 None。 |
點擊建立按鈕後，如果看到下方的畫面，表示儲存庫已經建立完成，可以開始準備上傳檔案，這時候儲存庫中會存在一個名為「README.md」的檔案。
建立 gh-pages 分支，產生對外公開網址
如果只是建立儲存庫，仍然無法讓網頁變成真正的網站，如果要讓儲存庫變成網頁空間，必須要建立「gh-pages」分支，透過 Github Pages 的功能，讓儲存庫變成網頁空間。點擊左上方「main」下拉選單，選擇「View all branches」 查看所有分支。
Git 裡面的分支類似「樹幹和枝葉」，以 main ( 主線、主幹 ) 沿伸出不同的分支 ( branch )，不同分支或主幹互不干擾，但又可以互相整合。
點擊右上方「New branch」建立新分支。
輸入分支名稱「gh-pages」，特別注意，只能夠這個名稱，其他所有名稱都不行！完成後點擊「Create new branch」。
建立完成後，在畫面中就可以看到 gh-pages 分支。
點擊最上方的「Setting」，從左側選擇「Pages」，中間畫面就可以看到這個儲存庫專屬的網址。
因為還沒有上傳任何檔案，所以點擊網址後，只會看到剛剛建立儲存庫時自動產生的 README.md 內容，但這已經是一個公開的網址，全世界所有人都可以看到這個網站了。
上傳第一個網頁
建立儲存庫和公開網址後，接著要把網頁檔案上傳到儲存庫裡，如果沒有網頁檔案，可以先右鍵下載下方的範例網頁，下載後打開網頁可以看到下方畫面。
直接右鍵「另存連結」，或開啟網頁後點擊滑鼠右鍵「另存新檔」：範例網頁
點擊上方的「Code」回到剛剛建立的儲存庫頁面，切換為「gh-pages」的 branch ( 特別注意，要切換成這個 branch 才會是分享的網頁 )，接著點擊「Add file > Upload files」。
如果已經會使用 Git 或相關視覺化工具，直接在工具裡面操作會更方便。
進入上傳頁面之後，上傳準備要發佈的網頁檔案，範例使用「hello-world.html」這個檔案，完成後輸入這次 Commit 的名稱 ( 註解非必填，可自行填寫相關說明 )，完成後按下「Commit changes」。
上傳完成後，回到「Code」畫面，就會看到 gh-pages 分支裡出現了 hello-world.html 這個檔案，如果切換回 main 分支就沒有這個檔案，因為這個檔案是屬於 gh-pages 分支。
注意，網站「首頁」的檔案名稱必須是 index.html，GitHub Pages 會自動尋找這個名稱作為首頁，如果命名為 home.html 或其他名稱，單純輸入主網域網址就不會顯示，必須要輸入完整檔名，例如
https://xxxx.github.pages/會指向到https://xxxx.github.pages/index.html。
回到剛剛的網址，在網址後方加上檔案名稱，就可以看到網頁囉！這也表示網頁正式部署成功！
修改網頁內容，重新上傳部署
如果網頁內容有修改，也可以運用同樣的方式重新上傳，如果想快速嘗試，可以下載下方的範例網頁檔案，解壓縮之後可以得到一個如下方架構的資料夾 ( 首頁檔案 index.html、img 和 test 資料夾、img 資料夾裡有一張 mona.jpg，test 資料夾裡有 a1.html 和 a2.html )。
範例網頁檔案 ( 需解壓縮 )：vibe-coding-demo.zip
回到自己的 Github 儲存庫 ( Repository )，點擊 Code 頁面左上角 branch 下拉選擇「gh-pages」，接著點擊「Add file > Upload files」。
如果已經會使用 Git 或相關視覺化工具，直接在工具裡面操作會更方便。
進入上傳頁面之後，把修改的內容 ( 可以使用範例網頁檔案 ) 全部上傳，完成後輸入這次 Commit 的名稱 ( 註解非必填，可自行填寫相關說明 )，完成後按下「Commit changes」。
完成後回到 code 頁面，可以看到在 gh-pages 的 branch 裡已經出現剛剛上傳的檔案。
切換到 setting 頁面，點擊左側選單 pages，點擊公開網址，就可以開啟網頁。
下圖是使用範例網頁，開啟後就可以看到簡單的文字以及圖片。
根據網頁的大小，Github 會有 1～5 分鐘的處理時間，處理後就可以看到網頁。
結語
GitHub 不僅是存放程式碼的地方，更是展現創意的舞台，在 Vibe Coding 的過程中，已經可以透過 AI 解決邏輯問題，而 GitHub 更近一步解決展示與管理的問題，未來可以把更多的 AI 生成作品部署上去，打造一個屬於自己的 AI 作品集網站！
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～