发布 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. ES6(三）数组的扩展

    1.Array.form ES6中,Array.from = function(items,mapfn,thisArg) {  }   Array.from 用于将 类数组 和 可遍历对象(实现了It ...

  2. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

  3. 这是要逆天么，看我控制台程序玩Microsoft XPS Document 打印

    主要是想试试Microsoft XPS Document 打印时怎样去掉那个“将打印输出另存为”对话框 using System; using System.Drawing; using System ...

  4. Python 数据科学系列 の Numpy、Series 和 DataFrame介绍

    本課主題 Numpy 的介绍和操作实战 Series 的介绍和操作实战 DataFrame 的介绍和操作实战 Numpy 的介绍和操作实战 numpy 是 Python 在数据计算领域里很常用的模块 ...

  5. Factom(公证通)--基于区块链的存证系统

    Factom这个Solution在2014年的时候就已经推出了,现在已经2018年了,我才来写这一篇分析文章可能有些迟了,但是它是十分具有参考价值的.因为现阶段来开区块链虽然炒得火热--养猫.养狗.草 ...

  6. Cent OS 6.5下源码安装php7.2

    1.安装php需要的扩展 # yum install libxml2 libxml2-devel openssl openssl-devel libcurl libcurl-devel libjpeg ...

  7. Qt5.3.1 OpenCV2.4.9 开发环境配置

    首先是将我们需要的三个软件安装:分别是OpenCV2.4.9.QT5.3.1 .Cmake3.0.2 一定要使用Cmake3.0.2编译OpenCV2.4.9 其他版本的不一定能编译成功!!!! A. ...

  8. python语言学习笔记整理

    什么是程序? 程序等于数据结构加算法,那么数据结构是一个静态的东西,算法是一个动态的东西,我们用一个新的语言编写这个程序,我们要考虑到语言也主要由数据结构和算法相关的东西,或静态或动态的东西来构成,所 ...

  9. C# 构造函数总结

    构造函数 构造函数分为:实例构造函数,静态构造函数,私有构造函数. 实例构造函数 1.构造函数的名字与类名相同. 2.使用 new 表达式创建类的对象或者结构(例如int)时,会调用其构造函数.并且通 ...

  10. junit测试模板 unit-test

    一个项目能否发布上线,重要的环节就是测试.经过集成测试.性能测试.压力测试等不断循环的测试过后依据测试报告来确定上线.这些由专业的测试人员来完成,因此会导致程序开发者对自身的单元测试的弱化.若在代码中 ...