【實作分享】在GitHub上佈署你的網頁

GitHub Page是GitHub提供使用者一個佈署自己靜態網頁的地方，也可以完全不需要寫Code就能建立屬於自己的網站。

本文的目標為：自動佈署Angular專案。

流程

1. 建立GitHub repository
2. Angular 建立遠端倉庫連結
3. 自動佈署Angular專案

建立GitHub repository

建立Angular專案

ng new test

建立遠端倉庫連結

建好後進入剛剛建的資料夾

cd test

初始化test這個資料夾的git

git init

增加剛剛的遠端倉庫

git remote add origin https://github.com/…/test.git

• 備註：這邊如果不是給origin，則之後的ngx ngh會報以下錯

❌ An error occurred when trying to deploy:
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

自動佈署Angular專案

這邊會用到angular-cli-ghpages， 讓我們先安裝這個庫

npm i -g angular-cli-ghpages

再來就是每次要佈署時皆需輸入的兩行程式碼

1. build出當前專案的檔案

ng build --prod --base-href /你的專案名稱/

2. 透過angular-cli-ghpages自動佈署

npx ngh --dir=dist/你的專案名稱

接著如果看到以下提示字串代表佈署成功

🚀 Uploading via git, please wait…
🌟 Successfully published via angular-cli-ghpages! Have a nice day!

回到GitHub上看成果

綠色區塊就是佈署完成後github替你建立的URL

work!

補充

1.gh-pages

Github會預設把gh-pages分支內的檔案以靜態網頁的方式呈現。

2.angular-cli-ghpages介紹

這個套件包含了幫你創建遠端倉庫的gh-pages分支之外，還有輸出佈署需要的檔案到Github上的功能。

至於其他像是--cname(可以建立自定義的網域)之類的參數可以到他們的GitHub上詳閱。

3.angular-cli-ghpages語法補充

• build

ng build --prod --base-href /你的專案名稱/

這邊如果沒有設定base-href的話，瀏覽器會在domain root上找你的專案，而不是在子資料夾上找，這樣可能就會導致佈署到GitHub上時angular-cli-ghpages報出成功的訊息，但是點了連結發現什麼都沒有(整頁都是白的)。

不過也有例外狀況不用設定base-href，就是當你沒有子資料夾時。

• ngh

ngh --dir dist/[PROJECTNAME]

上方的語法會取得指定路徑的檔案並將他們佈署到遠端gh-pages的分支上

4.Git Pages的限制

• 只提供靜態網站，像是PHP就不行
• 每小時最多接收10次提交
• 默認情況下，GitHub Pages是公開的，即使該Pages的存儲庫是私有的
• 禁止：在線業務、電子商務網站或任何其他主要旨在促進商業交易或提供商業軟件即服務 (SaaS) 的網站）
• Published GitHub Pages sites may be no larger than 1 GB.

這邊只大概列了一些Git Pages的限制，當然需要了解更多的話請到官方的Git Pages文檔查閱

5.本地圖片在Github Pages上無法顯示

這是因為在開發時，用的通常都是相對路徑，例如：

src = ["/assets/slide-img/4.jpg"]

但build完後檔案位置會移動到root，也就是說你可以在ng serve利用上面這段code正常的顯示本地圖片，但佈署到GitHub Pages上因為資料夾位置不一樣而導致無法讀到該路徑的圖片。

因此我們需要做的就是直接改成絕對路徑，讓圖片從root引用

src = ["assets/slide-img/4.jpg"]

stackoverflow

6.ngh報錯: no such file or directory

Diagnostic info: ENOENT: no such file or directory, stat ‘D:\...\index.html’
🚀 Uploading via git, please wait…
❌ An error occurred when trying to deploy:
ENOENT: no such file or directory, stat ‘D:\...’

請檢查Build的時候是否在src上層執行Build指令，否則Build出來ngh在佈署的時候會找不到正確路徑

7.ngh報錯：WARNING in budgets, maximum exceeded for initial

因為Angular的angular.json內建容量提示，當你build出來這個包太大的時候會警告你超過了，要你檢查哪些多餘的包是不需要，可以拿掉的。當然，你也可以直接把maximumWarning以及maximumError的值改大一點，就不會報錯，但也同時失去原本的用意了。(可參考)

“budgets”: [
  {
    “type”: “initial”,
    “maximumWarning”: “800kb”,
    “maximumError”: “1mb”
  },
  ...
]

8.ngh成功，且github倉庫也有更新，但github page還是舊的

這可能是因為Chrome有暫存，刪掉即可，也可以用無痕模式打開。

More Tools > Clear Browsing Data //刪除方法

"index.html could not be copied to 404.html. Continuing without an error." for Angular 6 · Issue…

https://github.com/angular-schule/angular-cli-ghpages

免費在 GitHub Pages 執行你的 Angular 應用程式