部署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 ...
随机推荐
- 数据库之ODPS中sql语句指南
此篇博文为本人在实际工作中应用总结,转载请注明出处. 持续更新中 一.增 1.增加一列(向csp_hsy_count_info表中增加sale_qty列) ALTER TABLE csp_hsy_co ...
- 【非原创】codeforces 1029F Multicolored Markers 【贪心+构造】
题目:戳这里 题意:给a个红色小方块和b个蓝色小方块,求其能组成的周长最小的矩形,要求红色或蓝色方块至少有一个也是矩形. 思路来源:戳这里 解题思路:遍历大矩形可能满足的所有周长,维护最小值即可.需要 ...
- CDD All In One
CDD All In One 组件驱动开发 (CDD) refs https://www.componentdriven.org/ https://www.learnstorybook.com/int ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- 如何配置 webpack 支持 preload, prefetch, dns-prefetch
如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...
- node.js & create file
node.js & create file node js create file if not exists https://nodejs.org/api/fs.html#fs_fs_ope ...
- Android 开发 权限管理
Android 开发 权限管理 https://sspai.com/post/42779 $ adb shell pm list permissions -d -g https://zhuanlan. ...
- Chrome & install App & PWA
Chrome & install App & PWA Chrome & install website as an app chrome://apps https://medi ...
- js form.onformData事件
在表单提交前修改数据,此事件在submit之后 f1.addEventListener("formdata", (e) => { e.formData.append(&quo ...
- django学习-14.sys.argv用法和使用场景
1.前言 sys是python自带的一个内置模块. "sys.argv[0]"的含义:表示代码本身所在的文件路径. sys.argv说白了就是一个从程序外部获取参数的桥梁,这个&q ...