用 Vibe Coding 打造 Hugo 個人網站,部署到 GitHub Pages,並綁定 Cloudflare 網域
各位觀眾朋友大家好,這裡是程式猿 AFA。 這篇文章整理我在影片裡的完整流程:用 Vibe Coding(氛圍編碼) 生成一個 Hugo 靜態個人網站,部署到 GitHub Pages,並且在你已經購買網域的前提下,把 Cloudflare 網域 掛到 GitHub Pages,讓網站可以用「自己的網域」直接開啟。之後我也會把影片裡可能遺漏、或需要補強的部分,持續整理放在網站上。 你會用到什麼 Google Antigravity AI 編輯器(目前以 macOS 為主) Hugo(本機端預覽用) GitHub Repo(用來放網站原始碼與 GitHub Pages) Cloudflare(你若要使用自訂網域) 1) Antigravity 先設定成繁體中文(介面 + 生成內容) 為了讓操作與產出更順手,我會先做兩個設定: A. 介面繁體中文 到 Extensions(延伸模組) 搜尋並安裝 Chinese Language(或相近名稱的中文語言套件) 安裝後介面會切成繁體中文/中文介面(依套件而定) B. Agent 回答與檔案內容使用繁體中文 在 Agent 右側「三個點」 點 客製化(Customize) 新增一個條件(例如:「請一律用繁體中文回覆並生成檔案」) 之後它的回答、以及生成的檔案內容就會以繁體中文為主 2) 用 Vibe Coding 生成 Hugo 網站專案 在下載位置建立一個資料夾(例如:Blog) 在 Antigravity 裡 Open Folder 打開 Blog 模型你可以選: Gemini 最新模型 Claude 最新模型 提示詞重點包含: 部落格名稱(例如:appfromape's blog) 使用 Hugo 靜態網站 目標部署到 GitHub Pages 風格要接近 Apple 備忘錄(簡潔、留白、閱讀感) 需要 .gitignore(避免把不該上傳的檔案推到 GitHub) 3) 本機端預覽網站(macOS / Windows) 生成完成後,我會先在本機看一下網站目前長相是否滿意。 ...