Vibe Coding 實戰：使用 GitHub 部署你的網頁作品

大家是否已經使用 AI 寫出一手漂亮的網頁程式碼了呢？雖然 Vibe Coding 可以產生漂亮的網頁或實用的功能，但只能在 AI 工具裡進行體驗，總感覺缺少了些什麼。這篇文章將帶領大家進入 GitHub 的世界，透過簡單的步驟，把各種創意從電腦硬碟釋放到網際網路上，讓全世界的人只要點開網址，就能看見精彩的作品！

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 什麼是 GitHub？
• GitHub 可以做什麼？
• 使用 GitHub 的優缺點
• GitHub 的使用限制
• GitHub 上傳檔案的方式
• Github 起手式：建立 GitHub 儲存庫 ( Repository )
• 建立 gh-pages 分支，產生對外公開網址
• 上傳第一個網頁
• 修改網頁內容，重新上傳部署

什麼是 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」，專屬的儲存庫就建立完成。

點擊建立按鈕後，如果看到下方的畫面，表示儲存庫已經建立完成，可以開始準備上傳檔案，這時候儲存庫中會存在一個名為「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 作品集網站！

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 範例 - 英文單字卡

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～