## 前言 最近在學習 Angular，一些基礎的語法也學習的差不多了，就在 github 上新建了一個程式碼倉庫，準備用 ng-zorro 搭個後臺應用的模板，方便自己以後寫些小東西時可以直接使用。前端專案，最主要的還是能夠實際看到，因此考慮找個地方部署，因為自己的部落格是部署到 github page 上的，並且這個專案也只是一個靜態網站，所以這裡同樣選擇使用 github page 同時，考慮到釋出專案時，雖然使用 github page 已經幫我們省略了拷貝檔案到伺服器上這一步，但是還是需要自己手動的敲命令來完成專案的釋出，因為釋出的流程很單一，所以這裡選擇通過 github action 這個自動化工具來實現程式的自動化部署 程式碼倉庫地址：[ingos-admin](https://github.com/Lanesra712/ingos-admin "a angular admin based on ng-zorro") 預覽地址：[https://yuiter.com/ingos-admin](https://yuiter.com/ingos-admin) ## Step by Step ### 2.1、手動部署 示例的 Angular 應用，你可以通過 Angular CLI 直接生成，如有需要，可以點選此連結進行跳轉檢視（[電梯直達](/danvic712/p/getting-started-with-angular.html)），這裡就不演示建立的過程了 按照正常的前端專案釋出流程，當我們需要釋出時，需要使用 npm 命令來完成專案的打包。整個專案中所涉及的 npm 命令，我們可以通過查閱專案的 `package.json` 檔案中的 `scripts` 節點進行檢視 這裡通過 Angular CLI 建立的專案可以通過 `ng build` 命令來完成專案的打包釋出  當 build 命令執行完成後，專案根路徑下 dist 資料夾中以專案名稱命名的資料夾就是我們需要部署的檔案。此時，如果是部署到自己的伺服器上，只需要把這個資料夾拷貝到伺服器上，通過 nginx 之類的伺服器指向檔案所在路徑即可 同樣的，當我們想要部署到 github page 時，我們也只需要將檔案提交到 github 程式碼倉庫中即可，之後 github 會自動完成應用的部署工作 因為 git 預設是會忽略編譯生成的 dist 資料夾的，此時，想要把編譯生成的檔案推送到遠端倉庫，你需要修改 .gitignore 檔案，或是通過 subtree 的形式，將 dist 資料夾作為一個分支推送到遠端伺服器 ```bash # 建立並切換到 gh-pages 分支 git checkout -b gh-pages # 將 dist 資料夾下的檔案新增到 gh-pages 分支 git add -f dist # 提交到本地分支 git commit -m 'created gh-pages' # 推送到遠端分支 git subtree push --prefix dist origin gh-pages ``` 當然，這樣還是顯得有些麻煩，對於 angular 應用來說，我們完全可以使用社群提供的 [angular-cli-ghpages](https://github.com/angular-schule/angular-cli-ghpages "