使用Angular制作Github pages网站
GitHub Pages 是 GitHub 提供的一项服务，人们可以免费托管网站。这有助于人们为他们的博客、作品集、业务等托管个人网站。我们可以毫不费力地在 GitHub 页面上托管一个只有 HTML、CSS 和 JavaScript 的简单网站，但复杂的应用程序需要一些努力。
Angular 应用程序本身有许多附加内容，如组件、node 模块、路由等等功能。有几种方法可以在 GitHub Pages 中托管 Angular 应用程序。在这篇博客文章中，我们将看到在 GitHub Pages 中托管 Angular 应用程序的最简单方法。
首先我们必须有一个 Angular 应用程序和一个 GitHub 存储库。
1. 创建 Angular 应用程序
让我们使用 Angular CLI 创建一个示例 Angular 应用程序。
安装 Nodejs 可以参考博客 安装并配置 nodejs | 鹏叔的技术博客
安装 Angular CLI，使用以下命令：
1 | npm install -g @angular/cli |
我们可以通过以下命令来验证安装是否成功：
1 | angular version |
现在，我们可以使用 Angular CLI 来创建一个新项目。
1 |
|
使用 ng new 命令创建 Angular 应用程序。
启动 Angular 应用，看一下初始的样子。
2. 设置 Git
Git 是一种跟踪文件更改的软件。
Git 的主要目的是帮助开发人员在一个组织内或在单个项目上进行合作。
Git 也是免费和开源的。它将文件视为文件系统的快照。每次发生更改时，Git 都会获取一个快照并将其存储以供参考。
如果 Git 已经安装，您可以跳过这一步。如果没有安装，可以参考这篇文章进行安装Windows 上安装 git2.x。
安装后，我们可以通过检查其版本来确保其准备就绪：
1 | git --version |
这条命令将会打印安装的 Git 版本。
3. 托管 Angular 应用程序
有很多方法可以在 GitHub Pages 中托管 Angular 应用程序。
本文主要讲述使用 Angular-cli-ghpages 在 Github 上 托管 Angular 应用程序：
安装 Angular-cli-ghpages
1
ng add Angular-cli-ghpages
编译 Angular 应用
1
ng build --base-href /angular-app/
base-href 的值将替换 index.html base 的值
添加 git 仓库
在 github 上创建仓库
1 | git init |
将用户名和仓库名替换。
将编译后的 html, css, js 发布到 github
1 | npx angular-cli-ghpages --dir=dist/sample |
到 github repo 上查看内容是否发布成功， gh-pages 分支上是否有发布的内容， 内容是否部署成功。
等待内容 deploy 成功后， 打开连接查看网页内容
浏览器打开 https://<username>.github.io/<repositoryname>
将 username 以及 repositoryname 替换成相应内容
4. troubleshooting
问题 1: .nojekyll 文件找不到
原因：angular-cli-ghpages 默认会在 dist 目录创建一个.nojekyll 下， 但是这往往不是所需要的。
解决办法： 在 dist/sample 下面放一个空的.nojekyll 文件即可
5. Angular 系列文章
最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客