将Angular7 App布署至GitHub Pages

之前一篇说明如何在本机端预览Angular build后的结果，接下来要说明如何在GitHub Pages布署Angular应用程式。

目前的环境：

需具备知识：
-Git : add、commit、clone、push
-Angular : 建立专案ng new、建置专案ng build --prod

把dist资料夹部署至GitHub Pages

请先申请GitHub帐号，登入之后在画面右上角下拉式选单建立新的repository。

在Repository name栏位输入名称，绿色勾勾表示没有重複的名称，可以使用。
OK之后，按下Create repository绿色按钮。

建立新的repository之后，进入Settings。

在GitHub Pages区域，选取布景主题。

随便选取一个主题。

选取完毕，再次进入Settings页面，会发现GitHub Pages区域多了一个网页超连结，点选该连结。

若显示404请稍等几分钟或再次更换主题(GitHub Pages有时会怪怪的)，

应该就会成功了。

进入repository页面，copy HTTPS。

在命令提示字元中，输入git clone [copy的HTTPS]，将整个Repository clone到本地端。

GitHub Pages网址是https://s164975.github.io/AngularApp/ ，s164975是帐号名称，而AngularApp是repository的名称。可以说目前专案是建立于https://s164975.github.io/ 网域之下的，所以只要把静态网页档丢入AgularApp repository之中，就可以呈现网页了。

建立专案(NgDemo)，index.html有个<base href="/">tag，表示Angular的起始根url是/，由于GitHub Pages网址格式的关係，我们必须将/修改成/AngularApp/，Angular应用程式才能在GitHub Pages呈现。在ng build --prod之后加上--base-href /AngularApp/，表示将<base href="/">的/改成/AngularApp/。

进入建置产生的dist资料夹中的index.html，确认是否修改成功。