Auto-publish static site to Github pages with Gulp

The CMS Solutions
1

If you use Gulp and want to publish a static version of your site to Github pages, here’s a way to do it.

You’ll need these installed and required:

var del    = require('del');
var run    = require('gulp-run');
var ghPages = require('gulp-gh-pages');

Here’s the Gulp code, note that it references statify.php, which you can find here

Be sure to customize it with your github pages URL.

/*
  deploying to github pages
  statify is used to transform the site into static HTML in the dist directory
  gh-pages is used to send result to github pages for this repo
*/

gulp.task('clean:static', function () {
  return del([
    'kirby/static/**/*'
  ]);
});

// After cleaning, call your normal build tasks whatever they are. 
// Replace ('css', 'panel', etc)
gulp.task('static', ['clean:static','css','panel','js','images','video'], function(){
  return run('php ./kirby/statify.php').exec();
})

gulp.task('deploy', ['static'], function(){
  return gulp.src('./kirby/static/**/*')
   .pipe(ghPages());
})

When you’re ready to deploy, just run

gulp deploy
3 Likes
2

Hi I was just wondering where you put your own github information?

Pedro

3

I also get a : Error: Cannot find module ‘del’

:confused:

4

Hi Pedro,
Sorry for the confusion, this post is not a complete solution, but rather a few pointers which assume you already have a custom Gulp setup for your site. In that way, it’s very incomplete.

About the ‘del’ error, I’m guessing that’s because it needs to be installed npm install del.

About the github info question - the gulp-gh-pages plugin expects a bunch of options passed in, here’s more info about that plugin: https://github.com/shinnn/gulp-gh-pages

Sorry I didn’t provide better guidance here - I hope this helps.

5

Thanks Nate! I’ll look into it all more! :slight_smile: