最近在学习 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当然，这样还是显得有些麻烦，对于 angular 应用来说，我们完全可以使用社区提供的