Deploying to GitHub Pages

In this recipe you will learn how to set up deployment to GitHub Pages. Your gh-pages branch will contain files from dist.

Steps

We only need to install one dependency for this recipe:

$ npm install --save-dev gulp-gh-pages

We need to create a deploy task, which will deploy contents of dist to the remote gh-pages branch:

gulp.task('deploy', ['default'], () => {
  return gulp.src('dist/**/*')
    .pipe($.ghPages());
});

If you don't want to trigger a rebuild on each gulp deploy, feel free to remove the ['default'] part.

Also, cache from this plugin will be saved to .publish, we can ignore it by adding this line to .gitignore:

.publish

For gulp-gh-pages to work, we need to have our repository on GitHub, and the origin remote has to point there. We can check our remotes by running:

$ git remote -v

If origin doesn't exist, create it:

$ git remote add origin https://github.com/you/webapp.git

Our app will be hosted on the gh-pages branch, so we need to have it on the remote repository. We can create an orphan branch by running:

$ git checkout --orphan gh-pages

In order to be able to push this branch, we have to have at least one commit, so let's create an empty one:

$ git commit -m "Initial commit" --allow-empty

Now we can push it to origin:

$ git push origin gh-pages

It might take a couple of minutes for your page to show up the first time you push to gh-pages.

In case your gulp deploy command is failing, try deleting the cache by running:

$ rm -rf .publish

and trying again.