使用 GitHub Pages 架設網站初體驗
透過 GitHub Pages 我們可以免費架設網站，將網頁的內容存放在 GitHub repository。
以下彼得潘將示範如何結合 AI 和 GitHub Pages 快速建立小朋友學程式的網站。
- 請 AI 設計網頁。
- 在 GitHub 網站建立 repository。
- 將網頁上傳到 GitHub repository。
- 將 GitHub repostory 變成網站。
- 打造網站的首頁。
請 AI 設計網頁
彼得潘使用提供強大網頁預覽功能的 Claude Artifacts 設計網頁。
prompt: 請設計一個活潑可愛的網頁，只有一個頁面，主題是小朋友學 Swift 程式開發 iOS App。
點選右下的按鈕下載 html 檔。
從本機開啟下載的 html 將看到漂亮的小朋友 Swift 冒險之旅。不過我們的目標不僅於此，我們要讓全世界的小朋友都能幸福地學習 Swift，接下來將 html 上傳到網路才是重點。
在 GitHub 網站建立 repository
我們要將 html 檔存放在 GitHub repository，請先登入 GitHub 網站建立 repository。
點選左上的 New 建立 repository。
輸入 repository 的名字 kids learn swift，點選 Create Repository。
將網頁上傳到 GitHub repository
點選 upload an existing file。
上傳檔案後點選 Commit changes。
之後要再新增檔案時，可點選下圖的 Add file。
將 GitHub repostory 變成網站
GitHub repository 本來就能存放檔案，但是它並不會自動將 html 檔變成可連線的網頁。現在該 GitHub Pages 登場了，打開 repository 的 GitHub Pages 功能即可讓它變身網站.
點選 Settings。
點選側邊欄的 Pages。
點選 Branch 下的 main，然後點選 Save。
現在我們已經成功建立網站，網址是下圖顯示的 peterpanswift.github.io。
網址開頭的 peterpanswift 是彼得潘的 GitHub 帳號，現在 repository kids-learn-swift 的內容已變成可以存取的網站，連到 https://peterpanswift.github.io/kids-learn-swift/kids-learn-swift-page.html 即可存取網頁。(ps: 目前連不到是因為待會我們會再做一些調整。)
透過剛剛的方法，彼得潘可將自己 GitHub 帳號下的任何 repository 變成網站，比方將另一個 repository neverland 的 GitHub Pages 功能打開，連到 https://peterpanswift.github.io/neverland 即可存取 neverland 下的網頁內容。
打造網站的首頁
每個好的網站都該有個吸睛的首頁，以剛剛的 kids-learn-swift 為例， https://peterpanswift.github.io/kids-learn-swift/ 應該要顯示網站的首頁。不過目前只會看到 404，因為它還少了代表首頁的 index.html。
沒關係，趕快請彼得潘的好朋友 AI 幫忙設計一個酷炫的首頁。
prompt: 請設計類似星際大戰開頭字幕的首頁，主題改成學習 Swift 程式設計開發 iOS App。
下載 AI 製作的首頁，改名為 index.html，上傳到 GitHub repository kids-learn-swift。
現在 https://peterpanswift.github.io/kids-learn-swift 終於能顯示首頁。不過這樣的網址還是太長，能不能讓首頁的網址變成 https://peterpanswift.github.io 呢 ?
有的，方法很簡單，只要把 repository 名稱改成 peterpanswift.github.io即可。
現在連到 https://peterpanswift.github.io 即可看到星際大戰般的 Swift 首頁動畫。
小朋友學 Swift 的網址也變得更精簡，變成 https://peterpanswift.github.io/kids-learn-swift-page.html。
其它例子。
https://peterpanswift.github.io/swift-horror-webpage.html 。
