使用angular-cli-ghpages 建置Angular靜態專案 到GitHub Page | use angular-cli-ghpages build angular static project to GitHub Page

Posted on Edited on

背景

最近學了angular 入門實作，想要把之前寫的一個小工具翻成 angular 網站，
當時在製作 GitHub page 的時後卡了很久，
因為之前是用 Visual Studio 2015 Community 開 sln，然後再推上去，
結果資料夾層級讓那個路徑重複了好幾次，後來就放棄沒改了

現在好奇有沒有工具可以幫我簡單把 angular 專案建立到 github page 上
於是找了一下找到了教學文，他是使用angular-cli-ghpages這個套件，
基本上照著做沒有問題

Deploying an Angular App to Github Pages
https://alligator.io/angular/deploying-angular-app-github-pages/

但是要注意 github 最近出了私有模式，而 page 似乎不能給私有專案用(也是合理)，
所以要開 public 的 repo。

還有推上去後他會自動建一個 branch 來放這些 build 過的檔案，
若在 ngh 後面接上指定 branch 的參數放上去，他會把舊的檔案都蓋掉，只放 build 後的檔案

實作

1.建立 GitHub repo，記得要是公開的

2.建立 angular 空白專案

1
$ ng new myNewProject

3.將專案的遠端分支登記為 GitHub 的 repo

1
$ git remote add origin <github git url>

4.將 ng 專案建置，並填入根目錄網址為 page 的網址

1
$ ng build --prod --base-href "https://<user-name>.github.io/<repo>/"

5.使用 angular-cli-ghpages 的指令建置 page

1
$ ngh

6.等他建好提示訊息就好啦