发布 Angular 应用的简单方式是使用 GitHub Pages.

点击这里 可以查看发布之后的应用。

首先需要创建一个 GitHub 账号，随后，为您的项目创建一个仓库。记下 GitHub 中的用户名和项目名称。

例如，我的 GitHub 账号是 haoguanjun，我创建的项目名称是 ng-hello。

然后，您要做的就是运行

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

这个 PROJECT_NAME 就是您的项目在 GitHub 中的名称。这个示例中使用的项目名称是 ng-hello，将 docs/index.html 复制为 docs/404.html。

提交修改并 Push 到仓库中。

您应该在项目的主页 https://github.com/haoguanjun/ng-hello 上，看到一个 docs 的文件夹，其中包含了一个 404.html 页面。

页面内容如下所示：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Hello</title>

    <base href="ng-hello">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>

  </head>

  <body>

    <app-root></app-root>

    <script type="text/javascript" src="inline.97a5517db35cb02cdd8d.bundle.js"></script>

    <script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script>

    <script type="text/javascript" src="main.352a0febf476a50f1de9.bundle.js"></script>

  </body>

</html>

在 GitHub 项目的页面上，配置为 publish from the docs folder.

点击项目中的 ，进入项目配置页面。找到 GitHub Pages 配置部分。

在 Source 下面的下拉列表中，找到 master branch/docs folder ，选中并保存。如下所示。

这就是所有您需要做的！现在可以访问地址 https://USER_NAME.github.io/PROJECT_NAME 来访问页面了。

这个示例的寄宿在 GitHub 的 https://haoguanjun.github.io/ng-hello/ 中，可以直接点击查看。

这个示例所有的代码都保存在 https://github.com/haoguanjun/ng-hello 中，您可以直接下载查看。

您还可以使用 angular-cli-ghpages，这是一个全功能的包，可以帮助您做所有这些工作，且还有额外的功能。

Angular CLI: 发布到 GitHub Pages的更多相关文章

  1. Angular cli 发布自定义组件

    建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test                      ...

  2. 使用dumi生成react组件库文档并发布到github pages

    周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性 ...

  3. 为Github仓库添加Github Actions实现持续集成: Android apk自动编译发布以及github pages同步推送coding.net

    内容转载自我的博客 目录 说明 1. 编写Android项目的CI配置文件 2. 编写Jekyll项目的CI配置文件 2.1 配置coding.net 2.2 配置github 2.3 自动部署到co ...

  4. Docusaurus2 快速建站，发布 GitHub Pages

    Docusaurus2 可快速搭建文档.博客.官网等网站,并发布到 GitHub Pages, Serverless 等. 我们只需 Markdown 写写内容就行,也可直接编写 React 组件嵌入 ...

  5. angular2 学习笔记 ( angular cli & npm version manage npm 版本管理 )

    更新 : 2017-05-05 现在流行 Yarn ! 它是 facebook google 推出的东西. 算是补助 npm 做的不够好的地方. 源码依然是发布去 npm,只是下载接口换掉罢了哦. n ...

  6. 用Octopress在Github pages上写博客

    安装Git环境 下载msysgit(git for windows),并安装. 可以选择安装TortoiseGit,这个在windows的资源管理器里装了很多git的右键菜单,对git命令行不熟悉的同 ...

  7. 基于 Hexo + GitHub Pages 搭建个人博客（二）

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  8. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  9. 使用vuepress搭建GitHub pages静态博客页面

    vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...

随机推荐

  1. CRM项目总结

                CRM项目总结      一:开发背景 在公司日益扩大的过程中,不可避免的会伴随着更多问题出现. 对外 : 如何更好的管理客户与公司的关系?如何更及时的了解客户日益发展的需求变 ...

  2. iOS学习——UI相关小结

    1     StoryBoard: 在Info.plist中可以查看Main storyboard,即入口storyboard,默认为main.storyboard,可以修改为自己创建的storybo ...

  3. LeetCode题目总结（三）

    我的代码在github上,https://github.com/WINTERFELLS/LeetCode-Answers 这里只提供个人的解题思路,不一定是最好的. 41-60: 给定一个排好序的数组 ...

  4. celery出现警告或异常的解决方式

    做个笔记,记录下使用celery踩过的坑,不定期更新.  warnings.warn(CDeprecationWarning(W_PICKLE_DEPRECATED)) 我用的是Flask,所以在Fl ...

  5. iOS学习——属性引用self.xx与_xx的区别

    在iOS开发过程中,我们用@proprety声明一个属性后,在代码中我们可以用self.xx与_xx来获取到这个属性.但是一直有一个疑惑,那就是这两个之间有什么区别呢?最初我一直觉得这两个之间没什么区 ...

  6. 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器

    北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 论述当下网络时间同步 ...

  7. Python使用Tabula提取PDF表格数据

    今天遇到一个批量读取pdf文件中表格数据的需求,样式大体是以下这样: python读取PDF无非就是三种方式(我所了解的),pdfminer.pdf2htmlEX 和 Tabula.综合考虑后,选择了 ...

  8. Eclipse 配置scala开发环境（windows）

    1. scala2.10.4.msi 安装 2. 配置SCALA_HOME 及path路径 SCALA_HOME C:\Program Files (x86)\scala PATH :%SCALA_H ...

  9. java equals == contentEquals

    equals与== 经常用于比较,用法如下:字符串比较相同用equals,普通数值(基本数据类型)比较用==, contentEquals下面讲 理论准备: java的基本类型如int.float,d ...

  10. Windows程序设计学习笔记（四）自绘控件与贴图的实现

    Windows系统提供大量的控件供我们使用,但是系统提供的控件样式都是统一的,不管什么东西看久了自然会厌烦,为了使界面更加美观,添加一些新的东西我们需要自己绘制控件. 控件在默认情况下并不进行自绘,如 ...