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 是另外的开发者开发 ...
随机推荐
- 使用C#开发数据库应用系统 习题
错题积累 1: 2: 3: 4: 5: 6: 7: 8: 9: 10:
- Sequelize 基本操作
Sequelize 是 Node 的一个 ORM(Object-Relational Mapping) 框架,用来方便数据库操作. 配置 sequelize 以 mysql 为例 首先我们要引入npm ...
- Java学习笔记11---静态成员变量、静态代码块、成员变量及构造方法的初始化或调用顺序
当创建一个对象时,各种成员变量及构造方法的初始化或调用顺序是怎样的呢? (1).如果类尚未加载,则先初始化静态成员变量和静态代码块,再初始化成员变量,最后调用相应的构造方法: (2).如果类已经加载过 ...
- chrome调试工具高级不完整使用指南（实战一）
三.chrome调试工具实战 3.1 获取界面对应的HTML和修改样式 我们以博客园为例子来分析. 通过上面的操作就可以定位到对应的HTML代码 左侧菜单显示的就是当前指定元素层叠样式的一个情况 上面 ...
- 使用阿里云镜像maven管理配置开发环境
修改方法:在~/.m2目录下的settings.xml文件中,(如果该文件不存在,则需要从maven/conf目录下拷贝一份),找到<mirrors>标签,添加如下子标签: <mir ...
- 如何实现VM框架中的数据绑定
作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...
- 关于soapui简介与入门
SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Ecl ...
- Zabbix实战-简易教程（8）--添加item
一.术语 1.1 Item概念 Item是从主机里面获取的所有数据.通常情况下 item称为监控项,例如我们host加入了 zabbix 监控,我们需要监控它的内存.CPU信息,那么获取的CPU或内存 ...
- 解决：java.io.IOException: No FileSystem for scheme: hdfs
解决:java.io.IOException: No FileSystem for scheme: hdfs 开发项目初期,写完代码开始放到服务器上开始测试的时候,报出这样的一个错,不知道怎么处理了, ...
- zookeeper之分布式锁以及分布式计数器(通过curator框架实现)
有人可能会问zookeeper我知道,但是curator是什么呢? 其实curator是apachede针对zookeeper开发的一个api框架是apache的顶级项目 他与zookeeper原生a ...