https://jeneser.github.io/blog/2017/08/08/angular-deploying-app-github-pages/

Published: August 08, 2017 by jeneser

Categories: angular 1

Tags: angular 2 course 2 original 4

你将看到:快速部署angular应用到github pages,利用github提供的pages资源快速创建演示站点

开篇

使用subtree

使用angular-cli-ghpages

配置参数

常见问题

开篇

众所周知,github为开发者提供了免费的静态网站托管服务github pages,我们可以用github pages快速部署我们的项目demo或项目文档。

最近开发angular应用(重构简书),总体架构已经做好,在排除了aot过程中的种种问题之后,想着先把demo部署到github pages以供大家查看。

github pages

使用subtree

先来介绍一个通用的方法。在开发vue豆瓣的过程中,我使用了git subtree来快速发布Live demo到gh-pages分支。主要使用了以下三条命令:

git add -f dist

git commit -am 'Update live demo'

git subtree push --prefix dist origin gh-pages

可以看出,该方法使用起来也是相当方便的。用Git Subtree来维护我们的子项目代码(/dist),对于我们整个项目来说是透明的,我们看到的就是一个普通的目录,原来怎么做现在依旧怎么做,只需在需要更新live demo时去做同步代码的操作。如果你对此方法感兴趣可自行搜索git subtree来了解更多,在这里就一笔带过了。

当发布angular应用到github pages时,我并不推荐你这样做。因为,我们有更好的方法来部署我们的angular应用到github pages。

使用angular-cli-ghpages

angular-cli-ghpages是angular社区贡献的npm包,提供了一种近乎于傻瓜式的解决方案,即便是你不太了解git。

要注意的是angular-cli-ghpages只支持angular2+的项目。Show time :)

首先,我们先来全局安装angular-cli-ghpages

$ npm install -g angular-cli-ghpages

接下来,我们使用angular-cli的产品模式来打包我们的应用,并且附加--base-href参数修改,以便我们的应用能正确访问我们的静态资源。运行如下命令:

$ ng build --prod --base-href "https://.github.io//"

最后,使用angular-cli-ghpages来快速部署我们的应用到github pages。我们使用他的简写命令形式:

$ ngh

运行命令之后,不出意外的话,控制台将打印Successfully published!。此时angular-cli-ghpages已经自动帮我们部署了我们的angular应用。你可以访问https://username.github.io/app-name/来查看具体的部署情况。

配置参数

angular-cli-ghpages提供了很多有用的参数,各个参数的具体用法,请查看angular-cli-ghpages的官方文档。在这里,我们来说几个常用的:

使用--message来添加commit信息:

$ ngh --message="First deploy"

部署到指定的特定分支:

$ ngh --branch=production

另外,你可以使用--dry-run来查看该命令运行时输出的信息:

$ ngh --dry-run

常见问题

对于单页面应用来说我们应该把所有流量指向我们的index.html,来避免异常行为的发生。

在部署过程中你可能会遇到404错误,或者,当我们刷新某个页面时,我们的页面意外的变成了404。

我们需要修复它。对于github pages来说,我们没办法直接配置Github pages,但可以在commit时添加一个404页。简单的解决方案如下:

我们在项目的根目录新建404.html,把index.html中的内容完全复制到404.html中就可以了。这样做github pages仍然会在恰当的时候给出一个404响应,浏览器将会正确处理该页,并正常加载我们的应用。关于Github pages hack,推荐一篇文章:S(GH)PA: The Single-Page App Hack for GitHub Pages

(完结)

原创文章转载请注明.

作者:jeneser

作者github: https://github.com/jeneser

部署Angular应用到Github pages的更多相关文章

  1. 使用 Github Actions 自动部署 Angular 应用到 Github Pages

    前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用.前端项目 ...

  2. 使用Travis CI自动部署博客到github pages和coding pages

    每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...

  3. 使用 Travis CI 自动部署 Hexo 站点至 GitHub Pages

    Hexo 与 GitHub Pages 安装配置请参考:Hexo 与 GitHub Pages 本文源码与生成的静态文件在同一项目下,源码在 source 分支,静态文件在 master 分支 新增 ...

  4. 多项目部署在同一个GitHub Pages

    由于GitHub 的约定,一个账户只能拥有一个GitHub Pages,那么,如果你有多个想部署的静态网站(博客和文档等),它们是互相隔离的,如何用同一个GitHub账户进行部署呢? 从之前如何搭建G ...

  5. 利用GitHub Pages和Hexo搭建个人博客

    本文首发地址: 非生异也 本项目源码托管在GitHub上 Why 阮一峰曾经说过:喜欢写Blog的人,会经历3个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现 ...

  6. 基于Hexo搭建博客并部署到Github Pages

    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...

  7. Angular CLI: 发布到 GitHub Pages

    发布 Angular 应用的简单方式是使用 GitHub Pages. 首先需要创建一个 GitHub 账号,随后,为您的项目创建一个仓库.记下 GitHub 中的用户名和项目名称. 例如,我的 Gi ...

  8. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  9. 如何将你的github仓库部署到github pages(转)

    原文地址:http://www.cnblogs.com/yuanzm/p/3945814.html#commentform 很多时候我都在思考一个问题,我们每天遇到各种各样的问题,然后我们需要不断go ...

随机推荐

  1. 获取txt编码方式

    在操作txt的时候,有时会出现乱码,这是因为没有使用正确的编码方式来操作txt,我们需要先获取txt的编码方式,再进行读写操作.下面是获取txt编码的方法: /// <summary> / ...

  2. codeforces 1019B The hat 【交互题+二分搜索】

    题目链接:戳这里 学习题解:戳这里

  3. 秋招C++面试相关总结索引

    C++相关 C++ part1 C++ part2 C++ part3 C++ part4 C++ part5 C++ part6 C++ part6.5 C++ part7 C++ part8 C+ ...

  4. IDEA如何安装lombok

    官方github:https://github.com/mplushnikov/lombok-intellij-plugin 使用教程在readme中都有写,很详细. 在这里我只是总结一下: 步骤: ...

  5. 013.NET5_MVC_Razor扩展Html控件01

    Razor扩展控件  第一种方式: 1. 定义一个静态类 2. 定义静态扩展方法,扩展IHtmlHelper类型,返回IHtmlContent类型: 本质:通过后台方法,返回一个已经存在的Html标签 ...

  6. Python求二维数组中某列的最大值

    主要运用np.amax() import numpy as np help(np.amax) a = np.arange(9).reshape((3, 3)) max_all = np.amax(a) ...

  7. Apple iOS 触控按钮 自动关闭 bug

    Apple iOS 触控按钮 自动关闭 bug bug 轻点 iPhone 背面可执行操作 您可以轻点两下或轻点三下 iPhone 背面以执行某些操作,如向上或向下滚动.截屏.打开"控制中心 ...

  8. Koa & WebSocket inAction

    Koa & WebSocket inAction node.js https://koajs.com/ ping / pong socket.io client send 2 as ping ...

  9. The Weekly Web Dev Challenge: Emoji Ratings

    The Weekly Web Dev Challenge: Emoji Ratings /* DESCRIPTION: You job is to enable users to give a rat ...

  10. website URL & UTM

    website URL & UTM UTM user track message utm_source https://zhuanlan.zhihu.com/p/143473571?utm_s ...