手把手教你用 GitHub Pages 搭建網站！

我們公司內部的讀書分享會，有同事用AI vibe coding 把簡報做成網頁 HTML 的形式。我心想這也太酷了吧，我也來搞一個試試看！感謝好心的同事有留下那個簡報的原始碼，我也用 vibe coding 把那份簡報魔改成一個讀書會簡報編輯器，並且輸出了一份 HTML 簡報。

我覺得把簡報做成網頁的優點很明顯，不需要安裝任何簡報軟體，只要有瀏覽器，輸入 URL 就可以使用簡報，而且想玩什麼花樣，都可以用 CSS、JavaScript 去寫；但同樣的，缺點也很大——也就是把 HTML 做出來。把 HTML 做出來之後還會遇到問題，如果只是用瀏覽器打開這個 HTML，YouTube 的影片會沒辦法播放。

把簡報做成 HTML 的這個難點，我相信可以透過 AI 來解決。或是說簡報軟體也可以把做好的東西轉換成 HTML？這個我就沒有研究了，但我猜應該有類似功能。至於 YouTube 無法播放的問題，對於非工程師的朋友們可能就比較不好解決了。我問了 AI，在本機搭一個簡單的 Server 就可以解決，但是還是有些技術門檻。我認為把他上傳到 GitHub 然後使用 GitHub Pages 功能部署，相對來說簡單一些。

怎麼做呢？首先，先把做好的簡報 HTML 命名為 index.html。

然後，建立一個 GitHub 帳號。登入之後點擊頁面右上的頭像 > Repositories。

進去之後會看到一個綠色的 New 按鈕，點他進入到建立 Repository 的頁面。

在 Repository name 的欄位就給他一個好聽的名稱，Description 欄位可以不用填寫。接下來的 Configuration 設定也不需要調整，可以直接按綠色的 Create repository 按鈕。

由於這篇文章就是想教大家怎麼簡單弄一個靜態網站，所以我們直接點 uploading an existing file 直接上傳一個現成的檔案。

把做好的 index.html 上傳上去之後，可以直接按 Commit changes 紀錄這次上傳的檔案。

接著，會導回到這個 Repository 的頁面，此時應該會看到剛才上傳的 index.html 出現在上面。我們再按下上面那排的 Settings，並進入到 Pages 頁面。

這邊的設定，Source 應該會是 Deploy from a branch，這邊不需要動它。Branch 那邊，因為我們剛才是把 index.html 加到 main branch，所以這邊選擇 main，再按下 Save。

按下 Save 之後，可能需要等一小段時間，讓它去跑部署。跑完之後，畫面上顯示 Your site is live at https://你的帳號.github.io/repository名稱/ 就大功告成囉！