前言 最近在學習 Angular，一些基礎的語法也學習的差不多了，就在 github 上新建了一個代碼倉庫，準備用 ng-zorro 搭個後臺應用的模板，方便自己以後寫些小東西時可以直接使用。前端項目，最主要的還是能夠實際看到，因此考慮找個地方部署，因為自己的博客是部署到 github page 上 ...
前言
最近在學習 Angular，一些基礎的語法也學習的差不多了，就在 github 上新建了一個代碼倉庫，準備用 ng-zorro 搭個後臺應用的模板，方便自己以後寫些小東西時可以直接使用。前端項目，最主要的還是能夠實際看到，因此考慮找個地方部署，因為自己的博客是部署到 github page 上的，並且這個項目也只是一個靜態網站，所以這裡同樣選擇使用 github page
同時，考慮到發佈項目時，雖然使用 github page 已經幫我們省略了拷貝文件到伺服器上這一步，但是還是需要自己手動的敲命令來完成項目的發佈，因為發佈的流程很單一，所以這裡選擇通過 github action 這個自動化工具來實現程式的自動化部署
代碼倉庫地址：ingos-admin
預覽地址：https://yuiter.com/ingos-admin
Step by Step
2.1、手動部署
示例的 Angular 應用，你可以通過 Angular CLI 直接生成，如有需要，可以點擊此鏈接進行跳轉查看（電梯直達），這裡就不演示創建的過程了
按照正常的前端項目發佈流程，當我們需要發佈時，需要使用 npm 命令來完成項目的打包。整個項目中所涉及的 npm 命令，我們可以通過查閱項目的 package.json 文件中的 scripts 節點進行查看
這裡通過 Angular CLI 創建的項目可以通過 ng build 命令來完成項目的打包發佈
當 build 命令執行完成後，項目根路徑下 dist 文件夾中以項目名稱命名的文件夾就是我們需要部署的文件。此時，如果是部署到自己的伺服器上，只需要把這個文件夾拷貝到伺服器上，通過 nginx 之類的伺服器指向文件所在路徑即可
同樣的，當我們想要部署到 github page 時，我們也只需要將文件提交到 github 代碼倉庫中即可，之後 github 會自動完成應用的部署工作
因為 git 預設是會忽略編譯生成的 dist 文件夾的，此時，想要把編譯生成的文件推送到遠程倉庫，你需要修改 .gitignore 文件，或是通過 subtree 的形式，將 dist 文件夾作為一個分支推送到遠程伺服器
# 創建並切換到 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
