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 是另外的开发者开发 ...
随机推荐
- jQuery实现表的编辑删除添加(增删改查)🌚
代码 : (用到了bootstrap里面的全局css样式和组件,毕竟一把梭.
- Vue 组件（component）之 精美的日历
公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评(). 先来个截图 代码已经分享到 https://github.com/zh ...
- MySQL优化三 表结构优化
由于MySQL数据库是基于行(Row)存储的数据库,而数据库操作 IO 的时候是以 page(block)的方式,也就是说,如果我们每条记录所占用的空间量减小,就会使每个page中可存放的数据行数增大 ...
- 前端安全之XSS攻击及防御
xss攻击是什么 ? XSS攻击类似于SQL注入攻击,攻击之前,我们先找到一个存在XSS漏洞的网站,XSS漏洞分为两种,一种是DOM Based XSS漏洞,另一种是Stored XSS漏洞.理论上, ...
- flex弹性布局语法介绍及使用
一.语法介绍 Flex布局(弹性布局) ,一种新的布局解决方案 可简单.快速的实现网页布局 目前市面浏览器已全部支持1.指定容器为flex布局 display: flex; Webkit内核的浏览器, ...
- Android Ptrace Inject
之前介绍了Android平台上3种常见的hook方法,而hook的前提是进程注入,通过进程注入我们可以将模块或代码注入到目标进程中以便对其空间内的数据进行操作,本篇文章介绍基于ptrace函数的注入技 ...
- Hive安装与配置详解
既然是详解,那么我们就不能只知道怎么安装hive了,下面从hive的基本说起,如果你了解了,那么请直接移步安装与配置 hive是什么 hive安装和配置 hive的测试 hive 这里简单说明一下,好 ...
- 聊聊ThreadLocal原理以及使用场景-JAVA 8源码
相信很多人知道ThreadLocal是针对每个线程的,但是其中的原理相信大家不是很清楚,那咱们就一块看一下源码. 首先,我们先看看它的set方法.非常简单,从当前Thread中获取map.那么这个ge ...
- 盒模型 bug 与触发 bfc
一.margin合并 css经典bug 两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果 <style> .up{ width: 200 ...
- HyperLedger Fabric基于zookeeper和kafka集群配置解析
简述 在搭建HyperLedger Fabric环境的过程中,我们会用到一个configtx.yaml文件(可参考Hyperledger Fabric 1.0 从零开始(八)--Fabric多节点集群 ...