使用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，使用以下命令：

npm install -g @angular/cli

我们可以通过以下命令来验证安装是否成功：

angular version

现在，我们可以使用 Angular CLI 来创建一个新项目。

ng new sample

使用 ng new 命令创建 Angular 应用程序。

启动 Angular 应用，看一下初始的样子。

2. 设置 Git

Git 是一种跟踪文件更改的软件。

Git 的主要目的是帮助开发人员在一个组织内或在单个项目上进行合作。

Git 也是免费和开源的。它将文件视为文件系统的快照。每次发生更改时，Git 都会获取一个快照并将其存储以供参考。
如果 Git 已经安装，您可以跳过这一步。如果没有安装，可以参考这篇文章进行安装Windows 上安装 git2.x。

安装后，我们可以通过检查其版本来确保其准备就绪：

git --version

这条命令将会打印安装的 Git 版本。

3. 托管 Angular 应用程序

有很多方法可以在 GitHub Pages 中托管 Angular 应用程序。

本文主要讲述使用 Angular-cli-ghpages 在 Github 上 托管 Angular 应用程序：

1. 安装 Angular-cli-ghpages

   ng add angular-cli-ghpages

2. 编译 Angular 应用

   ng build --base-href /angular-app/

   base-href 的值将替换 index.html base 的值

3. 添加 git 仓库

在 github 上创建仓库

git init
git remote add origin <https://github.com/><username>/<repository>.git

将用户名和仓库名替换。

将编译后的 html, css, js 发布到 github

npx angular-cli-ghpages --dir=dist/angular-app/browser

到 github repo 上查看内容是否发布成功， gh-pages 分支上是否有发布的内容， 内容是否部署成功。

等待内容 deploy 成功后， 打开连接查看网页内容

浏览器打开 https://<username>.github.io/<repositoryname>

将 username 以及 repositoryname 替换成相应内容

4. troubleshooting

问题 1: .nojekyll 文件找不到

原因：angular-cli-ghpages 默认会在 dist 目录创建一个.nojekyll 下， 但是这往往不是所需要的。

解决办法： 在 dist/angular-app/browser 下面放一个空的.nojekyll 文件即可

问题 2： 发布到github时clone不下来，也push不上去。connection is closed by remote

在$HOME/.ssh目录下添加config文件

$vi ~/.ssh/config 

# GitHub
Host github.com
Port 443
User git
HostName ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa

5. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

6. 参考文档

Easy Steps to Host an Angular App in GitHub Pages