How to deploy angular app on GitHub pages

January 13, 2017

GitHub has a service to easily publish your websites, GitHub Pages. It's very useful to publish sites with simple static files. I've published a webapp as an angular trial for me, which is gh-issues. I'll write how to do it.

We can select two ways, master or docs, for layout. Let's say you choose docs on this entry.

Need two options when building
- --output-path
- --base-href
Need to use useHash for routing

--output-path is easy understandable :) It generates files into /docs of your repository.

Regarding --base-href, the root path of application for published URL contains the repository name, https://tmtk75.github.io/gh-issues/. --base-href option can handle this.

ng build --output-path=docs --base-href=.

You may have to change your code for routing. Add useHash parameter with true. Without this, GitHub Pages serves the 404 page for routed path.

RouterModule.forRoot(appRoutes, {useHash: true});

For example, /gh-issues/search returns 404 because actual docs/search file doesn't exist in docs directory.

I did with angular-cli 1.0.0-beta.24