(This post is part of my “from scratch” AngularJS project. If you are feeling lost, the first post is here.)
I’m not going to lie, I thought this was going to be a GREAT post! So much information about how to deploy our site to github pages and make it available for the world. The good news is, we did all the hard work in our previous post. The bad news is, this will probably be the shortest post and commit in this series.
Github Pages
Github gives us the ability to host our projects on their servers via github pages. Basically, whatever we put in a gh-pages
branch, will go into a publicly hosted page.
https://help.github.com/articles/creating-project-pages-manually/
Gulp
Ok, so how do we get our project into that gh-pages
branch? Enter, our good friend, gulp. Sure, we could build our files, checkout the branch and manually commit our build folder to the branch, and push to github. OR, we can make use of someone else’s hard work! We can use this tool as a plugin to our gulp tasks.
npm install gulp-gh-pages --save-dev
Then, simply pipe the result of our build
to the plugin and it will do the rest! We just need to add these lines to gulpfile.js
.
var ghPages = require('gulp-gh-pages'); gulp.task('deploy', ['build'], function(){ return gulp.src('./build/**/*') .pipe(ghPages()); });
Now we can just run gulp deploy
and our site is live! Thanks to our hard work in creating the build
task, we are all ready to go.
Running the code gives us a deployed version of our blackjack game! If you haven’t been following along and running every blog post locally, you can now play the game here!
The code for everything up to this post is available here..