Angular CLI: 发布到 GitHub Pages
发布 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的更多相关文章
- Angular cli 发布自定义组件
建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test ...
- 使用dumi生成react组件库文档并发布到github pages
周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性 ...
- 为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 ...
- Docusaurus2 快速建站，发布 GitHub Pages
Docusaurus2 可快速搭建文档.博客.官网等网站,并发布到 GitHub Pages, Serverless 等. 我们只需 Markdown 写写内容就行,也可直接编写 React 组件嵌入 ...
- angular2 学习笔记 ( angular cli & npm version manage npm 版本管理 )
更新 : 2017-05-05 现在流行 Yarn ! 它是 facebook google 推出的东西. 算是补助 npm 做的不够好的地方. 源码依然是发布去 npm,只是下载接口换掉罢了哦. n ...
- 用Octopress在Github pages上写博客
安装Git环境 下载msysgit(git for windows),并安装. 可以选择安装TortoiseGit,这个在windows的资源管理器里装了很多git的右键菜单,对git命令行不熟悉的同 ...
- 基于 Hexo + GitHub Pages 搭建个人博客（二）
在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...
- 使用Hexo + GitHub Pages 搭建个人博客
一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...
- 使用vuepress搭建GitHub pages静态博客页面
vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...
随机推荐
- parse_str 与 http_build_query的使用
1 http_build_query() 使用 生成 URL-encode 之后的请求字符串 [建议在使用前,使用array_filter($query) 进行处理] 例子 1. http_build ...
- MVC框架实例构建
转自:http://www.cnblogs.com/levenyes/p/3290885.html MVC全名是Model View Controller,是模型(model)-视图(view)-控制 ...
- Fiddler中如何过滤会话、查询会话、保存回话、对比会话
1.Fiddler中如何过滤会话 在抓包时,会捕捉到很多的会话,但是我们只关心特定的接口会话,这个时候我们可以使用过滤功能,来帮助我们从一大堆会话中筛选去我们关心的会话 (1)勾选过滤器选项Filte ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- timeline时间轴进度“群英荟萃”
timeline时间轴进度“群英荟萃” 是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 time ...
- [补充资料] 手动搭建 Cloudera 集群
本课主题 集群搭建 设置 Web 服务器 启动 ClouderManager 登入 Cloudera Manager 引言 这部份是一个补充资料,记录如何安装 Cloudera 服务器 集群搭建 查看 ...
- Mysql查询不为null值
Mysql本以为查询不为null就是!=null可是结果查询出来什么都没有,后来才发现不为null应该是is not null ,为null应该是is null.
- javascript编码标准
前面的话 编码标准是有争议的.几乎每个人都有自己的标准,但对标准应该是什么样的,则似乎很少能达成共识.但编码标准意味着,通过共同语言和一致的结构,把开发人员从无意义的工作中解放出来.允许开发人员把创新 ...
- 如何将VS 2015中的项目上传到github
最近开始慢慢接触github,现在希望将自己平时写的小程序,上传到github上,以便以后有个参考,在遇到同样问题的时候不至于想不起来怎么做而到处找别人的例子. VS 2015设置 首先下载跟gith ...
- SAP HANA中的SLT简介
在以SAP系统作为主要ERP的企业中,不同系统之间的数据库数据同步是个重要的工作.对于这种需求,除了开发ABAP接口之外,也有高效的工具可用.SLT就是其中之一. SLT是SAP的第一个ETL(Ext ...