如何将 Ionic 4 应用程序部署到 Github 页面？

Question

我在将 Ionic 4 应用程序部署到 Github 页面时遇到问题。我尝试遵循上传 Angular 应用程序的教程，但它不起作用。它不断抛出各种错误。有人可以帮忙吗？非常感谢。

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文件夹，该文件夹类似于distAngular的文件夹。它还将您的 github 页面域设置为 index.html 中的 base href。
5. 然后运行该插件：npx angular-cli-ghpages --dir=www。末尾的标志指向www文件夹，index.html文件所在的文件夹将显示在https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/。该插件将在您的项目中创建一个名为“gh-pages”的分支，其中包含位于 www 文件夹中的所有文件。
6. 作为最后一步，您必须在项目设置 ( https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings ) 中选择“gh-page”分支作为 github 页面的源。

如果您不想使用默认的“gh-pages”名称（也可以使用 master，但是您应该将源文件保留在不同的分支中），您也可以设置不同的分支名称。只要运行这样的插件：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 的博客。

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。

如果你想要一个 costum 域，你可以添加 cname 标志

--cname=example.com

到 ngh 命令。

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

npm run gh-pages