【Day 2】網頁，網頁⋯⋯又是網頁！

關於對於一個學生來說，怎麼樣的 Vibe Coding 成品是他們最想要的呢？
當然這件事情我想先從我自身談起自己的經歷～

▲ 圖 1：作者個人的 Google Sites 作品集展示頁面

學生時代的創作渴望：為什麼大家總想做網頁？

大概在高中的時候，自己挺喜歡接觸各種數位工具，例如：Adobe 系列、威力導演、RPG Maker 等等。這些多半偏向多媒體與新媒體創作的範疇，但還有一個非常重要的部分是——網頁設計，一直是我很想達成的目標！

無論是作為介紹自己的個人首頁，還是用來存放累積的作品集；長大後也發現，學生族群確實普遍存在這項硬需求：

• 求職需求：需要打造應對職場的個人履歷（CV）或專屬的履歷網站。
• 升學需求：需要製作升學審查的個人作品集介紹。

在這些情境下，都有不少人會想要嘗試以「網頁」的形式來呈現。

▲ 圖 2：常見的線上無代碼網頁設計工具（Wix、WordPress、Weebly、Shopify）

前 AI 時代的「免寫程式」建站回顧

起初在完全不懂得編寫程式碼的時期，大約在 2015 年到 2020 年前後，市場上出現了許多非常便利的線上網頁設計工具，例如：Wix、WordPress、Weebly、Shopify 等。

只要你會操作滑鼠拖拉元件、上傳影片與照片素材、並在欄位中打字，相信任何人都能透過拉素材的方式打造出個人網站。

當時我也因此幫了一家香港的小型工程公司設計他們的官方網站；到了後來的大學作業，也曾為同組製作的影片架設專屬網站。在那個階段，所有事情都完全不需要用到 coding。

▲ 圖 3：使用 Gemini 搭配 Canva 進行 Vibe Coding 所產出的科技感 HTML 互動頁面

▲ 圖 4：Google Sites 內建的「嵌入 HTML 程式碼」功能操作介面

伏筆埋下：Google Sites 的嵌入程式碼功能

到了生成式 AI 出現的前夕，Google Sites 也是一個相當適合用來設計個人作品集網站的平台與工具。

其中最關鍵的是，Google Sites 內建的**「嵌入式程式代碼」**功能，正好為日後導入 Vibe Coding 留下了最基礎、也最巧妙的伏筆。

生成式 AI 爆發！新手最友善的 Vibe Coding 基礎款

終於！生成式 AI 爆發性地出現了，Vibe Coding 的潮流也逐步成形！

現在大家常常會透過 POE、ChatGPT、Gemini 的對話框，直接讓 AI 生成網頁程式碼，產出的格式通常是單一的 HTML 檔案。但這時候我們往往會面臨一個極為關鍵的問題：

「我該如何把做好的網站分享給別人看，而不是只能孤零零躺在我自己的電腦裡？」

這時候第一時間想到的解法，正是回想起 Google Sites 嵌入程式碼的設計：

1. 在 Google Sites 中新增一個頁面。
2. 直接將 AI 生成的整頁 HTML 程式碼完整嵌入進去。
3. 發布後，AI 生成的網頁便立刻有了一個可以被存放、且擁有專屬網址能夠分享給同儕的家！

這可說是最簡單直接的 Vibe Coding 個人網站基礎款——甚至完全不需要事先學習 GitHub 或其他複雜的部署工具，相對單純直覺，卻能精準滿足學生在履歷與作品集網頁設計上的實際痛點。

▲ 圖 5：初階（單頁嵌入）與進階（現代化自動部署）Vibe Coding 網頁設計方法與邏輯示意

進階挑戰：當單頁嵌入遇到瓶頸，走向現代化自動部署

當然，上述的基礎做法也存在一個極為麻煩的瓶頸：過度冗長且功能複雜的程式碼，容易讓運行的設備（特別是手機）出現卡頓或當機。

在這種情況下，更進階的部署學習需求便應運而生：

• 版本控制與線上儲存：學習使用 GitHub 進行專案的雲端存放與版本更新。
• 自動化部署平台：接觸如 GitHub Pages（github.io）、Vercel、Cloudflare Pages 等現代化網頁代管與自動發布工具。

往往到了這個階段，相關講師或指導老師就會建議學生：直接請教 AI 該如何在這些現代化工具上部署自己的網頁！
一步一步跟著 AI 的指令操作，遇到不確定就再追問一次，幾乎所有人都能順利掌握這些工具的用法。

▲ 圖 6：早期使用 Wix 拖拉拼組的舊版公司官方網站

▲ 圖 7：透過 Vibe Coding + Next.js 並部署於 Cloudflare 的現代化新版公司網頁

也是因為這個轉折，我自己很多年前用 Wix 拼拉出來的公司網站終於正式下架了。透過 Vibe Coding 與 AI 的輔助，我不僅理解了 Next.js 的專案架構，也學會了如何在 Vercel 上建置並部署一個全新、現代且美觀的網站。

結語：回歸學生需求的最適解

回過頭來看，如今要協助企業設計網站已不再是遙不可及的複雜技術；但若回歸到學生層面，如果目標不是大型企業專案，大家核心想完成的，依然是那份亮眼的個人履歷與作品集網頁。

那麼：

• 初階首選：單靠 Google Sites 搭配 Vibe Coding 的成果，就已經能非常漂亮地呼應學生的核心需求。
• 進階延伸：透過與 AI 的即時互動對答，逐步了解現代化網頁部署流程，更能快速上手進階工具，徹底解決程式碼複雜化或素材上傳的各類難題。

雖然背後的邏輯就這麼簡單純粹，但真心希望這樣一套循序漸進的實踐思路，能夠切實地協助到每位想跨入網頁世界的學生們！