如何将Ionic 4应用部署到Github Pages？

Question

我在将Ionic 4应用程序部署到Github页面时遇到了问题。 我尝试按照上传Angular应用程序的教程进行操作，但无法成功。它一直在抛出各种错误。 有没有人能够帮忙？ 非常感谢。

- Petya Naumova

---

你的意思是要将代码推送到你的Github仓库吗？这应该不会太过于与Angular相关。你具体在做什么，你能列出步骤吗？ - Sergey Rudenko

我有一个包含Ionic代码的Github存储库。我想要创建一个子页面到我的Github页面账户中，以便将应用程序部署为Web项目。例如，我的Github页面账户是user-account.github.io，我想将应用程序视为user-account.github.io/TheApp。我想在Github页面中预览该项目。它必须编译TypeScript代码，因为这些页面只能包含纯HTML、CSS和JavaScript。我正在使用ionic-cli构建该项目。 - Petya Naumova

我看到了，您想使用Github托管静态网站有具体的原因吗？个人建议您分开考虑，使用为其目的而设计的每个服务 - Github - 代码仓库，使用Firebase Hosting作为易于使用和超级易于部署的静态网站托管服务。请参阅此指南：https://www.joshmorony.com/hosting-an-ionic-pwa-with-firebase-hosting/ - Sergey Rudenko

Answer 1

以下是如何在Ionic 4中使用angular-cli-ghpages：

1. 创建你的Ionic项目（ionic start MyApp blank）
2. 安装插件：npm i angular-cli-ghpages --save
3. 将你的项目连接到github仓库。
4. 在终端中导航至你的项目目录并执行 ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ 命令，这将创建一个 www 文件夹，与Angular中的 dist 文件夹类似。它还会在index.html中将你的github页面域名设置为基础href。
5. 然后运行插件：npx angular-cli-ghpages --dir=www。结束标志指向www文件夹，其中包含将显示在 https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/上的index.html文件。该插件将在你的项目中创建一个名为“gh-pages”的分支，其中包含位于www文件夹中的所有文件。
6. 作为最后一步，您需要在您的项目设置中选择“gh-page”分支(https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings)作为github页面的源。

如果您不想使用默认名称“gh-pages”（也可以是主分支，但此时您应将源文件保存在不同的分支中），您还可以设置不同的分支名称。只需像这样运行插件：npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www。

如Gary Großgarten所建议的那样，您可以为此创建一个脚本，使其更容易。对于Ionic来说，它应该是：ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ && npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www

我自己也在寻找合适的解决方案，感谢Juangui Jordán的博客。

- pfleigi

Answer 2

我正在使用https://github.com/angular-schule/angular-cli-ghpages来轻松实现这个目标。

只需添加

 "scripts": {
    ...
    "gh-pages": "ng build --base-href 'https://USERNAME.github.io/REPOSITORY_NAME/' --prod && npx ngh --dir=www/"
...
  }

将文本翻译为中文：

添加到您的 package.json 文件中。

如果您想要一个自定义域名，可以添加 cname 标志

--cname=example.com

"到ngh命令。"

"要构建和上传您的网站，请运行"

npm run gh-pages

- Gary Großgarten

Answer 3

注意：对于一个 gitlab 仓库（不是 Github），您可以执行以下操作：

.gitlab-ci.yml：

pages:
 image: node:latest
 stage: deploy
 script:
  - npm install -g ionic cordova
  - npm install
  # frontend application is served at https://what-digital.gitlab.io/stemba/
  # we need to set the basePath to the sub dir
  - ionic build --prod -- --base-href="https://what-digital.gitlab.io/gitlab-pages/"
  - rm -rf public
  - mkdir public
  - cp -r www/* public
 artifacts:
  expire_in: 1 week
  paths:
  - public
 only:
  - dev

- Mario