Can one host an angular.js based static blog on Github?

All we need is an easy explanation of the problem, so here it is.

I know one can host a Jekyl based static site/blog via Github pages. Can one do the same with a static site/blog based on AngularJS?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can but you can’t use html5 mode (removes the # from urls). If you use html5 mode, you have to redirect all requests to the root url since its a single page app. Since you can’t use server side code on GitHub pages, you can’t do this. So, if you don’t mind the # in the url, go for it. If you want to use html5 mode, you need to look for hosting elsewhere.

From the Angular docs…

"Using [html5] mode requires URL rewriting on server side, basically you have to 
 rewrite all your links to entry point of your application (e.g. index.html)"

EDIT:
You can make use of some clever hacks to make this work if you really want to. The hacks are outlined in detail here. In summary, you rename your index.html to 404.html and github will serve it at all routes

Method 2

I would say yes considering all the angular UI github pages are in fact angular apps with demos:

http://angular-ui.github.io/

http://angular-ui.github.io/bootstrap/

etc

Method 3

There is one conflict between Jekyll and Angular to be aware of.

Liquid, which is included in Jekyll also uses {{ }} for evaluating expressions. To change the expressions that angular interprets (so it doesn’t conflict with Liquid) use:

var myapp;
myApp = angular.module('myApp', []);

myApp.config([
  '$interpolateProvider', function($interpolateProvider) {
    return $interpolateProvider.startSymbol('{(').endSymbol(')}');
  }
]);

Check out this blog post

Method 4

Yes, you can. I recently played around with AngularJS/Typescript and github pages and was able to deploy the site.
Since AngularJS is just javascript, you can actually use any decent webserver, e.g. github pages.
Here is the demo.
You can find source code here. This repository contains typescript source code which you have to compile in order to get the appropriate javascript file. Then you basically put this include this file into your index.html and you are done.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply