5分鐘免費整網站教學：用 Gemini + Google Sites 零 Coding 上線

想整一個自己嘅網站，今日已經唔一定要識 HTML、CSS，甚至唔需要識 Coding。

如果你只係想要一個 Personal Profile、Freelancer Portfolio、Digital Name Card，或者一條可以 WhatsApp 畀人嘅公司介紹 Link，用免費工具已經可以快速整到一個真正公開、其他人撳得入去睇嘅網站。

今次我哋會用兩樣工具：

Gemini + Google Sites。

Gemini Canvas 負責生成同修改網頁 Code；Google Sites 就負責將內容放上網。

熟習兩個工具，最快幾分鐘已經可以完成基本版本。如果係第一次使用，預留 15–30 分鐘會比較實際，因為登入、核對內容、揀相、調整版面同公開權限都需要時間。

完成後，你會得到一條可以公開分享嘅網址。

但要先講清楚：呢個方法整到嘅係一個簡單、可分享嘅網站，唔代表自動擁有一套完整 Business Website 架構。

如果你只需要 Online Name Card，呢個方法可能已經足夠；如果你想靠網站做 SEO、廣告、Lead Generation 或長期 Content Marketing，文章後半部分會講清楚兩者分別。

開始之前，你需要準備啲咩？

你需要：

• 一個可以使用 Gemini Canvas 同 Google Sites 嘅 Google Account；
• 姓名或品牌名稱；
• 一句簡介；
• 服務、經驗或作品資料；
• Email、WhatsApp 或其他聯絡方法；
• 有需要的話，再準備 Logo 同相片。

Gemini Canvas 嘅功能及使用限制可能因帳戶、地區、年齡或方案而不同；公司或學校帳戶亦可能受管理員設定限制。

另外，唔好將密碼、API Key、客戶私人資料或其他敏感內容放入 Prompt。

Step 1：叫 Gemini 幫你建立網站初稿

打開 Gemini，開一個新 Conversation，再選擇 Canvas。

與其只係講：

幫我整個網站。

最好一次過交代用途、對象、內容、風格同技術限制。你可以直接 Copy 以下 Prompt，再將中括號入面嘅內容換成自己資料：

幫我建立一個簡潔、專業、Responsive 嘅 Single Page 個人網站。

網站用途係介紹我自己／我嘅服務，主要俾香港用戶瀏覽。

請使用繁體中文，語氣自然專業，HTML 語言設定使用 zh-HK。

網站需要包括：

1. Hero Section：姓名／品牌名稱 + 一句簡介
2. About：簡單自我介紹
3. Services：列出 3 項服務
4. Experience / Portfolio：簡單介紹經驗或作品
5. Contact：Email 及 WhatsApp CTA

設計風格：Minimal、Clean、Modern，有足夠留白，Mobile First。

請輸出一個完整、self-contained HTML file。

CSS 放入 <style>；如需要 JavaScript，放入 <script>。

不要使用 React、Vue、npm、外部 Framework 或任何需要另外安裝嘅套件。

不要加入需要 Backend 先可以運作嘅表單；聯絡按鈕請使用 Email 及 WhatsApp Link。

所有內容必須可以直接貼入 Google Sites 嘅 Embed Code 使用。

請確保文字清晰、顏色對比足夠、按鈕容易點擊，而且手機畫面唔會左右溢出。

之後再補充你自己嘅資料。

例如：

我叫 David Chan，係香港 Freelance Photographer，主要幫餐廳、產品同 Corporate Event 影相。希望整體感覺簡潔、成熟，主色黑白。WhatsApp 按鈕文字用「查詢拍攝檔期」。

資料愈具體，Gemini 生成嘅第一版通常愈接近你真正需要。

Step 2：唔鍾意就直接叫 Gemini 改

AI 整網站最方便嘅地方，唔係第一次就完美，而係你可以直接用人話修改。

例如：

個網站太普通，想成熟同 Premium 少少，但唔好用金色。

Hero 太高，縮短約 20%，手機第一屏要見到聯絡按鈕。

Services 改成三張 Card；Desktop 一行三張，Mobile 一行一張。

