如何将我的AngularJS静态网站上传到Github Pages？

Question

如何将我的AngularJS静态网站上传到Github Pages？

angularjsgithubyeomangithub-pagesgit-subtree

12

我用AngularJS创建了一个静态站点，现在想将其上传为Github页面。我按照这里的所有说明进行操作：https://help.github.com/articles/creating-project-pages-manually。

我可以创建一个名为gh-pages的新分支，并使用git push origin gh-pages将所有内容推送到该分支。当我转到我的repo时，我看到了新的gh-pages分支，其中包含所有文件，如下所示：https://github.com/siddhion/maxmythic_angular/tree/gh-pages。

问题是，当我尝试在http://siddhion.github.io/maxmythic_angular/查看我的站点时，我只得到一个404页面。我认为问题在于我没有把index.html放在顶级目录中，而是放在app目录中。我的目录结构之所以会变成这样，是因为我是通过Yeoman创建的。我认为我需要在顶级目录中拥有所有文件。或者，也许我的这个假设是错误的？

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

更新：

我按照Stephen提供的步骤进行操作。我进行到第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部署页面的一些常见错误部分中，我看到：

你可能会遇到这样的错误：“Updates were rejected because the tip of your current branch is behind.”你可以通过强制提交到远程解决这个问题（但要小心，这将摧毁已经存在的任何内容）。

我对强制执行subtree push持怀疑态度，因为我对git不太熟悉，也不确定会破坏什么。我的maxmythic_angular origin远程目前没有gh-pages分支，所以我不担心这个，但是我有我的master、gh-pages-old和gh-pages-v1分支。如果我运行git subtree push --prefix dist origin gh-pages，它们会被摧毁吗？

- user883807

1

如果你的index.html在app文件夹中，只需前往此处：http://siddhion.github.io/maxmythic_angular/app/。我想这是一个非常简单的问题，所以我会让你自己删除它或回答你自己的问题，如果你真的感到困惑。 - shaunhusain

没错，但是当我访问siddhion.github.io/maxmythic_angular/app时，在Chrome开发者工具的网络选项卡中，我的styles.css和angularjs.js文件会出现两个“404（未找到）”错误。为什么这两个文件找不到呢？ - user883807

你的目录上传列表中也没有看到这两个文件？其中有一个style.sass，而apps文件夹中的components文件夹似乎丢失了。 - shaunhusain

你说得对，我甚至没有考虑到它们没有被推送，因为我使用了 git add .。太奇怪了。我会重新推送所有内容。谢谢。 - user883807

2个回答

0

我建议使用grunt-build-control。那里的使用指南正好适合你的情况。

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

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

- phcerdan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephen · Accepted Answer

在Yeoman的网站上有一个部署指南，介绍如何使用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在不同的分支上设置一个单独的代码库。注意：前缀必须是dist目录的相对路径。这假定dist在您的根目录中。

git subtree push --prefix dist origin gh-pages
现在，您可以在默认（主）分支中提交整个代码库，每当您想部署dist目录时，可以运行：

git subtree push --prefix dist origin gh-pages