- 這頁教什麼：GitHub 帳號註冊、建立 Repository、上傳第一個網頁、開啟 GitHub Pages 發布，以及如何請 AI 直接生成整個網站的程式碼。
- 適合誰：完全不會寫程式、想免費架設個人衛教網站或作品集的讀者，照步驟一步步操作即可。
- 注意：Repository 設為 Public 後整份原始檔案都公開可見，絕對不能放入病人資料、密碼或內部文件。
為什麼要有自己的網站
你現在看的這個「AI Workshop」教學網站，就架在 GitHub Pages 上（原始網址 ttingyu1123.github.io/ai-workshop，後來才綁上自訂網域 workshop.tingyudeco.com）— 沒有租伺服器，架站本身完全免費。這篇教你怎麼做出一個一模一樣的東西。
不用每次都靠社群平台演算法，自己的網址永遠找得到，病人和學生可以直接收藏。
放上簡報、講義、個人介紹，求職或申請進修時給一個網址就能展示完整內容。
GitHub Pages 對個人網站免費、不用綁信用卡。額度對個人教學網站通常綽綽有餘；大流量或正式機構服務要用正式主機。
三個名詞先搞懂
整個流程只會用到三個新名詞，先用醫院的架構理解一次，後面就不會迷路。
全世界最大的程式碼託管平台，也可以拿來存放任何檔案。註冊帳號完全免費。
一個專案的資料夾，裡面放你的網頁檔案（HTML、圖片等）。一個帳號可以開很多個。
GitHub 內建的免費網站託管功能，把 repository 裡的網頁檔案直接變成一個公開網址。
註冊與建立 Repository
全程都在網頁介面完成，不需要安裝任何軟體。
前往 github.com，點右上角 Sign up，用 email 註冊即可，完全免費。
登入後點右上角「+」→「New repository」，開始建立一個新的病歷夾。
Repository name 填一個英文名稱，例如 my-clinic-site。這個名字之後會出現在網址裡。
選擇 Public（公開）— 免費方案的 GitHub Pages 只能從公開 repo 發布。注意：Public 代表整份原始檔案都公開，不只是網站畫面 — 所以絕不要放內部文件、病人資料、密碼或 API 金鑰進這個病歷夾。
勾選「Add a README file」，然後點綠色的「Create repository」按鈕，病歷夾就建好了。
你的第一個網頁
網站的入口檔案一定要叫做 index.html — GitHub Pages 會自動把它當成首頁顯示。整個過程都在 GitHub 網頁上完成，不用裝任何軟體。
- 進到剛建立好的 repository 頁面
- 點「Add file」→「Create new file」
- 檔名欄位輸入
index.html - 把下面的範例貼進內容欄位
- 捲到最下面，點綠色的「Commit changes」按鈕存檔
index.html，多一個空格或大小寫不同，GitHub Pages 都認不出來，會出現 404 找不到頁面。
開啟 GitHub Pages
檔案存好了，還差最後一步「公告在大廳」— 打開 GitHub Pages 功能。
在 repository 頁面上方點「Settings」分頁。
左側選單找到「Code and automation」區塊下的「Pages」，點進去。
「Build and deployment」底下的 Source 下拉選單選擇「Deploy from a branch」。
Branch 下拉選「main」，資料夾維持「/ (root)」，點「Save」。
重新整理 Pages 設定頁面，會出現一條綠色訊息和你的網址，格式是 https://帳號.github.io/repo名/。點開就是你的網站了。
Ttingyu1123，repository 叫 ai-workshop，組合起來就是 https://ttingyu1123.github.io/ai-workshop/。之後若想換成自己的網域（像本站的 workshop.tingyudeco.com），在 repo 的 Settings → Pages 綁定即可，舊網址會自動轉址。
讓 AI 幫你寫網站
看到上面的 HTML 標籤覺得頭暈也沒關係 — 完全不用學 HTML。把你想要的網站描述清楚，交給 AI Agent（見 Part 7）或 ChatGPT，直接生出完整的 index.html，複製貼上到 GitHub 就好。
index.html，Commit 之後就上線了。想改內容，回去問 AI「幫我把第三段改成 XXX」，拿到新版程式碼再貼一次覆蓋即可。
常見問題
這幾個工具都是「平台幫你排版」：操作簡單，但只能在它提供的框架裡做事。GitHub Pages 則是「你給它檔案，它幫你上線」— 所以 AI 幫你寫的網頁程式碼（含查詢工具、計算機這類互動功能），只有這裡放得上去，而且完全免費、沒有平台廣告。
反過來說，有些情境用它們更合適：
- Google Sites — 需要限制「只有特定帳號能看」的院內頁面。GitHub Pages 一律公開，做不到存取控制。
- Canva 網站 — 以視覺為主、不需要互動功能的形象頁或活動頁（作法見 Canva 設計）。
- Notion 公開頁 — 想最快把一份筆記或文件變成網頁分享出去。
- Wix／WordPress — 需要會員、預約、購物車等後台功能；不過免費版有平台廣告，進階功能需要月費。
先等 1-2 分鐘再重新整理，剛開啟 Pages 需要一點部署時間。接著確認檔名真的是小寫的 index.html，最後回 Settings → Pages 確認狀態是「Your site is live」。
通常是瀏覽器快取問題，按 Ctrl+F5（Mac 是 Cmd+Shift+R）強制重新整理。也可以確認 GitHub 上的檔案確實已經 Commit 成功。
檢查圖片檔名和程式碼裡引用的路徑是否完全一致，包含大小寫 —Photo.jpg 和 photo.jpg 在 GitHub Pages 上會被視為不同檔案。
⚠️ 網站是完全公開的
GitHub Pages 上的任何內容，全世界都能搜尋和看到。衛教內容絕對不可以含有病人姓名、病歷號、床號、診斷細節等任何可識別病人身分的資訊，即使只是當作範例截圖也不行。