GitHub Pages 使用教學 ⭐ 發布網頁設計成果

2021-07-15

教學如何以 GitHub Pages 將網頁設計、前端服務成果進行發布，內容包含 Gtihub Pages 資料夾該如何進行設定，如果沒有正確的設定可能會出現 404，使用上不需要使用到 Gtihub Pages 提供的 Jekyll，正常的使用也不會違反 GitHub Pages 的限制。

本次將示範分別將專案 Source Code 發布於 Master Branch 而 Dist 資料夾發布於 gh-pages Branch，如果有使用動態網頁的需求，GitHub Pages 並不支援 PHP, ASP 等語言，必須使用 Js 與 Restful API 互動才能夠達到動態網頁的效果。

logo

專案發布

在已經有 GitHub Pages 以及 Google Domain 的使用經驗下，要進行專案發布相當容易，同時利用各子域名打造各種服務本來就是原本規畫要完成的事情。以下整理了每一個新的專案要加入到子域名提供連結需要進行的步驟 🙂

加入 CNAME

單檔名 CNAME 無副檔名，加入在 public/CNAME，內容是要在 DNS 上進行設定並提供使用者存取的 URL。藉由 GitHub Pages GUI 也可以做同樣的設定，只是加入在專案中有另外管理上的方便性。

color.sdwh.dev

調整 Build script

原先的 Build Script 僅負責產生 dist Folder 以及 Compiles 應用程式，客製切換到 /dist 並且 push 到 GitHub Repo 的 gh-pages 中，專供 GitHub Pages 使用，而 Master / Main Branch，則保留給程式碼專案的 Source 使用，不用區別多個 Repo，除非有想要隱藏專案 Source 的需求。

"scripts": {
  "build": "vue-cli-service build
    && cd .\\dist
    && git init
    && git add -A
    && git commit -m 'deploy'
    && git push -f https://github.com/sdwh/repoName.git master:gh-pages",
},
npm run build

利用 gh-pages 分支

GitHub Pages 可以選 Master 或者 gh-pages 分支作為 GitHub Pages 內容的資料夾。


設定 Google Domain

已經有 A record 指向 GitHub 的 Domain Name Server，新增子域名只需要增加 CNAME 設定。

調整 Gituhb Pages 設定

確認與 Domain 有對應成功，且有啟用 Https，接著就可以驗證成果。

不使用 Custom Domain 的部署方式

調整 Build script

同樣調整 Build Script 增加客製切換到 /dist 並且 push 到 GitHub Repo 的 gh-pages 中，專供 GitHub Pages 使用，另一樣保留 Master / Main Branch 給程式碼專案的 Source 使用，不用區別多個 Repo。

"scripts": {
  "build": "vue-cli-service build
    && cd .\\dist
    && git init
    && git add -A
    && git commit -m 'deploy'
    && git push -f https://github.com/sdwh/repoName.git master:gh-pages",
},

如果是 Vue Cli 專案，可以在 public 資料夾加入 CNAME 檔案，裡面直接註明要使用的 DNS Domain，可以減少 GitHub Page 上的設定，也可以提升設定對應所需要的時間，很讚 😋

npm run build

Vue Cli Config Modify

另如果 Push 的目標不是 username.github.io 而是其中的 Repo 要共用 GitHub Pages，則需要再 Vue Cli 專案中加入下列資訊：

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/repoName/' : '/',
};

跨專案的推送 Push From Not Owner

如果推送者，不是目標 Repo 的擁有者則必須藉由 Pull Request 的方式，但此方法稍嫌麻煩，也尚未驗證如何使用。改採 Collaborator, 協作參與者 的方式進行，設定方式如下：

完成設定後就算不是專案的 Owner 也可以進行推送了。

#Dev #GitHub #Toys