今天這篇文章非常興奮，因為我們要來玩現在最流行的 「Vibe Coding」（氛圍編碼）！簡單來說，就是即便你不懂艱澀的程式碼，只要透過 AI 工具，用自然語言告訴它「你想要的感覺」，就能把網站做出來。

我們要使用的工具是 Google 推出的 AI 程式碼編輯器 —— Google Antigravity。我會教大家如何用它生成一個高質感的個人部落格，並且利用 GitHub Pages 免費架站，最後甚至掛上自己的專屬網域！

為什麼選擇 Google Antigravity？

Google Antigravity 是一款強大的 AI 編輯器（介面與 VS Code 相似），它最厲害的地方在於可以直接理解我們的自然語言指令，幫我們寫 Code、生成檔案。

對於想要嘗試 Vibe Coding 的新手來說，你不需要從頭學 HTML 或 CSS，只需要負責「下指令」，剩下的交給 AI 搞定。這篇教學會示範如何用它搭配 Hugo（靜態網站產生器），做一個類似 Apple Notes 風格的簡約網站。

準備工作

在開始之前，請確保你準備好以下工具：

  1. Google Antigravity：請至 Google 官網下載安裝（目前主要支援 MacOS）。
  2. GitHub 帳號：用來存放網站原始碼與免費代管。
  3. 基本環境：電腦需安裝 Git 與 Hugo（稍後會教大家怎麼裝）。

Step 1：下載與設定 Antigravity

  1. 下載安裝：前往 Google 官網下載 Antigravity 並安裝。
  2. 中文化設定：
    • 打開 Antigravity，點選左側的「Extensions」（擴充套件）。
    • 搜尋 “Chinese”，安裝繁體中文語言包，重啟後介面就會變成親切的中文了。
  3. AI 繁中優化：
    • 點選介面右上角的三個點（或 AI 設定），選擇 「Customize」（客製化）。
    • 新增一個條件：「請使用繁體中文回答」。這樣之後 AI 幫你寫 Code 或解釋時，就不會滿口英文，溝通更順暢。

Step 2：Vibe Coding！一句話生成 Hugo 網站

這是最神奇的一步！我們不需要自己建立檔案，全靠 AI。

  1. 建立資料夾：在電腦中建立一個空資料夾（例如命名為 blog），並在 Antigravity 中開啟它。
  2. 下達指令（Prompt）： 在 AI 對話框中輸入類似以下的指令（這就是 Vibe Coding 的精髓）：

    「我要做一個個人網站的部落格，請幫我用 Hugo 靜態網站產生器來撰寫。風格我想要類似 Apple Notes（備忘錄） 的簡約風。請注意，最後幫我加上 .gitignore 檔案，避免上傳不必要的系統檔。」

  3. 生成代碼：按下送出，AI 就會開始自動幫你規劃檔案結構、下載主題模板、撰寫設定檔。你只需要在它跳出確認時按下 「Accept」 或 「Run」，檔案就會瞬間出現在左側列表中。

Step 3：本地端預覽 (Local Preview)

網站寫好了，但在上傳之前，我們要先在自己的電腦上檢查。

  1. 安裝 Hugo：
    • MacOS：打開終端機（Terminal），輸入 brew install hugo（需先安裝 Homebrew）。
    • Windows：推薦使用 Chocolatey 安裝。
  2. 啟動伺服器： 在 Antigravity 內建的終端機中輸入： 
    hugo server
  3. 預覽網站： 終端機會顯示一個網址（通常是 http://localhost:1313）。複製它貼到瀏覽器，你就能看到剛剛 AI 幫你生成的網站了！如果不滿意，隨時可以叫 AI 再修改（例如：「字體大一點」、「標題改顏色」）。

Step 4：新增文章與內容

既然是部落格，當然要寫文章。

  1. 生成新文章： 在 AI 對話框輸入：「幫我新增一篇新文章，標題是『我的第一篇 AI 部落格』」。 或者手動輸入指令：hugo new posts/my-first-post.md。
  2. 編輯內容： 打開生成的 .md 檔案，你可以直接開始寫作。記得檢查文件開頭的 draft: true（草稿），如果要發布，記得改成 draft: false。

Step 5：免費上架 GitHub Pages

確認網站沒問題後，我們把它發布到網路上，讓全世界都看得到。

  1. 建立 GitHub Repository：
    • 登入 GitHub，按右上角「+」>「New repository」。
    • Repository name 命名為：你的帳號名稱.github.io（格式必須正確，例如 appfromape.github.io）。
    • 按下 Create。
  2. 上傳程式碼： 回到 Antigravity 的終端機，依序執行以下指令（將你的檔案推送到 GitHub）： 
    git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin [https://github.com/你的帳號/你的帳號.github.io.git](https://github.com/你的帳號/你的帳號.github.io.git)
git push -u origin main
  3. 設定 GitHub Actions：
    • 回到 GitHub 該專案頁面，點選 「Settings」 > 左側選單 「Pages」。
    • 在 Build and deployment 區塊，Source 選擇 「GitHub Actions」。
    • GitHub 會自動偵測並部署。等待燈號變綠，你就能透過 https://你的帳號.github.io 看到你的網站了！

Step 6：綁定個人網域 (進階選修)

如果你有購買網域（例如在 Cloudflare 購買），可以讓網址更專業：

  1. Cloudflare 設定：
    • 進入 DNS 設定，新增一筆 CNAME 紀錄。
    • 名稱（Name）填 @ 或 www，內容（Target）填 你的帳號.github.io。
  2. GitHub 設定：
    • 回到 GitHub Pages 設定頁，在 「Custom domain」 欄位填入你買的網址（例如 afa.com）。
    • GitHub 會自動生成 HTTPS 憑證，等待驗證通過，你的專屬網址就生效啦！

總結

透過 Google Antigravity 結合 Vibe Coding 的概念，寫程式不再是工程師的專利。我們只需要專注在「想要什麼」，剩下的語法細節就交給 AI 去處理。

希望今天的教學能幫大家輕鬆架設出屬於自己的個人網站！如果你在操作過程中有任何問題，或者想要分享你的網站，歡迎在下方留言讓我知道！

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