Today, I am going to show you guys how to use Gulp.js to deploy your site to live through Github. Before we start, I would like to clarify couple of things. In this tutorial, we are making the following assumptions, (it works best when you set up your site the same way we did)

Okay, let’s get it started. Here is an example of what your production code might looks like,

index.html (it should be stored in a directory called prod)

  <!DOCTYPE html>
  <html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <h1>Hello world</h1>
    </body>
  </html>

source code hosted on GitHub

Next, we need to create the gulpfile.js to describe what our gulp task would be,

gulpfile.js

  var gulp   = require('gulp');
  var deploy = require('gulp-gh-pages');

  gulp.task('deploy', function () {
    return gulp.src("./prod/**/*")
      .pipe(deploy({ 
        remoteUrl: "https://github.com/your_github_username_here/your_github_username_here.github.io.git",
        branch: "master"
      }))
  });

source code hosted on GitHub

In this way, you can deploy your site to live through the following command whenever you are ready,

  gulp deploy

During the development, you should always push your code to dev branch in order to keep the production/master branch clean. (you should never directly push it to master branch except through the gulp deploy command)

  git add .
  git commit -m "your commit message"
  git push origin dev

Now, your file structure should looks something like this,

  | gulpfile.js
  |-> prod
  |->-> index.html

Note: For simplicity, I do not minimized my html code. However, in the real world, I would normally create a directory called src and put all my development code here. And then I will create bunch of gulp task that will minimized all my html/js/css files and port it to prod directory. Then, I will have my .gitignore to ignore my prod directory. So that I do not accidentally commit my production-ready/minimized code to my dev branch. In this way, when I deploy my site through ‘gulp deploy’, all my code will be minimized in production. And, all my development code will stay readable/not minimized. This is consider best practice in terms of how you would organize your project/web app. Here is an example of what the gulpfile.js would look like in case you need an example.

Wrapping Up

Hopefully this guide has teach you how to use Gulp.js to deploy your site to live through Github. Thank you for reading!

Resources

I’ll try to keep this list current and up to date. If you know of a great resource you’d like to share or notice a broken link, please let us know.

Getting started