有两种关键的网络应用程序开发方法：多页面和单页面。多页面方法通常与紧密耦合的后端技术一起工作，如PHP或.NET MVC。
一个典型的单页网络应用程序有一个松散耦合的后端。换句话说，单页网络应用有分裂的客户端和服务器端代码。
如今，单页开发方法很受欢迎，因为它带来了更高的可维护性因素，令人印象深刻的用户体验，以及良好的缓存支持。前端框架如Angular、React、Svelte和Vue.js可用于单页网络应用程序开发。
然而，我们需要有一个静态文件服务器来在互联网上发布特定单页应用程序的客户端代码。你可以在云服务上制作自己的静态文件服务器，或者使用像GitHub Pages这样的静态文件托管服务，这是一项免费服务，有很多好处。
在本教程中，我将向你展示如何将你的Angular应用程序部署到GitHub Pages中。
GitHub Pages的好处
GitHub Pages是一项免费服务，它允许开发者将其代码库部署为静态网站。换句话说，当你使用GitHub Pages时，你可以通过GitHub仓库将你的HTML、JavaScript和CSS等网页内容作为网站公开，而且你还可以使用GitHub的所有其他好处和服务。例如，你可以整合GitHub Actions服务，为你的单页应用程序运行一些Angular单元测试。
此外，GitHub Pages为你提供了一个免费的github.io 子域名。如果你已经有了一个域名，你也可以轻松地使用它。
用Angular创建一个单页应用程序
如果你已经有一个Angular应用程序，你想在本教程中使用，你可以跳到下一节。
Angular提供了一个CLI，我们可以用它来创建和管理Angular应用程序。Angular CLI还可以为给定的原理图自动生成初始代码。输入下面的命令来安装CLI。
$ npm install -g @angular/cli
然后，输入下面的命令来搭建一个新的应用程序的脚手架。
$ ng new yourappname
一旦初始文件被创建，你就可以启动本地开发服务器来查看你新创建的应用程序。
$ cd yourappname
$ ng serve --open
之后，按照你的意愿，通过创建组件来实现你的网络应用。你可以测试应用逻辑，甚至不需要完全重新加载你的应用，因为Angular支持热模块重载。
将你的Angular应用部署到GitHub页面中
要开始，你需要为你的静态网站创建一个GitHub仓库。如果你还没有在GitHub中存储你的代码，请创建一个新的仓库。如果你需要让你的网站在你的github.io 子域的根部工作，将你的仓库命名为<username>.github.io 。否则，你的网站将被发布到<username>.github.io/<repositoryname> 。你也可以使用一个自定义的域名作为你的GitHub仓库的名称。
默认情况下，Angular CLI 会为你初始化一个 Git 仓库。因此，你需要添加一个新的远程引用，指向你新的GitHub仓库，以推送你的代码和静态文件。
输入以下代码来设置一个新的远程引用。
$ git remote add origin https://github.com/<username>/<repositoryname>.git
由于Angular CLI本身不支持GitHub Pages的部署，你需要通过输入以下命令添加Angular GitHub Pages外部库。
$ ng add angular-cli-ghpages
上述命令将通过添加GitHub Pages部署支持来扩展CLI。
现在CLI已经准备好将你的应用程序部署到GitHub Pages中了。你可以使用deploy 命令来部署你当前的Angular应用程序，如下图所示。
$ ng deploy --base-href=/<repositoryname>/
上述命令将构建你的应用程序，并将最终的静态文件推送到gh-pages 分支。第一次成功部署后，GitHub 会自动为新仓库启用 GitHub Pages 功能。更多信息可以在设置标签中的 GitHub Pages 部分找到，如下图所示。
你的网站应该可以通过以下方式访问 [https://<username>](https://<username>);.github.io/<repositoryname>.你可以看到，我创建的示例应用程序是活的。
何时传递基础 URL
deploy 命令中的--base-href 选项将设置HTML<base> 标签的href 属性。如果你要把你的应用程序发布到github.io 子域的根目录或自定义域，你不需要传递这个值，因为默认情况下，网络浏览器会尝试从根目录加载资源。然而，如果你需要将Angular应用程序发布到一个非根目录的位置，就像下面的例子一样，你应该明确提到基本的URL。否则，浏览器将无法正常加载你的应用程序的资源。
- 对于
yourcustomdomain.com/angularapp，基础URL应该是/angularapp/ - 对于
yourusername.github.io/myapp，基本URL应该是/myapp/
如上所述，如果你要将你的应用程序部署到一个自定义域的子目录中，你必须使用该子目录作为基本URL。
建立你的开发工作流程
网络应用程序通常需要频繁的更新、改进和扩展，这就要求我们每隔一段时间就改变一下应用程序的源代码。一旦我们完成了更新，就得把我们的改动部署到GitHub页面。我们可以使用main 分支来维护你的应用程序的源代码。像往常一样，gh-pages 分支被反过来用于最终的静态文件。
正如每个开发团队所做的那样，我们可以根据自己的开发需求设置不同的分支。
限制和结论
作为一项免费服务，GitHub Pages 有一些小限制。静态内容的大小被限制在1GB，所以你将无法上传巨大的媒体文件。GitHub Pages还有每月100GB的带宽限制。
GitHub Pages不推荐其服务用于托管电子商务网站，但该工具对于希望发布开源网络应用的开发者来说仍然很好，比如为开发者提供服务、文档、游戏、登陆页面、博客和其他类型的内容。如果你正在寻找一个稍微强大的解决方案堆栈，LAMG可以帮助你把一个完整的单页应用程序免费部署到带有后台的GitHub Pages。
