如何發布你用 Gemini 製作的網站

簡介

許多人都在用 Gemini 製作網站。當你開啟 Canvas 工具時，Gemini 會給你一份單一的 HTML 或 React 檔案，並提供並排預覽。但拿到程式碼後，下一步並不直觀。你還需要把它放上某個地方代管、連結網域、讓它在手機上正常顯示，並設法之後還能繼續編輯。

像 GitHub 與 Netlify 這類傳統開發者工具可以把檔案放上網路，但之後每次修改都得管理程式碼檔案、處理部署，還要應付各種技術細節。大多數人並不想處理這些事。

在這份指南中，我會示範如何使用名為 Repaint 的全新 AI 工具，把你用 Gemini 製作的網站變成一個真正、已發布的網站。它能讓你從程式碼開始，發布網站，並透過與 AI 對話來進行編輯。

為什麼從 Gemini 發布網站這麼難

Gemini 可以生成程式碼，但它並不是完整的網站建構工具。當你問它如何發布到自己的網域時，它會把你引導到其他平台。它通常會建議像 GitHub、Netlify、Vercel 這類開發者工具，或是建議在 Framer、Wix、Squarespace 等傳統網站建構工具上重建。這兩種選擇都不理想。

開發者工具的好處是可以直接執行 Gemini 生成的程式碼。缺點是每次變更都得編輯特定的程式碼檔案。對非程式設計師而言，這意味著光是用 AI 做一些簡單修改，就得不斷把檔案在 Gemini 與已部署的程式碼之間搬來搬去。

大多數人為了避開程式碼的複雜性，會選擇 Wix、Squarespace 或 Webflow 等網站建構工具。這些平台讓發布修改更為順暢。問題是它們無法執行 Gemini 生成的網站，所以你必須手動重建一切。之後每次調整也都得手動處理。

這正是為什麼你應該使用像 Repaint 這樣的 AI 網站建構工具。它兼具執行自訂程式碼的彈性，以及在同一個地方編輯與發布的便利性。

什麼是 Repaint？

Repaint 是一個建立網站的 AI 平台。它採用與 Gemini 同樣以對話為核心的工作流程。你可以用日常語言提出修改需求，檢視結果，然後持續調整，直到網站達到理想的樣子。

但 Repaint 是一個完整的網站平台，不只是生成程式碼的地方。這代表它會處理 Gemini 不會處理的網站營運面向：

• 它會發布你的網站，讓人們真的能在網路上造訪。
• 它讓你可以連結自訂網域，網站才能在你真正的 URL 上運作。
• 它讓網站能持續用 AI 編輯，方便你之後再進行修改。
• 它協助管理 SEO 細節，例如頁面標題、描述與網站結構。
• 當網站需要擴展時，它可以建立新頁面。

這就是「生成一份程式碼檔案」與「擁有一個能長期管理網站的地方」之間的差別。

第一步：從 Gemini 匯入程式碼

當 Gemini 製作網站時，它會在 Canvas 面板中顯示程式碼和即時預覽。預設輸出是 HTML，但你也可以要求改成 React。有個小細節值得知道：當你要求製作網站時，Gemini 不會自動開啟 Canvas。你必須先從訊息框旁的下拉選單開啟 Canvas 工具，然後再問一次。

要取得程式碼，請點擊 Canvas 頂部的 Share 按鈕，然後點擊 Copy contents。前往 Repaint 程式碼匯入工具 並貼上程式碼。這會啟動網站建構流程。Repaint 會利用你的程式碼建立一個完整的網站，讓你可以發布並持續編輯。

如果你還沒在 Gemini 中製作過網站，建議要求使用 React。它比較接近 Repaint 所使用的格式，較不容易在轉換過程中遺失細微的設計細節。HTML 也可以，雖然之後可能需要透過與 Repaint 對話來修正一些問題。

第二步：規劃 Repaint 要建置的內容

貼上程式碼後，Repaint 會在開始建置之前先問你幾個問題。這讓你有機會決定是要完全沿用 Gemini 的版本、把它當作大致的靈感參考，還是擴展成擁有更多頁面的大型網站。

