gulp-nucleus
An opinionated approach to generating static HTML using gulp and Nunjucks (as of v0.1.0) templates.
What is it?
The plugin is a simple static site generator that:
- Is designed for use in gulp. See example usage below.
- Uses Nunjucks for templating.
- Adds markdown support from marked.
- Supports YAML front-matter to pass data to swig templates.
- Supports YAML data files as additional data to pass to swig templates. See example below.
- Supports generating new pages from YAML data files. See example below.
Basic usage
gulpfile.js
gulp.task('html', () => {
return gulp.src('html/**/*.html')
.pipe(gulpNucleus())
.pipe(gulp.dest('dist'));
});
html/index.html
---
title: hello
---
<!doctype html>
<html>
<head><title>
{{ title }} <!-- rendered using Nunjucks -->
</title></head>
<body>
Hello world!
</body>
</html>
Using YAML data files
gulpfile.js:
gulp.task('html', () => {
return gulp.src('html/**/*.html')
.pipe(gulpNucleus({
dataPath: 'data'
}))
.pipe(gulp.dest('dist'));
});
data/apikeys.yaml:
fooApi: 2346b3166bdb60a0506d
html/index.html:
...
<script src="foo.js?key={{apikeys.fooApi}}"></script>
Generate new pages from YAML data files:
HTML pages that start with a $ are considered generator pages. For example:
gulpfile.js:
gulp.task('html', () => {
return gulp.src('html/**/*.html')
.pipe(gulpNucleus({
dataPath: 'data'
}))
.pipe(gulp.dest('dist'));
});
data/people.yaml:
- id: jane
name: Jane
- id: john
name: John
html/$person.html:
---
generate:
collection: people
variable: person
filename: '{{person.id}}.html'
---
Hi, my name is {{person.name}}