我係律師，依家個 Design 太似 Creative Agency，請改成比較穩重、可信嘅 Professional Service Style。

比起只講「靚啲」，最好講清楚邊一部分、想改成點，同埋有咩唔想要。

你唔需要知道 padding、grid 或 flexbox 係咩。你只需要講清楚想見到嘅結果。

完成修改後，先做一次基本檢查：

• 姓名、品牌、電話、Email 有冇錯；
• WhatsApp、Email 同其他 Link 有冇填好；
• 仲有冇 Lorem Ipsum、示例相片或 Placeholder；
• Desktop 同 Mobile Preview 係咪都睇得清楚；
• 有冇將你冇提供嘅經驗、客戶或成績寫咗落去。

AI 生成 Code 可以加快製作，但內容同功能仍然要由你核對。

核對完，喺 Canvas 右上角撳 Code，再 Copy 完整 HTML，準備貼入 Google Sites。

Step 3：將 Code 放入 Google Sites

打開 Google Sites，建立一個 Blank Site。

去右邊選單：

Insert → Embed → Embed Code

將 Gemini 生成嘅完整 HTML 貼入去，再按：

Next → Insert

Google 官方文件確認，Embed Code 可以加入 HTML、CSS 同 JavaScript；CSS 需要放喺 <style>，JavaScript 就放喺 <script>。

如果畫面太矮，可以向下拉大 Embed 區域。你亦可以使用 Full Page Embed，將整個 Page 用嚟顯示嵌入內容。

但有一點要留意：

Google Sites 係將 Code 當成嵌入內容顯示，唔係將所有元素轉成 Google Sites 原生元件。

即係話，如果之後要大幅修改版面，通常最穩陣嘅做法係返去 Gemini 或 Code 修改，再將更新版本貼入 Google Sites。

Step 4：Preview、Publish，再用無痕模式測試

正式 Publish 前，先用 Google Sites Preview 睇一次 Desktop、Tablet 同 Mobile。

最少檢查：

• 文字會唔會太細或被截斷；
• 按鈕係咪撳得到；
• WhatsApp、Email 同外部 Link 係咪正確；
• 相片載入係咪正常；
• Embed 區域高度夠唔夠；
• 頁面有冇左右走位。

確認後，右上角按：

Publish

Google Sites 會要求你設定 Web Address，例如：

sites.google.com/view/davidchan

再將 Published Site 設定為公開瀏覽。

Publish 完之後，最好開一個冇登入 Google Account 嘅無痕視窗測試網址，確保其他人真係睇得到，而唔係只有你自己有權限。

完成。

你依家已經有一條網址，可以放入 Instagram Bio、LinkedIn、Email Signature、WhatsApp，甚至印落 Name Card。

實際示範：Gemini + Google Sites 成品

我哋亦照住以上流程，用 Gemini Canvas 生成版面，再以 Google Sites Embed 發佈咗一個公開 Sample。你可以先睇畫面，再直接打開網站測試：

開啟 AI Concept Studio Google Sites Sample

Sample 內文同聯絡資料只作示範，唔代表 AI Concept Studio 嘅正式公司資料。

咁仲使唔使搵人正式整網站？

如果你整完第一個反應係：

「其實咁咪已經夠？」

答案可能真係：

夠。先用住。

如果網站主要用嚟做以下用途，免費方案非常合理：

• Personal Profile；
• Freelancer Introduction；
• Portfolio；
• Digital Name Card；
• CV / Resume Website；
• 一次性 Event Page；
• Project Introduction；
• 主要靠你主動 Send 畀客戶睇嘅公司簡介。

冇必要因為「公司應該有網站」，就一開始花幾萬元整一套自己根本用唔着嘅系統。

Google Sites 亦支援 Custom Domain。如果日後你買咗自己嘅 Domain，而且帳戶及設定符合要求，可以將自訂網址連接到 Google Sites；不過 Domain 本身仍然需要另外擁有及設定。

工具本身冇問題。

真正要問嘅係：

你想個網站幫你完成咩工作？

有網站，同有一個幫你做生意嘅網站，係兩件事

可以用一條問題分辨：

