# AI 架設網站教學：免寫程式，60分鐘打造個人網站

> 發布：2025-07-14｜更新：2025-09-21
> 網址：https://lifecheatslab.com/ai-website-setup-tutorial/
> 摘要：想知道如何用 AI 架設網站嗎？本篇提供超詳細的 AI 架設網站教學，即使你完全不會寫程式，也能跟著步驟，用 Manus AI 和 Cloudflare 做出專業個人品牌網站。立即點擊，60分鐘內打造你的第一個網站！

## 前置準備：網站不是光想就有，先定義你的需求

![一位創作者與AI機器人合作，運用AI架設網站教學，輕鬆打造出專業的個人品牌網站，背景是象徵程式碼與設計元素的數位光束。](/images/posts/ai-website-setup-tutorial/image-01.webp)

最近我本來想自己動手做個網站，結果瞎忙好幾天，發現還不如用 Manus AI 來得快又漂亮。所以我決定直接分享這套完整的 **AI 架設網站教學**，教你怎麼用 AI 做出一個真正「屬於你」的網站，並且發佈到網路上，讓全世界的人都能看到。

不管你想做的是個人網站、商品形象頁、廣告宣傳頁還是作品集，這套方法都很適合。不過要先提醒，這個方法不適合做購物商城或需要複雜後台功能的網站，但設計跟製作的流程還是很有參考價值。

### 先問自己這幾個問題，才能打造「你的」專屬網站

用過 AI 做網站的朋友，可能都遇過一個問題：「網站很漂亮，但好像跟我沒什麼關係？」沒錯，如果只跟 AI 說「幫我做個 XXX 網站」，那做出來的東西就像套模板，好看，但沒有靈魂。

所以動手前，我會先靜下來想清楚，這個網站到底要幹嘛。你可以參考下面幾個問題，如果沒頭緒，也能直接把問題丟給 AI，請它跟你一起腦力激盪：

-   這個網站是做來幹嘛的？
-   網站要給誰看？
-   希望來看的人，看完後會做什麼事？（例如：追蹤我、聯絡我）
-   希望網站能帶來什麼效果？
-   有沒有什麼內容或元素，是我「一定」要放進去的？
-   我偏好什麼顏色、風格或氛圍？
-   網站的主題是什麼？需要放哪些內容？

這些問題的答案，會決定你的網站是不是真的「你的」。

### 用AI做市場調查，產出給AI看的專業網站設計需求書

把上面的問題想清楚後，我會把這些想法全部丟給 Gemini 或 GPT，請它幫我做「深度研究」。我會請它同時研究：

-   我這個領域的網站，現在流行什麼設計？
-   競爭對手的網站有哪些特色？
-   我的目標訪客喜歡什麼？

為了讓 AI 更懂我，我甚至會把我寫過的文章、可以公開的資料都餵給它。最後，我會要求 AI 產出一份「網站設計需求書」，裡面要包含所有頁面內容、品牌配色（連色碼都要有），而且內容不能用範例文字填充。這份需求書，就是等一下要給 Manus AI 看的指令。

## Manus AI 教學：把設計需求變成真實網站

![一名使用者腦中流出創意的數位光點，AI將其彙整成一份專業的網站設計需求書，象徵為AI架設網站進行前置準備與腦力激盪的過程。](/images/posts/ai-website-setup-tutorial/image-02.webp)

有了完整的設計需求書，接下來的 **Manus AI 教學** 就很簡單了。把剛剛 AI 產出的提示詞，直接貼給 Manus，然後告訴它「不計代價，幫我做出這個網站」。

### 輸入包含頁面內容與配色的提示詞，讓 AI 產出網站程式碼

我實際測試下來，做一個網站大概會花掉 Manus 300 到 700 點數。它每天會送 300 點，所以就算點數不夠，大概花個兩三天也能免費做完。

Manus 做好後，會給你一個預覽連結。你可以看看哪裡不滿意，直接請它修改，或自己下載程式碼來調整，改到你滿意為止。

### 【重要】跟 AI 要到關鍵檔案，才能自己部署網站

這一步非常關鍵！因為我們的目標是自己部署網站，所以一定要跟 Manus 說：「把所有程式碼都給我，我最後要自己部署到 Cloudflare 上。」

如果你沒說，它可能會漏掉一些關鍵檔案，到時候你會發現網站根本跑不起來。雖然事後可以再跟它要，但那樣又要多花點數，很麻煩。

最保險的做法是，請它在給程式碼的時候，順便寫一份教學文件，教你怎麼把網站上傳到 Github，然後再部署到 Cloudflare。這樣下一步會省很多事。

