非工程師也能做！用 AI 生成網站到免費安全上線的完整實戰教學

非工程師透過 AI 生成網站並免費安全發布至全球雲端流程示意圖

用 ChatGPT、Claude 或 Cursor 寫出網頁後，很多人會卡在「只有自己電腦看得見，不知道怎麼發布給別人用」。

其實現在完全不需要租主機、不用學 Linux 指令、也不用花任何一毛錢。這篇直接整理最精簡、免費且安全的上線路徑，只要照著做，幾分鐘內就能拿到一組全世界都能瀏覽的專屬網址。

步驟一：讓 AI 產出可直接上線的檔案結構

請 AI 寫程式時，最忌諱輸出零散、無法直接執行的片段。請直接在提示詞中加入這段要求：

1
2
3
請幫我製作 [功能描述] 網頁。
請將所有 HTML、CSS 樣式與 JavaScript 互動邏輯整合在單一一個 index.html 檔案中，
不需要依賴複雜的後端伺服器，確保本機直接點開就能正常運作。

拿到程式碼後的處理方式：

  1. 在電腦上建立一個新資料夾（例如 my-web）。
  2. 在裡面新增檔案並命名為 index.html，把程式碼貼上存檔。
  3. 點兩下 index.html，確認在瀏覽器中顯示與互動正常。

步驟二：最快上線法 — Cloudflare Pages 拖拉上傳（30 秒完成）

如果你的網站不需要後端資料庫，這是最快、終身免費且具備全球 CDN 加速的上線方式。

  1. 到 Cloudflare 官網註冊並登入免費帳號。
  2. 進入控制台，在左側選單點選 Compute (Workers & Pages) ➔ 點擊 Create application ➔ 選擇 Pages。
  3. 點擊 Upload assets。
  4. 輸入專案名稱（這會是你的子網域名稱，例如 my-tool）。
  5. 直接把剛才裝有 index.html 的 my-web 資料夾拖進上傳區塊。
  6. 點擊 Deploy site。

部署完成後，你會立即獲得一組 https://my-tool.pages.dev 網址，已自動配置好 HTTPS 安全憑證。

步驟三：進階自動化 — 改 Code 自動同步更新（GitHub + Vercel）

如果你的網站會頻繁修改，每次手動拖拉會很浪費時間。搭配 GitHub Desktop 與 Vercel，可以做到每次改完存檔就自動發布新版。

  1. 安裝工具：下載並安裝免指令的圖形化工具 GitHub Desktop，登入 GitHub 帳號。
  2. 發布專案：在 GitHub Desktop 點選 File ➔ Add Local Repository 選取你的專案資料夾，點擊 Publish repository 推送到 GitHub。
  3. 綁定 Vercel：
    • 前往 Vercel 官網，使用 GitHub 帳號登入。
    • 點擊 Add New ➔ Project，找到你的專案點擊 Import。
    • 保持預設設定，直接點擊 Deploy。
  4. 自動更新工作流：之後只要請 AI 修改完程式碼存檔，在 GitHub Desktop 按下 Commit 與 Push，Vercel 就會在 1 分鐘內自動編譯並更新線上網站。

步驟四：安全防護 — 避免 API Key 外洩與帳單爆表

如果你的網站需要呼叫 OpenAI、Anthropic 或 Gemini 的 API，這一步非常關鍵。

1. 嚴禁把 API Key 寫死在 index.html

前端所有的 HTML 與 JavaScript 都是公開的，任何人按右鍵「檢視網頁原始碼」就能偷走你的金鑰並盜刷額度。

2. 請 AI 寫 Serverless 轉發

向 AI 發出這段提示詞：

1
2
請幫我把呼叫 API 的邏輯改寫成 Vercel Serverless Function（檔案路徑為 api/chat.js）。
前端改為向 /api/chat 發送請求，並在伺服器端讀取 process.env.API_KEY，不要在前端暴露金鑰。

3. 在 Vercel 後台設定環境變數

  1. 進入 Vercel 專案後台，點選 Settings ➔ Environment Variables。
  2. Key 輸入變數名稱（例如 OPENAI_API_KEY），Value 填入你的真實 API Key。
  3. 點擊 Save。金鑰只會保存在雲端伺服器環境中，外部訪客完全看不到。

4. 設定用量硬上限（Hard Limit）

至 OpenAI 或各平台後台的 Billing ➔ Usage limits，將每月扣款上限鎖定在安全範圍（例如 5 到 10 美元），杜絕無窮迴圈或惡意流量造成的意外帳單。

步驟五：綁定自訂網址（選配）

想要使用自己的專屬網址（例如 www.mybrand.com）：

  1. 在 Namecheap 或 Cloudflare Registrar 購買網域（一年約 10 美元）。
  2. 在 Vercel 或 Cloudflare Pages 的 Domains 設定頁面輸入你的網域。
  3. 按照畫面提示，到 DNS 後台新增一筆 CNAME 紀錄指向平台提供的位址即可。

重點回顧

  • 純單頁工具：直接丟 Cloudflare Pages，拖拉 30 秒上線。
  • 持續更新專案：用 GitHub Desktop + Vercel，按一下 Push 自動同步。
  • 有串接 AI API：金鑰一律放 Environment Variables，絕不寫在前端，並鎖定每月用量預算上限。