你期待訪客點樣到達網站？	較合適嘅起點
「我會主動 Send 條 Link 畀人。」	Gemini + Google Sites 可能已經足夠
「就算我冇 Send，人哋都可以搵到我、理解我，再主動聯絡我。」	應該開始規劃正式 Business Website

當網站要承接 Organic Search、Google Ads、Meta Ads、Content Marketing 或長期 Lead Generation，問題就唔再只係「個 Website 靚唔靚」。

你需要處理：

• 網站架構點安排；
• 每個 Page 針對咩 Search Intent；
• Google 點理解每一頁內容；
• 訪客由 Landing Page 入嚟之後去邊；
• 邊個 CTA 最重要；
• Campaign Traffic 同 Conversion 點量度；
• 未來加入 Service Page、Case Study、Editorial 或中英文版本時，架構頂唔頂得住。

呢啲先係 Business Website 真正要處理嘅工作。

Google Sites 可唔可以做 SEO？

呢度最容易講得太極端。

Google Sites 唔係「完全做唔到 SEO」。公開網站可以出現喺搜尋引擎；Google Sites 甚至提供選項，讓網站擁有人要求 Public Search Engines 不要顯示網站。不過 Google 同時提醒，呢個只係 Request，唔保證搜尋引擎一定照做。

換句話講：

「Google 可以 Index」同「網站係為 SEO 而建立」，係兩件事。

Google Search Central 嘅 SEO Starter Guide 將 SEO 定義為幫搜尋引擎理解內容，同時幫使用者透過搜尋發現網站、判斷值唔值得進入。

Page Title、正文、Links、Images、網站結構、可抓取性同內容質素，都會影響搜尋引擎點理解一個網站；唔係填幾個 Keywords 就完成。

今次方法仲有一個重要限制：Gemini 生成嘅 HTML 係以 Embed 形式放入 Google Sites，而唔係成為頁面最上層嘅原生 HTML 結構。

Google Search 官方曾解釋，系統一般會嘗試將 iframe 內嘅內容同主要頁面關聯，但呢個關聯並不保證。

所以，如果 Organic Search 本身係主要生意來源，我哋唔會將「完整內容主要依賴 Embed」視為理想嘅長期 SEO 架構。

唔係因為佢一定唔會 Rank，而係你冇必要由一個控制權比較低、搜尋訊號比較難管理嘅架構開始。

Google Sites 可唔可以用嚟落廣告？

可以接收 Google Ads 或 Meta Ads Traffic；真正要問嘅唔係「開唔開到個 Page」，而係你需要量度同優化到咩程度。

Google Sites 可以連接 Google Analytics Property ID，收集基本網站數據。如果你只係想知道有幾多人入過網站、基本 Traffic 表現點，已經有實際用途。

但當網站成為一項長期 Marketing Asset，你可能會逐步需要：

• Landing Page Variants；
• Conversion Events；
• 不同 CTA 行為追蹤；
• 表單及 CRM 流程；
• Consent 管理；
• Automation 及第三方 Integration；
• 不同 Campaign 對應唔同 Page Experience。

到呢個階段，問題就變成：

「呢個架構會唔會限制我下一步想測試、量度同改善嘅嘢？」

AI 令「整到網站」變得容易，但冇令 Website Strategy 消失

Gemini 呢類工具最有價值嘅地方，就係大幅降低製作門檻。

以前要識 HTML、CSS 先做到嘅畫面，今日幾句清楚 Prompt 已經可能生成到。呢件事係好事，因為企業冇必要將大量 Budget 花喺 AI 已經可以加速嘅重複製作工作。

但 AI 解決咗「點樣寫 Code」，唔代表佢自動知道：

• 你最值得吸引邊一班人；
• 佢哋會 Search 咩；
• 首頁應該先講邊一句；
• 邊個 Service 值得獨立做 Landing Page；
• 邊啲內容應該留、邊啲應該刪；
• Conversion Flow 應該點行；
• 網站究竟要幫盤生意完成咩結果。

呢啲先係 Website Strategy。

幾時免費 Google Sites 已經夠？

如果以下大部分描述都適合你，先用免費工具係一個聰明選擇：

