Angular学习笔记60：将Angular项目发布在GitHub pages页面上

现在将demo-test这个项目发布在GitHub pages这个的服务上

将项目进行构建打包并推送到GitHub

Angular官方文档中使用命令

ng build --prod --output-path docs --base-href //

经测试发现，这个命令不能达到我们想要的结果，会找不到页面或者报304，原因如下：

github发布以后，形成的访问地址是https://w-abel-jia.github.io/demo-test/ ，这里有一个仓库名称(demo-test)的上下文,所以修改上面这个命令为：

ng build --prod --output-path docs --base-href /demo-test/

这个时候，打包以后的index.html页面的使用demo-test

为了方便起见，也可以将这个命令放在package.json的script的对象里。

1. 执行打包构建：

npm run build:github

此时项目就开始执行打包构建了，输出目录为docs。

构建完成以后，就会发现在项目中，会生成一个docs的目录。
2. 切换到这个目录，

cd docs/

3. 将生成的index.html复制为404.html，执行命令：

cp index.html 404.html

然后将这个目录提交并push到GitHub的仓库中。

在GitHub中的项目仓库中进行相应的设置

1. 在仓库中点击设置

2. 设置GitHub Pages 服务资源来源

此时页面会刷新，然后再次找到刚刚设置GitHub Pages 服务资源来源的位置，会发现有一个提示：

点击这个链接，会发现自己的项目已经发布在了GitHub Pages 上了