Search code examples
angularjsgitwebhostingyeoman-generator

How to make a web project available through gh-pages?


I have a simple web project that I made on the top of https://github.com/yeoman/generator-angular.

This generates a great project environment with bower and grunt support, where the .js, .html, and .css files are positioned inside a folder called "app" (similar structure to https://github.com/jgatjens/angular-pokemon).

Everything is working great in localhost. I run a command code (grunt serve) and it starts to run into the browser. However, I am not being able to make the same be available online.

It is important to highlight that I don`t want to "publish it officially", I just want to be able to send a link to my friends, so they could try it (as users would) and give me feedback on it.

I am not talking about sharing the code. I just want to make it available as it would be for users once it is done.

For example, if I go to https://ng-pokemon.firebaseapp.com, I can try what the repository https://github.com/jgatjens/angular-pokemon has.

How to use gh-pages to make a subfolder project available?(in this case, "/app")

Any clue about how could I do that?

I am just an enthusiast that don`t have much experience in making web projects available.

Thanks in advance, Roger.


Solution

  • I finally figure out what I should do in the case of a project that is build in a subfolder structure. Which is a standard in yeoman projects, by the way.

    After all, I discovered that gh-pages do the service. To do so I needed to:

    1 - create a subtree for the subfolder where the project is built and push it to the gh-pages branch.

    git checkout master # you can avoid this line if you are in master...
    git subtree split --prefix dist -b gh-pages # create a local gh-pages branch      containing the splitted output folder
    git push -f origin gh-pages:gh-pages # force the push of the gh-pages branch to the remote gh-pages branch at origin
    git branch -D gh-pages # delete the local gh-pages because you will need it: ref
    

    2- after that, the index.html page was already being identified by the http://username.github.io/projectname page link. However, I was still missing the libraries references created automatically by bower. So and simply copy and paste the folder bower_components into the "/app" folder.

    3 - I did an update of the branch again and it work sweetly.

    ps_1: probably if I have to add a new library I will need to copy it manually from my outside bower_components to my inside bower_components.

    ps_2: I also create a grunt task to facilitate further deploys:

    grunt.task.registerTask('push-pages', function(){
       var shell = require('shelljs');
        shell.exec('git subtree split --prefix docs -b gh-pages');
        shell.exec('git push -f origin gh-pages:gh-pages');
        shell.exec('git branch -D gh-pages')
    });
    

    So, I just run 'grunt push-pages' and the update on the GitHub page is done.

    ps_2.1: to do that "shelljs" is required. In my case, I added it on npm package.json, just to make sure that I will never forget it.

    It is not the best solution on earth, but it worked fine =).

    font: https://gist.github.com/cobyism/4730490