昨天我們把寫好的專案放到 github 上，當我們想要看放到網路上的成果時，想說應該跟在本地的路徑一樣吧？
很自然的輸入了 https://github.com/zoeGuava/ithome2022-github-demo/index.html 要看頁面時，卻只得到：

點了 repository 中的 index.html 也只會看到 index.html 的程式碼而已，我的頁面呢？

Github pages

這邊會需要使用 github 提供的一個部署靜態網站的服務：github page。
我們可以透過這個服務將專案部署到網路上去，最終便可以透過網址來看到你推上去的專案內容。

首先我們先到 github 專案的頁面後，選擇最右邊的 Settings tag，再到左邊的 sidebar 中，選擇 Code and automation 中的 Pages，就可以到我們的目標：Github Pages
我們選擇要透過 github page 進行 host 的分支：main
按下 save 之後

重整就可以看到 github-pages 幫你部署好的訊息

之後記得回到專案的主頁面更新 About 的資訊

Vercel

除了 Github pages 之外，還有其他第三方的服務可以幫我們做網站的部署，在這邊我們使用 Vercel 來做。
先到 Vercel 的官網註冊、登入。

進到頁面之後選擇 Add New... > Project
在左側選擇自己的帳號，右邊輸入要部署的 repository 名稱：

現在沒有搜尋到是因為權限還沒有開給 Vercel，點下方的 Configure GitHub App 後，在跳出的 Github 彈窗中，滑到下方的 Repository access 去新增你要部署的 repository 就可以了。

這樣就會出現了你剛剛給了 Vercel 部署權限的 repository

import 進來之後，因為我們現在的沒有使用框架，選 Other 就好了，按下 Deploy 之後：

等他部署完成就可以看到恭喜成功的通知。

到這邊就完成了我們在 Vercel 上的部署了！484 很簡單！

link

Github: https://github.com/zoeGuava/ithome2022-github-demo
Github pages: https://zoeguava.github.io/ithome2022-github-demo/
Vercel: https://ithome2022-github-demo.vercel.app/

參考

從 0 到 1 的 GitHub Pages 教學手冊