【線上微課程】零基礎免費架站實戰：從 GitHub 到 Vercel，1.5 小時做出你的第一個網站

這堂 1.5 小時線上微課程，PM里長伯將帶你從零開始，用免費工具完成第一次架站實戰。課程會從創立 GitHub、建立專案，到部署到 Vercel，前端與後端概念都會快速走過。全程現場實際打 Prompt、無錄影、不提供回放，但會提供練習網站。加入里長伯里民服務中心，還可享一週內售後服務。

課程大綱

1. 零基礎架站到底在學什麼？

先用白話方式說明網站的基本結構，讓你知道前端、後端、GitHub、Vercel 分別是什麼。 你不需要先懂程式，但你需要知道整個流程長什麼樣子。

2. 建立 GitHub：你的網站專案倉庫

帶你理解 GitHub 的基本用途，並示範如何建立帳號與專案。 這一段會讓你知道：

• GitHub 是什麼
• Repository 是什麼
• 為什麼網站檔案要放在 GitHub
• AI 產出的程式碼可以怎麼整理進專案

3. 用 Prompt 產生你的第一個網站

PM Mayors 會現場實際打 Prompt，示範如何請 AI 協助產生一個簡單網站。 這一段會示範：

• 如何描述你想做的網站
• 如何請 AI 產生首頁內容
• 如何調整網站版面
• 如何修改文字、區塊與按鈕
• 如何讓 AI 幫你改善網站結構

這堂課不靠預錄影片，會直接現場示範 Prompt 怎麼打，讓你看到真正操作時會發生什麼事。

4. 前端快速走一次：看得見的網站畫面

前端就是使用者打開網站後看到的畫面。 這一段會帶你快速理解：

• 首頁是怎麼組成的
• 標題、圖片、按鈕、區塊大概怎麼安排
• HTML / CSS / JavaScript 大概在做什麼
• 如何用 AI 幫你修改前端畫面

不會要求你背語法，而是讓你看懂網站畫面背後的基本邏輯。

5. 後端快速走一次：網站背後的資料與功能概念

後端是網站背後處理資料、邏輯與服務的地方。 這一段會用零基礎可以理解的方式說明：

• 後端是什麼
• 表單、資料、登入、API 大概是怎麼回事
• 什麼情況下網站需要後端
• 零基礎入門時，為什麼先理解概念比硬背程式更重要

本堂課會讓你前端、後端都過一次，建立完整網站概念。

6. 部署到 Vercel：讓你的網站真的上線

接著會示範如何把 GitHub 專案連接到 Vercel，完成網站部署。 你會看到：

• Vercel 是什麼
• 如何連接 GitHub 專案
• 如何部署網站
• 如何取得網站連結
• 如何確認網站是否成功上線

完成後，你會知道一個網站從本機或專案資料，變成線上網站的基本流程。

7. 練習網站與後續修改方向

課程不提供回放，但會提供大家練習網站，讓你課後可以持續操作與修改。 你可以用練習網站做：

• 個人簡介頁
• 活動報名頁
• 品牌介紹頁
• 作品集頁面
• 課程介紹頁
• 產品展示頁
• 顧問服務頁

學會流程之後，你就可以把同一套方法套用在自己的網站需求上。

8. Q&A：現場問題現場處理

最後會開放 Q&A，針對大家在 GitHub、Vercel、Prompt、前端、後端、部署過程遇到的問題，給出實用建議。