AI 架設網站教學:免寫程式,60分鐘打造個人網站

前置準備:網站不是光想就有,先定義你的需求

一位創作者與AI機器人合作,運用AI架設網站教學,輕鬆打造出專業的個人品牌網站,背景是象徵程式碼與設計元素的數位光束。

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

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

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

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

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

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

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

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

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

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

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

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

一名使用者腦中流出創意的數位光點,AI將其彙整成一份專業的網站設計需求書,象徵為AI架設網站進行前置準備與腦力激盪的過程。

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

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

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

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

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

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

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

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

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

展示Manus AI 教學與Cloudflare Pages 教學的核心概念,AI將設計藍圖轉化為程式碼,並透過象徵Github的節點,經由雲端部署到全世界。

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

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

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

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

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

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

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

(如果你還不熟悉這個服務,可以先參考這篇關於 Cloudflare Pages免費靜態網站空間 的詳細介紹。)

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

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

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

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

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

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

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

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

若你對AI AGENT有興趣,可以看看這篇學習筆記,跟著一起做

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

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

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

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

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

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

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

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

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