Creating a polymer with Jekyll?

Question

I am trying to use Polymer with a Jekyll website, but I cannot figure out how to do this. I downloaded and can run the Polymer launch kit. The polymer has the contents of the page in the directory app, but if I try to configure and start Jekyll from this folder, I get a load of errors because Polymer index.htmlcannot find resources (because the root directory is different).

What is the right way to configure and structure Jekyll and Polymer to work together?

Answer 1

I just returned to this, and since last summer the situation has improved significantly. I made a gulpfile based on this for the Polymer Starter Kit (1.2.3). But I changed the behavior of the task defaultand serveto run the Jekyll and assembly 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 will have a much cleaner effect, but it's an easy way to get Jekyll functionality and the benefits of vulcanization for production. (Note that you also need to install the package yargsto handle the port specification.) All my gulpfile is here .

Answer 2

The polymer being read started the readme.md set , which describes the development process , you will learn that:

gulp serve , gulp , -.

, github -, as is, gulp serve , . gulpfile.js, , gulp serve.

gulp, , dist. jekyll.

Answer 3

gulp-jekyll gulp. , html . .