AI架站

今天這篇文章非常興奮，因為我們要來玩現在最流行的 「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。 ...

最近 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）來生成網站。 輸入提示詞 (Prompt)： 在編輯器中告訴 AI 你的需求。例如我的範例是： 「做一個精美的靜態網頁，介紹 AI 人工智慧跟 Python 的歷史。」 (小撇步：如果 AI 回英文，可以要求它用繁體中文回答) 生成檔案： AI 會自動幫你寫好 index.html（網頁架構）、style.css（樣式）和 script.js（功能）。 本地預覽： 點擊 index.html 在瀏覽器打開，你會發現一個精美的一頁式網站已經完成了！但現在只有你看得到，下一步我們要讓它上線。 Step 2：註冊並設定 GitHub 要使用 GitHub Pages，你必須先有一個 GitHub 帳號。 ...