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

markdown

# 背景

最近學了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空白專案
```
$ ng new myNewProject ```
3.將專案的遠端分支登記為GitHub 的repo
```
$ git remote add origin <github git url> ```
4.將ng專案建置，並填入根目錄網址為page的網址
```
$ ng build --prod --base-href "https://<user-name>.github.io/<repo>/" ```
5.使用angular-cli-ghpages的指令建置page
```
$ ngh ```
6.等他建好提示訊息就好啦