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 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.

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?

No magic if your index.html is in the app folder just go there: http://siddhion.github.io/maxmythic_angular/app/ I imagine this is a face palm situation so I'll leave you to delete it or answer your own question if you were genuinely confused. — shaunhusain, Jul 14 '13 at 20:24
Right on but when I go to siddhion.github.io/maxmythic_angular/app I get two `404 (Not Found)` errors in the Network tab of Chrome Developer Tools for my `styles.css` and `angularjs.js`. Why are these two files not getting found? — , Jul 17 '13 at 13:04
I don't see either of these files in your directory upload listing either? there is a style.sass and the components folder within apps appears to be missing. — shaunhusain, Jul 17 '13 at 17:47
By George you are right. I did not even consider that they did not get pushed since I did `git add .`. How bizarre. I will repush everything. Thanks. — , Jul 17 '13 at 22:18

score 13 · Accepted Answer · edited Sep 07 '14 at 16:20

13

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.

Remove the dist directory from the .gitignore file.
Add the dist directory to your repository and commit it with your project.

git add dist && git commit -m "Initial dist subtree commit"
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
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

edited Sep 07 '14 at 16:20

drewish

9,042
9
38
51

answered Jul 18 '13 at 02:53

Stephen

5,710
1
24
32

1

Thanks for this answer but every time I run `git subtree push --prefix dist origin gh-pages` I get a non fast-forward error. I then did `git pull origin master` and it says `Already up-to-date.` I am not sure what is going on here. I will expand on this issue in an update in my question. – Jul 23 '13 at 15:15
3

I got the same error. I [deleted gh-pages branch](https://help.github.com/articles/unpublishing-a-project-pages-site) on origin: `git push origin --delete gh-pages` and then ran `git subtree push --prefix dist origin gh-pages` Then it worked. – Anatoly Mironov May 20 '14 at 20:18
Can anyone make it clear please? At first i created a repo named nahiduzzaman.github.io, then i cloned it, and generated an yeoman angular project under it, i also grunt build it, removed the dist from .gitignore what should i do after that? – Md. Nahiduzzaman Rose Dec 11 '16 at 06:37

score 0 · Answer 2 · edited Apr 15 '16 at 11:53

I recommend using grunt-build-control. The usage guide there is exactly your case.

I have used it to deploy my user.github.io, where the actual code is in branch source, and the optimized web page is built in local dist folder (in .gitignore) and then deployed to branch master using grunt buildcontrol:dist

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

How to upload my AngularJS static site to Github Pages?

UPDATE

2 Answers2