Setting up Polymer with Jekyll?

Question

I'm trying to use Polymer with a Jekyll site, but I can't figure out how to get things set. I downloaded and can run the Polymer Starter Kit. Polymer has the page contents in the app directory, but if I try to set up and run Jekyll from this folder, I get a load of errors because the Polymer index.html can't find the resources (because the root directory is different).

What is the correct way to set-up and structure for Jekyll and Polymer to work together?

Answer 1

I just came back to this, and things are much improved since last summer. I made a gulpfile based on that for the Polymer Starter Kit (1.2.3). But I changed the behavior of the default and serve tasks to run Jekyll serve and build in the shell:

var spawn = require('child_process').spawn;
var argv = require('yargs').argv;

gulp.task('jekyllbuild', function(done) {
  return spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' })
      .on('close', done);
});

// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
  // Uncomment 'cache-config' if you are going to use service workers.
  runSequence(
    'jekyllbuild',
    ['ensureFiles', 'copy', 'styles'],
    'elements',
    ['images', 'fonts', 'html'],
    'vulcanize', // 'cache-config',
    cb);
});

gulp.task('serve', function(done) {
  if (argv.port) {
    return spawn('bundle', ['exec', 'jekyll', 'serve', '--port=' + argv.port], { stdio: 'inherit' })
        .on('close', done);
  } else {
    return spawn('bundle', ['exec', 'jekyll', 'serve'], { stdio: 'inherit' })
        .on('close', done);
  }
});

Using BrowserSync would have a much cleaner effect, but this is a simple way to get Jekyll functionality and the benefit of vulcanization for production. (Note that you also have to install the yargs package to handle port specification.) My whole gulpfile is here.

Answer 2

Reading polymer started kit readme.md paragraph development workflow you learn that :

gulp serve is made for development phase and gulp makes a build of your application, ready to be deployed on a web server.

Just copying what you've downloaded from github on a web server will not work as is, because gulp serve is more complex than this. Read the gulpfile.js and you will see all what is done by the gulp serve command.

You need to do a gulp and you then can deploy what is generated in the dist folder. This will work in a jekyll site.

Answer 3

You can integrate gulp-jekyll in your gulp build process. I'd also consider watching changes in your browser-sync to automatically generate html files on change. Vulcanization process should be done only when you are deploying.