Angular CLI: 發布到 GitHub Pages


發布 Angular 應用的簡單方式是使用 GitHub Pages.

點擊這里 可以查看發布之后的應用。

 

首先需要創建一個 GitHub 賬號,隨后,為您的項目創建一個倉庫。記下 GitHub 中的用戶名和項目名稱。

例如,我的 GitHub 賬號是 haoguanjun,我創建的項目名稱是 ng-hello。

然后,您要做的就是運行 

ng build --prod --output-path docs --base-href ng-hello

這個 PROJECT_NAME 就是您的項目在 GitHub 中的名稱。這個示例中使用的項目名稱是 ng-hello,將 docs/index.html 復制為 docs/404.html。

提交修改並 Push 到倉庫中。

您應該在項目的主頁 https://github.com/haoguanjun/ng-hello 上,看到一個 docs 的文件夾,其中包含了一個 404.html 頁面。

頁面內容如下所示:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
    <base href="ng-hello">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <app-root></app-root>
    <script type="text/javascript" src="inline.97a5517db35cb02cdd8d.bundle.js"></script>
    <script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script>
    <script type="text/javascript" src="main.352a0febf476a50f1de9.bundle.js"></script>
  </body>
</html>

 

在 GitHub 項目的頁面上,配置為 publish from the docs folder.

點擊項目中的 ,進入項目配置頁面。找到 GitHub Pages 配置部分。

在 Source 下面的下拉列表中,找到 master branch/docs folder ,選中並保存。如下所示。

 

這就是所有您需要做的!現在可以訪問地址 https://USER_NAME.github.io/PROJECT_NAME 來訪問頁面了。

這個示例的寄宿在 GitHub 的 https://haoguanjun.github.io/ng-hello/ 中,可以直接點擊查看。

這個示例所有的代碼都保存在 https://github.com/haoguanjun/ng-hello 中,您可以直接下載查看。

您還可以使用 angular-cli-ghpages,這是一個全功能的包,可以幫助您做所有這些工作,且還有額外的功能。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM