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. 数据库之ODPS中sql语句指南

    此篇博文为本人在实际工作中应用总结,转载请注明出处. 持续更新中 一.增 1.增加一列(向csp_hsy_count_info表中增加sale_qty列) ALTER TABLE csp_hsy_co ...

  2. 【非原创】codeforces 1029F Multicolored Markers 【贪心+构造】

    题目:戳这里 题意:给a个红色小方块和b个蓝色小方块,求其能组成的周长最小的矩形,要求红色或蓝色方块至少有一个也是矩形. 思路来源:戳这里 解题思路:遍历大矩形可能满足的所有周长,维护最小值即可.需要 ...

  3. CDD All In One

    CDD All In One 组件驱动开发 (CDD) refs https://www.componentdriven.org/ https://www.learnstorybook.com/int ...

  4. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  5. 如何配置 webpack 支持 preload, prefetch, dns-prefetch

    如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...

  6. node.js & create file

    node.js & create file node js create file if not exists https://nodejs.org/api/fs.html#fs_fs_ope ...

  7. Android 开发 权限管理

    Android 开发 权限管理 https://sspai.com/post/42779 $ adb shell pm list permissions -d -g https://zhuanlan. ...

  8. Chrome & install App & PWA

    Chrome & install App & PWA Chrome & install website as an app chrome://apps https://medi ...

  9. js form.onformData事件

    在表单提交前修改数据,此事件在submit之后 f1.addEventListener("formdata", (e) => { e.formData.append(&quo ...

  10. django学习-14.sys.argv用法和使用场景

    1.前言 sys是python自带的一个内置模块. "sys.argv[0]"的含义:表示代码本身所在的文件路径. sys.argv说白了就是一个从程序外部获取参数的桥梁,这个&q ...