部署Angular应用到Github pages
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的更多相关文章
- 使用 Github Actions 自动部署 Angular 应用到 Github Pages
前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用.前端项目 ...
- 使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
- 使用 Travis CI 自动部署 Hexo 站点至 GitHub Pages
Hexo 与 GitHub Pages 安装配置请参考:Hexo 与 GitHub Pages 本文源码与生成的静态文件在同一项目下,源码在 source 分支,静态文件在 master 分支 新增 ...
- 多项目部署在同一个GitHub Pages
由于GitHub 的约定,一个账户只能拥有一个GitHub Pages,那么,如果你有多个想部署的静态网站(博客和文档等),它们是互相隔离的,如何用同一个GitHub账户进行部署呢? 从之前如何搭建G ...
- 利用GitHub Pages和Hexo搭建个人博客
本文首发地址: 非生异也 本项目源码托管在GitHub上 Why 阮一峰曾经说过:喜欢写Blog的人,会经历3个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现 ...
- 基于Hexo搭建博客并部署到Github Pages
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
- Angular CLI: 发布到 GitHub Pages
发布 Angular 应用的简单方式是使用 GitHub Pages. 首先需要创建一个 GitHub 账号,随后,为您的项目创建一个仓库.记下 GitHub 中的用户名和项目名称. 例如,我的 Gi ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- 如何将你的github仓库部署到github pages(转)
原文地址:http://www.cnblogs.com/yuanzm/p/3945814.html#commentform 很多时候我都在思考一个问题,我们每天遇到各种各样的问题,然后我们需要不断go ...
随机推荐
- 获取txt编码方式
在操作txt的时候,有时会出现乱码,这是因为没有使用正确的编码方式来操作txt,我们需要先获取txt的编码方式,再进行读写操作.下面是获取txt编码的方法: /// <summary> / ...
- codeforces 1019B The hat 【交互题+二分搜索】
题目链接:戳这里 学习题解:戳这里
- 秋招C++面试相关总结索引
C++相关 C++ part1 C++ part2 C++ part3 C++ part4 C++ part5 C++ part6 C++ part6.5 C++ part7 C++ part8 C+ ...
- IDEA如何安装lombok
官方github:https://github.com/mplushnikov/lombok-intellij-plugin 使用教程在readme中都有写,很详细. 在这里我只是总结一下: 步骤: ...
- 013.NET5_MVC_Razor扩展Html控件01
Razor扩展控件 第一种方式: 1. 定义一个静态类 2. 定义静态扩展方法,扩展IHtmlHelper类型,返回IHtmlContent类型: 本质:通过后台方法,返回一个已经存在的Html标签 ...
- Python求二维数组中某列的最大值
主要运用np.amax() import numpy as np help(np.amax) a = np.arange(9).reshape((3, 3)) max_all = np.amax(a) ...
- Apple iOS 触控按钮 自动关闭 bug
Apple iOS 触控按钮 自动关闭 bug bug 轻点 iPhone 背面可执行操作 您可以轻点两下或轻点三下 iPhone 背面以执行某些操作,如向上或向下滚动.截屏.打开"控制中心 ...
- Koa & WebSocket inAction
Koa & WebSocket inAction node.js https://koajs.com/ ping / pong socket.io client send 2 as ping ...
- 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 ...
- website URL & UTM
website URL & UTM UTM user track message utm_source https://zhuanlan.zhihu.com/p/143473571?utm_s ...