零基礎架站!Google Antigravity + Vibe Code 一鍵生成網頁 & 免費上架 GitHub 教學

最近 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 帳號。 ...

2025-12-06 · 2 min · AFA