規劃內容

Gemini 常常製作單頁網站，網站中的連結是捲動到不同區段，而不是開啟新頁面。但大多數企業需要的不只一頁。所以如果你的網站只有一頁，可以考慮請 Repaint 將它建置為多頁網站。

你也可以趁這個時機加入更多內容。Gemini 通常不會製作大量頁面，例如部落格文章。把網站匯入 Repaint 時，你可以擴大範圍，把所有想要的內容都加進去。

任何新頁面都會延續你既有的風格。

規劃風格

預設情況下，Repaint 會沿用原作品的風格。這代表它會保留相同的外觀：色彩、版面配置、字型與間距。

但你不一定要保留原本的風格。如果你不滿意，可以請 Repaint 重新設計你的網站。Repaint 可以：

• 盡可能還原原本的版本
• 仿照另一個你喜歡的網站風格
• 為你的內容打造客製化風格
• 從 Repaint 的風格庫 挑選
• 由它為你決定

不必太煩惱。如果不喜歡結果，之後可以再請它做新的版本。

確認計畫

在生成任何內容之前，Repaint 會明確列出它即將建置的內容：哪些頁面、什麼內容、什麼風格。仔細看一遍，並做最後的調整。修改計畫比重新生成整個網站要快得多。

確認之後，Repaint 就會開始建立你的新網站！

第三步：生成你的網站

確認計畫後，Repaint 便開始建置你的網站。你會看到進度訊息，追蹤每個頁面的處理情況。簡單的首頁可能需要一兩分鐘；頁面較多的大型網站則可能花更久。

Repaint 並不是單純代管你貼上的程式碼。它會把 Gemini 的版本當作原始素材，然後依照你計畫描述的內容建置網站。如果你要求完全還原，它會盡量貼近原版。如果你要求更多頁面或不同風格，它則會把 Gemini 的版本作為起點。

生成過程中有時細節會在轉換中遺失。如果你的原始檔案是 HTML，更常發生這種情況，因為 React 比較接近 Repaint 所使用的格式。如果有任何重要細節遺失了，你可以在下一個步驟修正。

第四步：用 AI 編輯你的網站

Repaint 生成第一個版本後，你會在畫面右側看到它。現在你可以像在 Gemini 中那樣進行修改。你輸入想要的變更，Repaint 更新網站，然後你檢視結果。

舉例來說，你可以請 Repaint：

• 新增一個頁面
• 修改色彩或字型
• 加入聯絡表單
• 生成圖片
• 重寫文字內容

你可以持續調整，直到網站準備好可以發布。

第五步：發布你的網站

當網站準備好之後，點擊 發布 按鈕。Repaint 會把網站上線，並提供一個可以分享給任何人的網址。網址格式大概像這樣：https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

到了這個階段，你的成果就成了網路上真正的網站。你可以在手機上打開，傳給別人，或在真實的瀏覽器中測試。

你也不需要匯出程式碼或把檔案部署到別的地方。從此以後，Repaint 就是你編輯和發布網站的地方。如果之後想做修改，可以請 Repaint 更新網站，然後用相同的按鈕發布新版本。

第六步：連結你的網域

準備使用自己的網址時，請前往 網站設定 > 網域，並點擊 連結自訂網域。這需要付費方案，定價詳情請參閱這裡。

你的網域是在 Gemini 和 Repaint 之外的平台上管理的。它是在 GoDaddy、Namecheap 或 Cloudflare 等網域服務商處註冊的。你不需要把它搬到別處，只要在網域服務商那邊更新設定，讓網域指向你的 Repaint 網站即可。

如果你以前沒做過這件事，不用擔心。請 Repaint 一步一步帶你完成，它會告訴你確切的操作步驟。

變更生效可能需要幾個小時。一旦 Repaint 顯示你的網域已驗證，你的網站就會在自己的網域上正式上線。

結語

