最近 AI 界非常流行一個詞叫 「Vibe Coding」（氛圍編碼），簡單來說，就是你不需要懂艱澀的程式語法，只要憑著「感覺」告訴 AI 你想要什麼，它就能幫你把程式碼寫好！

今天這篇文章就要來實測 Google 最近推出的強大工具 Google Antigravity，它長得像 VS Code，但內建了強大的 AI Agent。我們要用它來「詠唱」出一個網頁，並且教大家如何用 GitHub Pages 這個免費空間，把你的網站發布到網路上分享給朋友看！

為什麼你需要這招？

很多朋友用 AI 生成了漂亮的網頁（HTML/CSS 檔），但通常只能在自己的電腦上打開（Local 端），沒辦法傳個網址就讓朋友用手機或電腦看到。

這時候你就需要 GitHub Pages！它是一個完全免費的靜態網頁託管服務，只要你有 GitHub 帳號，就能輕鬆把寫好的網頁變成一個公開的網址。

Step 1：用 Google Antigravity 生成網頁

首先，我們使用 Google Antigravity（或任何支援 Vibe Coding 的 AI 編輯器，如 Cursor、Bolt.new）來生成網站。

  1. 輸入提示詞 (Prompt)： 在編輯器中告訴 AI 你的需求。例如我的範例是：

    「做一個精美的靜態網頁，介紹 AI 人工智慧跟 Python 的歷史。」 (小撇步：如果 AI 回英文，可以要求它用繁體中文回答)

  2. 生成檔案： AI 會自動幫你寫好 index.html（網頁架構）、style.css（樣式）和 script.js（功能）。

  3. 本地預覽： 點擊 index.html 在瀏覽器打開，你會發現一個精美的一頁式網站已經完成了！但現在只有你看得到，下一步我們要讓它上線。

Step 2：註冊並設定 GitHub

要使用 GitHub Pages，你必須先有一個 GitHub 帳號。

  1. 前往 github.com 註冊帳號。
  2. 登入後，點擊右上角的 「New Repository」（新增儲存庫）。

⚠️ 關鍵設定：Repository 命名規則

這邊有兩種玩法，請特別注意你的命名方式：

  • 玩法 A：建立個人主站 (User Site)

    • Repository Name 必須設定為：你的帳號名稱.github.io
    • 例如我的帳號是 appfromape，我就要取名為 appfromape.github.io。
    • 這樣你的網址就會超簡潔，直接是 https://appfromape.github.io。

  • 玩法 B：建立專案子分頁 (Project Site)

    • 如果你已經有主站了，想放第二個網站，名稱可以隨便取（例如 python-history）。
    • 之後的網址會變成：https://你的帳號.github.io/python-history。

設定好名稱後，確保選擇 Public (公開)，然後點擊 Create repository。

Step 3：上傳網頁檔案

建立好倉庫後，我們要跟著以下步驟把剛剛 AI 寫好的檔案傳上去：

  1. 在 Repository 頁面中，點選 「uploading an existing file」。
  2. 將你電腦裡生成的 index.html、CSS 和 JS 檔案全部拖拉進去。
  3. 等待上傳完成後，在下方的 “Commit changes” 區塊，直接按下綠色的 「Commit changes」 按鈕確認存檔。

Step 4：開啟 GitHub Pages 功能

最後一步，我們要告訴 GitHub 把這些檔案變成網頁：

  1. 點選上方選單的 「Settings」 (設定)。
  2. 在左側欄位找到並點選 「Pages」。
  3. 設定 Source：
    • 在 “Build and deployment” 下方，Source 選擇 「Deploy from a branch」。
    • Branch 選擇 main (或 master)，資料夾選 / (root)。
    • 按下 Save。

此時 GitHub 會開始自動部署（上方會顯示 Action 正在跑，稍等一下變綠燈）。重新整理頁面後，你就會在最上方看到一行網址： Your site is live at https://......

點開它，恭喜你！你的 AI 生成網頁已經成功上架，現在可以把這個連結傳給親朋好友炫耀囉！🎉

💡 補充小知識：靜態 vs 動態網頁

在使用 GitHub Pages 時要特別注意，它只支援 「靜態網頁 (Static Website)」。

  • 靜態網頁：由 HTML、CSS、JavaScript 組成，內容固定，不連接後端資料庫。
  • 動態網頁：需要後端伺服器和資料庫處理資料（例如會員登入系統、動態留言板）。

所以在使用 Vibe Coding 生成程式碼時，記得跟 AI 強調你要做的是 「靜態網頁」，這樣放到 GitHub Pages 上才不會出錯喔！

總結

透過 Google Antigravity 的 Vibe Coding 能力，加上 GitHub Pages 的免費空間，現在每個人都能在 30 分鐘內擁有自己的專屬網站。不用寫一行 code，只要會「說話」就能做網頁的時代真的來了！

如果你覺得今天的教學對你有幫助，歡迎試著做一個自己的履歷網頁或作品集分享在留言區！

喜歡我的影片別忘了按讚、訂閱、分享，並開啟小鈴鐺，這樣才不會錯過最新的軟體教學喔！我是 AFA，我們下次見！👋