gulp-nekyll
Advanced tools
Gulp plugin for static site generators. This is not done yet
This was inspired by the google web-app starter kit, my fork of which is the flagship for this. When I was using web starter kit I thought it was awesomely cool, but annoying that while going forward in static development, we took a step back too. I wanted to add precompiled template support.
So, I tried my hand at it and this is the result. Not sure if it will go anywhere.
var nekyll = require('gulp-nekyll');
// Create Templates From Directory
gulp.task('templates', ['templates:process'], function () {
return nekyll.build()
.pipe(gulp.dest('app/'));
});
gulp.task('templates:process', function () {
return gulp.src(['app/templates/**/*.html'])
.pipe(nekyll.all({
layoutsDir: '_layouts',
partialsDir: '_includes',
postsDir: '_posts'
}))
.on('error', console.error.bind(console))
})
...
// Watch Files For Changes & Reload
gulp.task('serve', ['styles:components', 'styles:scss'], function () {
gulp.watch(['app/templates/**/*.html'], ['templates', reload]); // <--- Here it is!
});
Now whenever we serve our gulp content, it will watch for template changes compile them into their individual files. Neat!
You get all of the benefits of Hogan.js and then some! The plugin supports partials, layouts, posts, and pages.
Use layouts to organize your partials and wrap them in ugly tags, like <html>, <head>, and <body>
Partials are reusable segments of beauty. Don't type that nav in more than once! Just make a partial for it!
Posts are markdown-parsed page content. They have special header information enclosed in some clever Hogan comments, and are then compiled into their own files and saved into a special object. This object can be iterated through to display posts on one of your pages.
Pages are... well... pages? They are inserted into a {{{yield}}} on the layout to finalize the page.
Hate retyping something like an email address or phone number? No problem. Configuration files are loaded and inserted into your templates, as well as some other useful information like today's date, and you can access them like any other mustache variable. The configuration is loaded in _config.json which resides in the root directory.
layout.html
<!doctype html>
<html lang="">
{{> head}}
<body>
{{{ yield }}}
</body>
</html>
head.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Static Site</title>
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
And finally
index.html
<h1>Hello World!</h1>
<small>Date Modified: {{formatDate date 'mm-dd-yyy'}}</small>
And then you have a file page! Now whenyou want to add new ones, you only need to worry about the specific content that makes it unique. You also get some handlebar helpers to make your content even more snazzy!
I hope you enjoy.
FAQs
Jekyll-like gulp build system
We found that gulp-nekyll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.