Hugo

各位觀眾朋友大家好，這裡是程式猿 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） 生成完成後，我會先在本機看一下網站目前長相是否滿意。 ...

今天這篇文章非常興奮，因為我們要來玩現在最流行的 「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 風格的簡約網站。 準備工作 在開始之前，請確保你準備好以下工具： Google Antigravity：請至 Google 官網下載安裝（目前主要支援 MacOS）。 GitHub 帳號：用來存放網站原始碼與免費代管。 基本環境：電腦需安裝 Git 與 Hugo（稍後會教大家怎麼裝）。 Step 1：下載與設定 Antigravity 下載安裝：前往 Google 官網下載 Antigravity 並安裝。 中文化設定： 打開 Antigravity，點選左側的「Extensions」（擴充套件）。 搜尋 “Chinese”，安裝繁體中文語言包，重啟後介面就會變成親切的中文了。 AI 繁中優化： 點選介面右上角的三個點（或 AI 設定），選擇 「Customize」（客製化）。 新增一個條件：「請使用繁體中文回答」。這樣之後 AI 幫你寫 Code 或解釋時，就不會滿口英文，溝通更順暢。 Step 2：Vibe Coding！一句話生成 Hugo 網站 這是最神奇的一步！我們不需要自己建立檔案，全靠 AI。 ...