AngularJS & Github pages, the easy way.

The other day, I finished an AngularJS website for a client, and since there was no server side to it, I decided it would be a great fit for GitHub pages.

The code was already deployed to GitHub, But what I thought would be a few minutes job, ended up taking a few hours of researching, Googling, and StackOverflowing…

I will try to summarize what I learnt, to make it easier for you (and me) to deploy your next AngularJS site to GitHub.

The Way GitHub routing works:

  1. GitHub will look for a branch called gh-pages.
  2. Inside that branch it will try and display index.html.
  3. If not found it will try and display 404.html.
  4. If not found it will display the GitHub 404 page.

What you need:

  1. A fully functional website committed to GitHub.
  2. A src folder with all your website, and a dist folder with the minified website.
  3. A CMD on your computer connected to GitHub + your credentials.

And without further ado, here are the steps to deploy your angularjs app to GitHub static pages.

1. Create a new sub-branch on GitHub.

Since this branch doesn’t need all the master files (only the dist folder) we can use git subtree.

git subtree push --prefix dist origin gh-pages

This command translate to “create a sub-tree from my master in the folder dist, and call this new branch gh-pages”. Exactly what we need.

2. Remove the hash-bang.

If you removed the hash-bang in your website, you might run in to some trouble, since GitHub doesn’t allow .htaccess files, and you need a way to tell GitHub to pass the navigation over to angular.

Luckily, there is a very simple trick. Just rename your index.html to 404.html, and since GitHub will load that page, and AngularJS doesn’t care what the name of the page is, you have a fully functional website.

3. Pushing updates to the branch.

Pushing future updates is as simple as using the same command again:

git subtree push --prefix dist origin gh-pages

But if for some reason, it doesn’t seem to work for you, and git starts complaining with the following message: Working tree has modifications. Cannot add. You can always just delete the branch and start over.

git push origin --delete gh-pages
git subtree push --prefix dist origin gh-pages

Wan’t to see the final result?

Check the GitHub Repo