• 網址主要由你主動分享；
• 內容只有一至幾個簡單主題；
• 暫時唔依賴 Organic Search；
• 唔需要複雜 Tracking、CRM 或 Automation；
• 你願意自己更新 Code 同 Embed；
• 目前最重要係快速建立基本網上存在。

幾時值得正式建立 Business Website？

如果你開始需要以下能力，就值得由完整架構出發：

• 讓陌生人透過 Search 發現你；
• 每項服務有獨立 Landing Page；
• 承接 Google Ads 或 Meta Ads；
• 長期發布 Editorial、Case Study 或中英文內容；
• 清楚量度 Enquiry、Conversion 同 Campaign 表現；
• 連接 CRM、表單、Automation 或其他工具；
• 完整控制 Source Code、Domain、Tracking 同往後擴展。

喺 AI Concept Studio，我哋建立網站時唔會由「你想要幾多 Pages？」開始。

我哋會先整理企業目標、訪客問題、Content Structure、Search Intent 同最重要嘅下一步，再落到 Design、Development、SEO 基礎同 Tracking。

因為網站真正嘅工作，唔係證明你「有個 Website」。

而係令人：

搵到你、明白你，同埋知道下一步點做。

如果你只係想要一張 Online Name Card，照住上面教學做已經可以。

如果你準備將網站用嚟做 SEO、廣告、品牌展示或 Lead Generation，可以睇下 ACS 網站策略、設計及開發服務。

目前網站服務由 HK$3,700 起；3 Pages 包括 品牌/產品頁、About Us、私隱政策與條款 (Privacy Policy & Terms)，以及網站策略、Responsive Design and Development、Source Code 交付、首年 Custom Domain、SEO／GEO 基礎、Search Console／GA4 連接同三輪修改。實際 Scope 會按網站要完成嘅工作確認。

唔肯定自己需唔需要正式整網站都冇問題。

先講低你想個網站幫你做到咩。我哋會先判斷免費工具係咪已經足夠，再決定值唔值得由一個更完整嘅架構開始。

常見問題 FAQ

Gemini 真係可以免費幫我整網站？

Gemini Canvas 可以協助建立同修改 Apps 及 Code。實際功能、用量限制及免費可用程度，會因帳戶、地區、年齡及方案而異；開始前以你帳戶當刻顯示為準。

Google Sites 免費嗎？

如果你嘅 Google Account 可以使用 Google Sites，就可以用 Google Sites 提供嘅網址建立及 Publish 網站，唔需要另外購買 Hosting 或 Domain。使用自訂 Domain，則需要自行擁有 Domain 並完成設定。

Google Sites 可以加入自己寫嘅 HTML 嗎？

可以。Google 官方支援透過 Insert → Embed → Embed Code 加入 HTML、CSS 同 JavaScript，亦可以使用 Full Page Embed。

Google Sites 會唔會自動幫我改 Gemini 生成嘅內容？

唔會。Google Sites 主要負責顯示你貼入嘅 Embed Code。要修改內容或版面，通常要先改 Code，再更新 Embed。

Google Sites 適唔適合公司網站？

要睇用途。如果只係簡單公司介紹、Portfolio 或一條主要靠你主動分享嘅網址，可以係一個低成本選擇。如果網站需要長期 SEO、Content Marketing、廣告 Tracking、複雜 Conversion Flow 或高度客製化功能，就應該先規劃長期架構同控制權。

用 AI 整網站係咪唔再需要 Web Designer 或 Developer？

簡單頁面未必需要。AI 已經可以處理大量 Layout、Code 同初步製作工作；但 Business Website 仲涉及資訊架構、Brand Experience、Search Intent、Content、Tracking、Conversion、Accessibility 同長期維護。

真正要決定嘅唔係「AI 可唔可以寫到 Code」，而係網站最終需要完成咩商業工作。

來源與延伸閱讀

1. Google Gemini Help — Create docs, apps & more with Canvas
2. Google Sites Help — Add HTML, CSS or JavaScript code
3. Google Sites Help — Publish and share your site
4. Google Sites Help — Use a custom domain for your site
5. Google Sites Help — Use Analytics with your site
6. Google Search Central — SEO Starter Guide
7. Google Search Central — iframe content and indexing