Gemini 讓建立網站的第一個版本變得很容易，但要把那份程式碼上線並持續維護仍然不簡單。Repaint 提供了一種方式，讓你可以把那份程式碼變成真正的網站，發布出去、連結網域，並持續用 AI 編輯。Repaint 讓「把生成的程式碼變成已發布的網站」前所未有地容易。

常見問題

用 Repaint 發布 Gemini 網站需要多久？

如果你的網站已經完成，通常只需要幾分鐘。分享程式碼、規劃網站、生成網站通常需要 2 到 5 分鐘。之後從完成到發布的時間取決於你想做多少調整。

用 Repaint 發布要多少錢？

把程式碼匯入 Repaint、生成網站、編輯與發布都是免費的。免費方案的主要限制是使用量有上限、無法使用自訂網域，且網站上會顯示 Repaint 標誌。付費方案起價為每月 20 美元（按年計費）或每月 25 美元（按月計費），包含更多使用量、自訂網域支援，並移除 Repaint 標誌。

為什麼不直接用 GitHub Pages、Netlify 或 Vercel？

當然可以，特別是如果你習慣管理程式碼的話。那些工具很擅長把檔案放上網路。但每次有意義的變更都會把你帶回到程式碼裡，這代表你會一直在 Gemini、你的編輯器和代管工具之間來回搬檔案。

Repaint 不同之處在於它是一個完整的網站平台，而不只是提供檔案的地方。這代表你可以持續用 AI 編輯、在同一個地方發布變更、管理頁面、更新 SEO 設定、優化圖片、串接表單，並使用你的自訂網域。它是為了長期管理網站而打造的，而不只是為了第一次部署。

我需要懂程式才能修正問題嗎？

不用。Repaint 是為不會寫程式的人打造的。從 Gemini 匯入程式碼之後，你就再也不需要管理程式碼了。如果有東西看起來不對，可以透過與 AI 對話來修正。懂程式可以幫助你更精確地表達需求，但並非必要。

網站看起來會跟 Gemini 版本完全一樣嗎？

如果你告訴 Repaint 還原原版，它應該會看起來幾乎一模一樣。偶爾會有一些細節遺失，因為 Repaint 會把程式碼轉換成自己的網站格式。如果原始檔案來自 Gemini 且是 HTML，轉換問題會更常見。萬一發生這種情況，你應該可以在幾次對話內修正所有問題。

如果 AI 出錯了怎麼辦？

每次更新時，Repaint 都會儲存網站的每個版本。你可以請 Repaint 退回上一步，它會還原到先前的版本。或者如果你想回到某個特定時間點，也可以手動還原任意一個先前的版本。所以你可以放心修改，不必擔心毀掉網站。

匯入之後，表單和按鈕還能正常運作嗎？

可以。你原本的 Gemini 網站上的聯絡表單可能無法運作。但當你把網站搬到 Repaint 後，它可以把表單變成真正的聯絡表單，當有人填寫時會寄電子郵件通知你。按鈕只要連結到實際存在的頁面或區段就能運作。如果某個按鈕沒有指向任何地方，可以請 Repaint 為它建立連結。

Repaint 可以處理我 Gemini 網站中的圖片、圖示和其他素材嗎？

Gemini 常常從 Unsplash 等來源取得圖片，並用網址連結，而非把圖片儲存在你的程式碼裡。匯入程式碼時，Repaint 可以擷取並儲存這些圖片的副本，讓它們永久可用於你的新網站。如果你還需要新增圖片，Repaint 也可以為你生成。

我可以加入 SEO 設定、分析工具和中繼資料嗎？

可以。你只要請 Repaint 幫忙，就能加入自訂程式碼、分析工具與中繼資料。它可以為你設定技術性 SEO，也可以加入來自其他平台的指令碼與嵌入內容。要加入 Google Analytics，只需提供你的 GA ID 即可。

Repaint 是否取代了代管服務，還是我仍需要另外的代管？

Repaint 本身就是一個代管平台，它會運行你的網站。你不需要再使用其他代管服務，例如 GitHub Pages、Netlify、Vercel 或其他網站建構工具。