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
The npm package gulp-nekyll receives a total of 0 weekly downloads. As such, gulp-nekyll popularity was classified as not popular.
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
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.