如何将我的 AngularJS 静态站点上传到 Github Pages？答案

【问题标题】：How to upload my AngularJS static site to Github Pages?如何将我的 AngularJS 静态站点上传到 Github Pages？
【发布时间】：2013-07-14 20:20:58
【问题描述】：

我已经用 AngularJS 创建了一个静态站点，现在想将它作为 Github 页面上传。我已按照此处的所有说明进行操作

https://help.github.com/articles/creating-project-pages-manually

我可以创建一个名为gh-pages 和git push origin gh-pages 的新分支，我的所有内容都很好。当我去我的仓库时，我看到了新的 gh-pages 分支，其中的所有文件都像这样

https://github.com/siddhion/maxmythic_angular/tree/gh-pages

问题是当我尝试在http://siddhion.github.io/maxmythic_angular/ 查看我的网站时，我只得到一个 404 页面。我认为问题是我的顶级目录中没有我的index.html。它实际上位于app 目录中。我的目录结构看起来像它的样子，因为我是通过 Yeoman 创建的。我假设我需要顶层的所有文件。或者也许我的这个假设是错误的？

如何让我的 AngularJS 静态站点正确显示？

更新

我按照斯蒂芬提供的步骤进行操作。我到了第 3 步，但出现错误：

$ git subtree push --prefix dist origin gh-pages
git push using:  origin gh-pages
To git@github.com:siddhion/maxmythic_angular.git
 ! [rejected]        5db3233d7c0822eedc5500409ce6a2d4b73ad427 -> gh-pages (non-fast-forward)
error: failed to push some refs to 'git@github.com:siddhion/maxmythic_angular.git'
hint: Updates were rejected because a pushed branch tip is behind its remote
hint: counterpart. Check out this branch and merge the remote changes
hint: (e.g. 'git pull') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

然后我尝试了

$ git pull origin master
From github.com:siddhion/maxmythic_angular
 * branch            master     -> FETCH_HEAD
Already up-to-date.

然后再次尝试git subtree push --prefix dist origin gh-pages，但得到了同样的错误。

在 Yeoman 部署页面上，我在 一些常见错误 部分下看到

您可能会收到类似这样的错误更新被拒绝，因为提示您当前的分支落后。你可以通过强制推动来解决这个问题到遥控器（不过要小心，它会破坏已经存在的东西那里）。

我很担心强制subtree push，因为我一般是 git 新手，不确定什么会被破坏。我的意思是，我目前在我的 maxmythic_angular origin 遥控器上没有 gh-pages 分支，所以我并不担心，但我在那里有我的 master、gh-pages-old 和 gh-pages-v1 分支。如果我运行git subtree push --prefix dist origin gh-pages，它们会被销毁吗？

【问题讨论】：

如果您的 index.html 在 app 文件夹中，那就没有魔法了：siddhion.github.io/maxmythic_angular/app 我想这是一个手掌情况，所以我会让您删除它或回答您自己的问题，如果你真的很困惑。
正确，但是当我转到 siddhion.github.io/maxmythic_angular/app 时，我的styles.css 和angularjs.js 在 Chrome 开发工具的网络选项卡中出现两个 404 (Not Found) 错误。为什么找不到这两个文件？
我在您的目录上传列表中也没有看到这些文件？有一个 style.sass 并且应用程序中的 components 文件夹似乎丢失了。
乔治你是对的。我什至没有考虑到他们没有被推，因为我做了git add .。多么奇怪。我会拒绝一切。谢谢。

标签： angularjs github yeoman github-pages git-subtree

【解决方案1】：

在 Yeoman 的网站上有一个 deployment guide，说明如何使用 git subtree 部署到 gh-pages 分支。

来自指南...

当您运行 grunt build 时，它会在可部署的 dist 目录中生成应用程序的完全优化版本。

dist 目录的推荐部署方式是使用 git subtree。

从 .gitignore 文件中删除 dist 目录。
将 dist 目录添加到您的存储库并与您的项目一起提交。

git add dist && git commit -m "Initial dist subtree commit"
一旦 dist 目录成为您项目的一部分，我们就可以使用 git subtree 在不同的分支上设置单独的存储库。注意：prefix 必须是 dist 目录的相对路径。这是假设 dist 在你的根目录中。

git subtree push --prefix dist origin gh-pages
现在，您可以在默认（主）分支中提交整个存储库，并且无论何时要部署 dist 目录，您都可以运行：

git subtree push --prefix dist origin gh-pages

【讨论】：

感谢您的回答，但每次我运行 git subtree push --prefix dist origin gh-pages 时都会收到非快进错误。然后我做了git pull origin master，上面写着Already up-to-date.我不确定这里发生了什么。我将在我的问题的更新中对此问题进行扩展。
我遇到了同样的错误。我 deleted gh-pages branch 在 origin: git push origin --delete gh-pages 然后运行 git subtree push --prefix dist origin gh-pages 然后它工作了。
有人能说清楚吗？起初我创建了一个名为 nahiduzzaman.github.io 的 repo，然后我克隆了它，并在其下生成了一个 yeoman angular 项目，我也咕噜咕噜地构建它，从 .gitignore 中删除了 dist 之后我该怎么办？

【解决方案2】：

我建议使用grunt-build-control。那里的使用指南正是您的情况。

我用它来部署我的user.github.io，实际代码在分支source，优化的网页建在本地dist文件夹（在.gitignore中），然后部署到分支@987654325 @使用grunt buildcontrol:dist

buildcontrol: {
  dist: {
    options: {
      remote: 'https://github.com/user/user.github.io',
      branch: 'master',
      commit: true,
      push: true
  }
}

【讨论】：