各位觀眾朋友大家好，這裡是程式猿 AFA。

這篇文章整理我在影片裡的完整流程：用 Vibe Coding（氛圍編碼） 生成一個 Hugo 靜態個人網站，部署到 GitHub Pages，並且在你已經購買網域的前提下，把 Cloudflare 網域 掛到 GitHub Pages，讓網站可以用「自己的網域」直接開啟。之後我也會把影片裡可能遺漏、或需要補強的部分，持續整理放在網站上。

你會用到什麼

  • Google Antigravity AI 編輯器（目前以 macOS 為主）
  • Hugo（本機端預覽用）
  • GitHub Repo（用來放網站原始碼與 GitHub Pages）
  • Cloudflare（你若要使用自訂網域）

1) Antigravity 先設定成繁體中文（介面 + 生成內容）

為了讓操作與產出更順手，我會先做兩個設定：

A. 介面繁體中文

  1. 到 Extensions（延伸模組）
  2. 搜尋並安裝 Chinese Language（或相近名稱的中文語言套件）
  3. 安裝後介面會切成繁體中文/中文介面（依套件而定）

B. Agent 回答與檔案內容使用繁體中文

  1. 在 Agent 右側「三個點」
  2. 點 客製化（Customize）
  3. 新增一個條件（例如：「請一律用繁體中文回覆並生成檔案」）
  4. 之後它的回答、以及生成的檔案內容就會以繁體中文為主

2) 用 Vibe Coding 生成 Hugo 網站專案

  1. 在下載位置建立一個資料夾（例如：Blog）
  2. 在 Antigravity 裡 Open Folder 打開 Blog
  3. 模型你可以選：
    • Gemini 最新模型
    • Claude 最新模型
  4. 提示詞重點包含：
    • 部落格名稱（例如：appfromape's blog）
    • 使用 Hugo 靜態網站
    • 目標部署到 GitHub Pages
    • 風格要接近 Apple 備忘錄（簡潔、留白、閱讀感）
    • 需要 .gitignore（避免把不該上傳的檔案推到 GitHub）

3) 本機端預覽網站（macOS / Windows）

生成完成後，我會先在本機看一下網站目前長相是否滿意。

macOS：安裝 Hugo

前提是你已經安裝 Homebrew，然後執行：

brew install hugo

Windows：安裝 Hugo

如果你習慣用 Chocolatey（Choco），可以用 Choco 安裝 Hugo（依你環境為準）。

啟動本機預覽

進到專案資料夾後執行（你的專案都在 Blog 裡）：

cd Blog
hugo server -D

終端機會出現一個本機 URL，把它複製到瀏覽器，就可以看到目前生成的網站。

停止伺服器用：

  • macOS / Windows 通常都是 Ctrl + C

4) 建立 GitHub Pages Repo 並推上去

  1. 到 GitHub 建立新 Repo
  2. Repo 名稱建議使用：你的帳號.github.io
  3. 建立完成後，把本機資料推上去（照 GitHub 頁面提示的指令做即可）

常見流程（示意）：

git init
git add .
git commit -m "init hugo site"
git branch -M main
git remote add origin [email protected]:你的帳號/你的帳號.github.io.git
git push -u origin main

5) 在 GitHub 開啟 Pages（用 GitHub Actions）

  1. 進 Repo 的 Settings
  2. 找到 Pages
  3. Build and deployment 選擇 GitHub Actions
  4. 到 Actions 看流程跑完，變綠燈後
  5. 你就可以用 https://你的帳號.github.io 開啟網站

6) 綁定自訂網域（GitHub Pages + Cloudflare）

如果你已經在 Cloudflare 買了網域，你可以把網域掛到 GitHub Pages。

A. GitHub Pages 設定 Custom Domain

  1. Repo → Settings → Pages
  2. 在 Custom domain 輸入你的網域（例如：appfromape.com 或 www.appfromape.com）
  3. 按 Save
  4. GitHub 會開始檢查/驗證網域是否可用

B. Cloudflare 設定 DNS（CNAME）

到 Cloudflare 的網域後台 → DNS 管理，新增紀錄（影片流程是 CNAME 方向）：

  • 一筆給根網域（或依你的架構）
  • 一筆給 www

概念上會是：

  • 名稱（Name）: @（或你的網域）
  • 目標（Target）: 你的帳號.github.io（或對應 GitHub 要求的目標）
  • 名稱（Name）: www
  • 目標（Target）: 你的帳號.github.io

儲存後需要等待一段時間完成驗證；驗證成功後，你就能用自己的網域直接進站。

7) 新增 Hugo 文章與推送更新

A. 新增文章

在專案資料夾執行：

cd Blog
hugo new posts/new-blog.md

它會在 content/posts/ 底下產生新文章檔案。

B. 記得把 draft 關掉

文章 front matter 通常會有 draft: true，要上線就改成 false：

draft: false

C. Git 上傳三連（add / commit / push）

在專案根目錄：

git add .
git commit -m "add new post"
git push

推上去後，Actions 跑完變綠燈，重新整理你的網站，就會看到新文章出現。