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://

配置參數
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