## 不會寫程式做網站？讓 AI 幫你搞定上傳

![展示Manus AI 教學與Cloudflare Pages 教學的核心概念，AI將設計藍圖轉化為程式碼，並透過象徵Github的節點，經由雲端部署到全世界。](/images/posts/ai-website-setup-tutorial/image-03.webp)

拿到網站所有檔案後，解壓縮放在同一個資料夾裡。就算你**不會寫程式做網站**，也別擔心，AI 會罩你。

### 把程式碼上傳到 Github，方便未來自動更新網站

我會建議把程式碼上傳到 Github。因為 Cloudflare 可以直接抓 Github 的專案來建立網站，未來只要你更新了 Github 上的檔案，網站就會自動更新，非常方便。如果你不打算更新網站，也可以跳過這一步，直接上傳檔案就好。

### 不熟Git指令？直接讓 Gemini CLI 幫你全自動搞定

老實說，我到現在還是不太熟怎麼手動把專案上傳到 Github。所以我的懶人作法是，直接用 Gemini CLI 這個工具，指定好放網站程式碼的資料夾，然後叫 AI 幫我搞定上傳的所有指令。

我同時也會讓 AI 教我怎麼部署到 Cloudflare，像是要選哪個框架、組建指令要填什麼。因為 Gemini CLI 能一次讀取很多檔案，而且免費，處理這種多檔案的操作，我覺得比網頁版方便多了。

## Cloudflare Pages 教學：一鍵發佈你的網站

（如果你還不熟悉這個服務，可以先參考這篇關於 [Cloudflare Pages免費靜態網站空間](/ai-webpage-deployment-free-hosting) 的詳細介紹。）

終於來到最後一步，讓網站正式上線！接下來是 **Cloudflare Pages 教學** 時間。這時候，你的網站程式碼應該已經在 Github 上了，或者你至少準備好了從 Manus 下載的壓縮檔。

首先到 Cloudflare 官網註冊帳號，登入後台，在左邊找到「Workers & Pages」，點進去，然後選擇「建立應用程式」，再切換到「Pages」分頁。

### 從 Github 匯入專案，填寫幾個欄位就完成發佈

如果你有上傳到 Github，就選「連線至 Git」。接著授權 Cloudflare 存取你的 Github，選擇剛剛的專案，然後填寫「組建命令」和「組建輸出目錄」（這些資訊可以問 AI）。設定好後，按下儲存並部署，等幾分鐘，你的網站就上線了！

### 或者直接上傳網站壓縮檔，用最簡單的方式讓網站上線

如果你不想用 Github，就選擇「直接上傳」。把從 Manus 下載的程式碼壓縮檔整個上傳，或是把解壓縮後的資料夾拖曳進去。設定好你的專案名稱（這會影響你的網址），然後等待部署完成。這方法最簡單，但未來要更新網站會比較麻煩。

至此，恭喜你！你成功做出了第一個屬於自己的網站。

本文原稿為我Darks撰寫FB版本原始貼文，並通過AI全自動工作流進行SEO優化、排版成適合網站閱讀的版型以及後期潤飾。如果你喜歡這類文章，[歡迎追蹤我的FB帳號，觀看我純手寫的文章](/Facebook)。

若你對AI AGENT有興趣，可以看看[這篇學習筆記，跟著一起做](/n8n-aiagent/)。

## Q&A AI 架設網站常見問題

### 這方法適合做購物網站或需要複雜後台的網站嗎？

不適合。這套流程主要用於建立靜態網站，像是個人品牌網站、作品集或形象頁。需要購物車、會員登入等複雜後端功能的網站，就沒辦法用這個方法搞定。

### Manus AI 要花錢嗎？點數不夠用的時候該怎麼辦？

Manus AI 有提供免費點數，每天會自動補充 300 點。根據我的經驗，製作一個網站大概花費 300 到 700 點。所以就算點數不夠，也可以分兩三天完成，不用花錢。當然，如果你想加速，也可以選擇付費購買點數。

### 我一定要用 Github 嗎？可以直接上傳檔案到 Cloudflare 嗎？

不一定。你可以直接上傳網站檔案的壓縮包到 Cloudflare，這是最快的方式。但我會推薦使用 Github，因為未來只要你修改了程式碼並推送到 Github，Cloudflare 就會自動幫你更新網站，對於長期維護來說非常方便。

## 馬上註冊帳號，打造你的第一個個人品牌網站

看完這篇教學，是不是覺得 **個人品牌網站架設** 沒有想像中那麼難？今天就動手註冊好需要的帳號，開始準備你的網站資料吧！很快你就能擁有自己的第一個網站了。做完後，歡迎回來跟我分享你的成果！