发布 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. RBAC__权限设计__结构化表的输出(不知道怎么描述标题,反正就是设计表) 难点重点 必须掌握🤖

    RBAC 反正就是很厉害. 干就完事了,不BB 直接进入正题 本文写的就是如何设计表,以及设计表的思路. 用户和角色 : 多对多字段放在哪张表更好点? 用户找角色,角色找权限. 放在user表中,是正 ...

  2. Windows上Python2与Python3共存

    首先安装好python2与python3版本 因为安装顺序的不同,所以系统默认的版本也不同.如果先安装的是python,那么系统默认的就是python2 如果根据需求需要使用不同的版本,可以使用py命 ...

  3. MySQL常见连接查询

    在实际应用中,由于不同的业务需求,一般的select查询语句无法满足要求.所以就需要了解一些MySQL的高级查询方式 内连接 inner join 典型的连接查询,有相等(=)连接和不等(<&g ...

  4. VS2010 Extension实践（3）——实现自定义配置

    在之前的两篇曾提到通过VSSDK(MSDN也叫VSX)来拓宽思路,实现一些MEF Extension所不能做到的功能,比如获取IVsUIShell服务来执行Command等等,这里我给各位看官展示如何 ...

  5. Nginx优化use参数epoll,kqueue,rtsig,eventport,poll

    转自:http://blog.sina.com.cn/s/blog_5eaf88f10100gkrq.html Nginx use参数分析对比 下图对比了poll select epoll和kqueu ...

  6. Python入门-数据类型

    一.变量 1)变量定义 name = 100(name是变量名 = 号是赋值号100是变量的值) 2)变量赋值 直接赋值 a=1 链式赋值  a=b=c=1 序列解包赋值  a,b,c = 1,2,3 ...

  7. 在VSCode中编辑HTML文档时，在Dom标签上写style属性时智能提示的问题

    首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...

  8. MySQL事务-ROLLBACK，COMMIT用法详解

    使用ROLLBACK 既然我们已经知道了什么是事务处理,下面讨论事务处理的管理中所涉及的问题. 管理事务处理的关键在于将SQL语句组分解为逻辑块,并明确规定数据何时应该回退,何时不应该回退. MySQ ...

  9. SQL常用增删改查语句

    1增 1.1[插入单行]insert [into] <表名> (列名) values (列值)例:insert into Strdents (姓名,性别,出生日期) values ('开心 ...

  10. 在虚拟机中安装metasploit官方攻防模拟器

    首先我们要在windwos下载安装perl环境.下载地址: http://pan.baidu.com/s/1i3GLKAp 然后我们安装 点击next 我同意,next next next,然后他会安 ...