[直播課程] Cloudflare系列課程：用 AI 把想法變成網站

課程簡介

大多數人對「網站開發」的印象，
還停留在：
先學 HTML、再學 CSS、再學 JavaScript、然後研究框架、最後卡在部署。
很多人不是沒有想法，而是終止在「還沒開始做出第一個能上線的東西」。
但 AI 改變了這件事，現在你可以把「寫程式」這件事交給 AI。

你可以專注在：
• 你想做什麼
• 怎麼描述需求
• 怎麼把東西部署出去
• 怎麼讓它真的被全世界看到

這堂課不只是教你「生成程式碼」。
而是教你：
怎麼把 AI 生成的東西，
變成真正運作的產品。

這堂課為什麼適合你

1. 60 分鐘內有成果 — 課程結束時你就有一個活的網站跑在網路上，任何人都能打開。不是「學完某天可能用到」的那種成果。

2. 跟專業工程師同一套工作流 — Claude 生成程式碼、你做部署決策。這跟 Lovable / v0 那種拖拉工具本質上不一樣 — 你學到的流程換個 AI 工具也能用。

3. 零成本部署 — Cloudflare Pages 免費方案就夠用。不刷信用卡、不管伺服器、流量爆掉也不會被收錢。

4. 搞懂「全端」到底是什麼 — 前端、後端、CDN、serverless、DNS — 做完一次你就知道這些東西怎麼接在一起，因為你親手接過一遍了。

課程亮點

• 用 Claude 從一段話生出 React + Vite 專案 — 元件、路由、樣式全部到位

• 本地到上線 5 分鐘。不碰 Docker、不設定伺服器

• 加一支 Cloudflare Functions API，你的網站從靜態頁面變成能收資料、回結果的全端應用

• 綁你自己的 domain + 自動 HTTPS。yourname.com 不是 xxx.pages.dev

• 最後 5 分鐘對照業界術語 — 你剛做的事情在正式場合叫什麼名字

誰最適合來

適合你，如果你是：

• 有想法但不會寫程式，想快速把東西做出來的人

• 用過 ChatGPT / Claude 但從來沒把 AI 生成的程式碼「變成真的網站」

• 想了解現代 web 開發全貌但不想花三個月上課

• Side project 想做但每次卡在部署這一步

不適合你，如果你：

• 已經會用 Vite + React 開發並熟悉 CI/CD 部署流程（這堂課對你太基礎）

• 期待不碰 terminal 不碰程式碼（你會需要複製貼上指令，雖然不用自己寫）

• 在找系統性的前端開發課程（這堂課的目標是跑通全流程，不是深入任何單一技術）

課程大綱

第一章：用 Claude 從一句話生出完整專案

內容摘要：
示範如何對 Claude 下 prompt，讓它生成一個可部署的 React + Vite 專案。重點是怎麼描述需求 — 「幫我寫一個網頁」跟「生成一個有路由、元件拆分、樣式設定的專案」拿到的東西差很多。你會看到 AI 生成的程式碼長什麼樣，以及怎麼快速判斷能不能用。

實作： 用一段自然語言描述你的網站想法，讓 Claude 生成完整專案，在本地跑起來確認畫面。

第二章：5 分鐘部署到 Cloudflare Pages

內容摘要：
從本地開發環境到網站上線，完整走一遍 Cloudflare Pages 的部署流程。涵蓋帳號建立、專案連結、build 設定、第一次部署。你會看到你的網站拿到一個 .pages.dev 的網址，全世界都能打開。同時解釋背後發生了什麼 — CDN 是什麼、為什麼你的網站在東京和紐約都很快。

實作： 將剛才生成的專案部署到 Cloudflare Pages，確認網站上線可存取。

第三章：加一個 Serverless API 讓網站會動

內容摘要：
靜態網站只能「展示」，加上 API 才能「互動」。這章用 Cloudflare Functions 建立一支簡單的 serverless API — 例如一個表單提交端點或資料查詢接口。你會理解前端怎麼呼叫後端、request / response 是什麼、以及為什麼這叫 serverless（你沒有管任何伺服器但 API 就是會動）。

實作： 建立一支 Cloudflare Function，讓前端可以送資料到後端並取得回應。部署後驗證 API 可被外部呼叫。

第四章：綁自訂網域 + 自動 HTTPS

內容摘要：
把 .pages.dev 的練習網址換成你自己的網域。這章教你怎麼設定 DNS、把網域指向 Cloudflare Pages、以及 Cloudflare 如何自動幫你處理 SSL 憑證。做完之後你的網站就是 https://你的網域.com，看起來跟任何正式產品一樣。

實作： 設定 DNS record，綁定自訂網域到你的 Cloudflare Pages 專案，確認 HTTPS 自動生效。

第五章：你剛剛做的事叫「全端部署」

內容摘要：
回頭拆解你在前四章做了什麼。前端（React）、後端（Cloudflare Functions）、CDN（Cloudflare 全球節點）、DNS（網域解析）、HTTPS（加密連線）— 這些加在一起就是業界說的「全端部署」。用一張架構圖讓你看清整體，並標出每個環節對應的技術名詞。最後告訴你：你現在站在哪裡，以及接下來可以往哪走。

你會理解：

• 前端 vs 後端 vs infrastructure 的分界

• 為什麼 Cloudflare 同時是 CDN 又是 hosting 又是 DNS provider

• 你的網站架構跟「正式產品」的差距在哪裡

下一步： 你現在有一個跑在全球 CDN 上的全端網站。但這個網站有一個問題 — 任何人都能存取你的 API、任何人都能假冒你的使用者。沒有認證、沒有授權、沒有 rate limiting。下一堂課我們來修這件事。

學完你會得到

1. 一個活的網站 — 跑在 Cloudflare 全球 CDN 上，有前端有後端，用你自己的網域，任何人都能打開。

2. 可重複的工作流程 — 下次有新想法，你知道怎麼從一句話到上線，60 分鐘搞定。

3. 全端開發的全貌認知 — 前端、後端、CDN、DNS、HTTPS 不再是抽象名詞。你接過一遍就懂了。

4. 對 AI 下 prompt 的手感 — 知道怎麼描述需求才能拿到可直接部署的程式碼，不是拿到一堆要自己 debug 的半成品。

課程直播時間

• 2026/08/20（週四） 19:00–22:00