在 2026 年的今天，無論你是想要架設個人作品集、撰寫技術部落格，還是製作一個實用的報名表單小工具，你可能都會遇到一個共通的痛點：不想每個月花錢租用昂貴的虛擬主機，但又需要一個穩定、速度快的網頁空間。市面上有許多號稱免費的架站平台，但往往伴隨著惱人的蓋版廣告、極慢的載入速度，或是隨時可能倒閉的風險。如果你正在尋找「零成本架站」的最佳解決方案，那麼身為科技巨頭的 Google 其實已經為你準備好了兩大神器：Google Apps Script (GAS) 與 Firebase Hosting。這篇文章將為前端新手、部落客與個人開發者，提供一份超詳細的圖文級別架站教學，帶你深入了解這兩個免費主機的差異、優缺點，以及手把手的部署步驟。看完這篇，你也能不花一毛錢，輕鬆把寫好的 HTML 網頁上架到全世界都能看見的網際網路上！
1. Google Apps Script (GAS)：把試算表當免費後端的神器
許多人對 Google Apps Script（簡稱 GAS）的印象停留在「用來寫巨集、自動化 Google 雲端硬碟功能」的工具。但實際上，GAS 有一個非常強大的隱藏版功能：它可以發布為「網頁應用程式 (Web App)」。這意味著，你可以利用它來代管你的 HTML 網頁！
為什麼選擇 GAS？（優缺點全解析）
- 優點 1：無縫連動 Google 試算表。這是 GAS 最無法被取代的殺手級應用。你可以寫一個 HTML 表單網頁，當使用者按下送出後，資料會直接寫入你的 Google 試算表中。完全不需要自己架設 MySQL 資料庫或寫後端 API，試算表就是你免費的後台！
- 優點 2：絕對免費且免維護。只要你的 Google 帳號還在，這個網頁就會一直存在，沒有流量超標要付費的問題（僅有 Google API 單日執行次數的寬鬆上限）。
- 缺點 1：網址冗長且無法綁定自訂網域。發布後的網址會是一長串包含亂碼的 Google 網域（如
script.google.com/macros/s/...），無法改成你的名字.com。 - 缺點 2：非傳統靜態空間。你不能直接上傳寫好的
.html檔案，必須把程式碼貼進 GAS 的編輯器中來渲染。
💡 適用情境： GAS 最適合用來製作「功能性小工具」，例如：活動報名系統、記帳表單、內部資料查詢網頁，或者是將做好的小工具用 <iframe> 語法嵌入到你現有的部落格文章中。
【超詳細教學】5 分鐘用 GAS 發布你的第一個 HTML 網頁
現在，讓我們一步步來實作如何將 HTML 網頁透過 GAS 發布出去：
步驟一：開啟 Apps Script 編輯器
- 打開你的 Google 雲端硬碟，新增一個「Google 試算表」。
- 在試算表上方的選單列中，點選「擴充功能」 > 「Apps Script」。
- 系統會開一個新分頁，這就是你的程式碼編輯器。
步驟二：建立與編寫程式碼
在左側檔案庫中，你會看到預設有一個 程式碼.gs (或 Code.gs)。這個檔案負責處理後端邏輯。請將裡面的內容清空，貼上以下程式碼：
// 這行程式碼告訴 Google：抓取名為 'Index' 的 HTML 檔案並顯示
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('我的第一個 GAS 網頁')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
接著，點選編輯器左上角檔案旁邊的「+」號，選擇「HTML」，並將檔案命名為 Index（注意大小寫需與上方 gs 檔案中一致）。然後在這個 HTML 檔案中寫入你想要的網頁內容：
<html>
<head>
<base target="_top">
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
h1 { color: #0abab5; }
</style>
</head>
<body>
<h1>哈囉，2026！</h1>
<p>這是我用 Google Apps Script 免費架設的網頁！</p>
</body>
</html>
步驟三：發布為網頁應用程式
- 點擊編輯器右上角的藍色按鈕「部署」 > 「新增部署作業」。
- 點選左側齒輪圖示，選擇「網頁應用程式」。
- 在「說明」欄位隨便填寫版本紀錄（如 v1）。
- 【關鍵步驟】在「執行身分」選擇「我」，在「誰可以存取」選擇「所有人」。
- 按下右下角的「部署」。首次部署時系統會要求你授權，請點擊「授權存取」-> 選擇帳號 -> 點選「進階」->「前往（不安全）」->「允許」。
- 完成後，系統會給你一串「網頁應用程式網址」。複製它貼到瀏覽器，你的免費網頁就上線啦！
2. Firebase Hosting：專業級的靜態網站免費代管
如果你覺得 GAS 的網址太醜，或者你手上已經有一整包完整的 HTML、CSS、JavaScript 檔案（包含圖片資料夾），想要架設一個具有專業形象的網站，那麼 Firebase Hosting 絕對是 2026 年最強的免費靜態網頁空間。
為什麼選擇 Firebase？（優缺點全解析）
- 優點 1：企業級載入速度。Firebase 採用全球 CDN（內容傳遞網路），無論訪客在台灣還是美國，網頁都能秒速開啟。
- 優點 2：免費 SSL 與自訂網域。它免費為你提供 HTTPS 安全憑證，並且允許你綁定自己購買的專屬網址（例如
www.mywebsite.com），這對建立專業品牌極為重要。 - 優點 3：超大免費額度。其 Spark（免費）方案提供每月高達 10GB 的傳輸流量與 10GB 的儲存空間，對個人網站或中小型企業官網來說綽綽有餘。
- 缺點 1：需要使用終端機 (CLI)。它不像早期的 FTP 軟體可以直接把檔案拖曳進去。初學者必須要在電腦的「命令提示字元 (Windows)」或「終端機 (Mac)」輸入指令來上傳網站，這會有一點學習門檻。
💡 適用情境：適合用來架設完整的靜態網站，例如：個人形象官網、企業簡介網頁、用 React/Vue 開發的前端應用程式、以及各種不需要後端 PHP 的技術部落格與作品集。
【超詳細教學】新手必看的 Firebase Hosting 部署指南
別被「終端機指令」嚇到了，只要跟著以下步驟做，其實只需要輸入四五行字就能搞定！
步驟一：在 Firebase 控制台建立專案
- 前往 Firebase Console，登入你的 Google 帳號。
- 點擊「新增專案」，為專案取個名字（例如 MyFreeWebsite），並按照畫面指示完成建立。
步驟二：在電腦安裝必備環境
要使用 Firebase 指令，你的電腦必須先有 Node.js 環境。
- 前往 Node.js 官網下載並安裝 LTS 穩定版本。
- 打開電腦的終端機（Mac 搜尋 Terminal，Windows 搜尋 cmd 或 PowerShell）。
- 輸入指令：
npm install -g firebase-tools並按下 Enter，等待開發工具安裝完成。
步驟三：初始化專案與登入
在你電腦的桌面上新增一個空白資料夾（例如命名為 MyWeb），將你寫好的網頁檔案先放在旁邊備用。接著回到終端機：
- 輸入
firebase login，瀏覽器會彈出視窗請你登入授權。 - 在終端機中使用
cd指令進入你剛剛建立的資料夾。例如：cd Desktop/MyWeb。 - 輸入
firebase init hosting。此
