Compile Jekyll with Gulp (without Ruby)

Going to keep this short and sweet, this is extremely basic but is very easily expandable using globs, renaming, optimisation etc.

Let’s say we have a Jekyll influenced structure with a layout file default.html, a header.html include (partial) and the actual page content example-page.html.

my_project/
├── _includes/
│ └── header.html
├── _layouts/
│ └── default.html
└── page.html

Let’s say that theheader.html include partial looks like this:

The default.html layout looks like this:

and finally page.html looks like this:

Note: We are using Front Matter to assign variables that are used in the layout.html and the page.html.


Dependencies and Gulpfile

npm install liquid-node event-stream gulp-front-matter gulp --save-dev

gulpfile.js for compiling:

Finally running gulp compile will compile your templates.

If you’d like an example on GitHub or anything else added to this let me know in the comments and I’ll get right on it.