How to upload my AngularJS static site to Github Pages?

Question

I have created a static site with AngularJS and now want to upload it as a Github Page. I have followed all the instructions here

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

I can create a new branch named gh-pages and git push origin gh-pages all my content just fine. When I go to my repo I see the new gh-pages branch with all the files there like so

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

The problem is that when I try to view my site at http://siddhion.github.io/maxmythic_angular/ I just get a 404 page. I assume that the problem is that I don't have my index.html in the top directory. It is actually located in the app directory. My directory structure looks the way it does because I created it via Yeoman. I assume I need all the files in my top level. Or maybe I am wrong in this assumption?

How would I get my AngularJS static site to show up properly?

UPDATE

I followed the steps that Stephen provided. I got to step 3 and I got an error:

$ git subtree push --prefix dist origin gh-pages
git push using:  origin gh-pages
To [email protected]:siddhion/maxmythic_angular.git
 ! [rejected]        5db3233d7c0822eedc5500409ce6a2d4b73ad427 -> gh-pages (non-fast-forward)
error: failed to push some refs to '[email protected]: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.

I then tried

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

and then tried git subtree push --prefix dist origin gh-pages again but got the same error.

At the Yeoman deployment page I see under the Some common errors section

You might get an error like this Updates were rejected because the tip of your current branch is behind. You can solve this by force pushing to the remote (be careful though, it will destroy whatever is already there).

I am apprehensive to force the subtree push because I am new to git in general and not sure what is going to be destroyed. I mean, I currently do not have a gh-pages branch at my maxmythic_angular origin remote so I am not worried about that but I have my master, gh-pages-old and gh-pages-v1 branches there. Will they be destroyed if I run git subtree push --prefix dist origin gh-pages?

Answer 1

There is a deployment guide on Yeoman's site for how to deploy to the gh-pages branch using git subtree.

From the guide...

When you run grunt build, it generates a completely optimized version of your application in a dist directory that can be deployed.

The recommended way of deploying the dist directory is using git subtree.

1. Remove the dist directory from the .gitignore file.

2. Add the dist directory to your repository and commit it with your project.

   git add dist && git commit -m "Initial dist subtree commit"

3. Once the dist directory is part of your project we can use git subtree to set up a separate repository on a different branch. Note: prefix must be the relative path to your dist directory. This is assuming dist is in your root directory.

   git subtree push --prefix dist origin gh-pages

4. Now you can commit to your entire repository in your default (master) branch and whenever you want to deploy the dist directory you can run:

   git subtree push --prefix dist origin gh-pages