gulp-minisite
Static site generator for Gulp ecosystem.
Why?
- A single build system is enough for static site development. I already have Gulp. I don’t want to work hard for making full-featured-standalone-static-site-generator to work well with Gulp/Npm/Node. Or to compile, minify, and optimize many different kinds of files properly in their way, while Gulp does everything well.
Making user-friendly presentation (HTML and pertty permalinks) from developer-friendly expression (eg. JSON, YAML, or Markdown and pretty filenames) is the one thing to do well for gulp-minisite. - To start small and expand flexibly, gulp-minisite keeps it simple, works without complex configutations, and provides some handy options and features.
gulp-minisite does:
- transform source files into HTML using template engine.
- compose useful data and you can use it in a template file.
- build clean permalink structure.
gulp-minisite does NOT:
- compile any file into CSS or JavaScript. Do it with Gulp and your favorite compiler.
- minify or optimize any kind of files. Do it with Gulp and your favorite minifier or optimizer.
- watch file changes. Do it with
gulp.watch()
. - run a local webserver. Do it with gulp-webserver.
- force you to use specific template engine. (Nunjucks by default, but you can change it)
- provide flexible permalink configurations like that. Just put files and follow the convensions.
- generate dynamic pages like paginated indexes. Traverse files and generate “dynamic“ pages manually before executing gulp-minisite tasks. (But considering some sort of helpers)
- behave like a blog engine. It’s made for a general website (including a blog).
- have any theme.
Install
$ npm install gulp-minisite --save-dev
Tutorial
Start with minimum example
Directory structure:
.
├── src
| └── index.html
├── gulpfile.js
└── package.json
src/index.html
:
HelloHello World
gulpfile.js
:
var gulp = ;var minisite = ; gulp;
Output
...
├── dest
| └── index.html
...
dest/index.html
:
HelloHello World
Just copied index.html
. This is still useless.
Use YAML and template
Add template:
.
├── src
| └── index.html
├── template <- added
| └── home.html <- added
...
template/home.html
:
<h1>{{ page.title }}</h1><p>{{ page.description }}</p>
By default, you can use Nunjucks template engine. See the document for further information.
Rename src/index.html
to src/index.yml
and modify content:
.
├── src
| └── index.yml <- rename and modify
...
src/index.yml
:
template: home.htmltitle: Hellodescription: Hello World
Specify template name by template
attribute.
Output
dest/index.html
:
HelloHello World
front-matter
Use Markdown with YAML.
├── src
| └── index.md <- renamed
...
src/index.md
:
---template: home.htmltitle: Hello---Hello World with **Markdown** syntax.
Update template/home.html
:
<h1>{{ page.title }}</h1>{{ page.body | markdown }}
Output
dest/index.html
:
Hello Hello World with Markdown syntax.
Add about page
Add document and template:
.
├── src
| ├── index.md
| └── about.yml <- added
├── template
| ├── home.html
| └── about.html <- added
...
src/about.yml
:
template: about.htmltitle: Aboutdescription: [Contact me](mailto:mail@example.com)
template/about.html
:
<h2>{{ page.title }}</h2><p>{{ page.description | markdown }}</p>
Output
...
├── dest
| ├── index.html
| └── about
| └── index.html
...
dest/about/index.html
:
AboutContact me
Add product pages
Add some files:
.
├── src
| ├── index.md
| ├── about.yml
| └── product <- added
| ├── index.yml <- added
| ├── salt.yml <- added
| ├── pepper.yml <- added
| └── sugar.yml <- added
├── template
| ├── home.html
| ├── about.html
| ├── product-index.html <- added
| ├── product-detail.html <- added
...
src/product/index.yml
:
template: product-index.htmltitle: Products
src/product/salt.yml
:
template: product-detail.htmltitle: Saltdescription: This is salty.
template/product-index.html
:
{% for product in page.collection %}<li><a href="{{ product.path }}">{{ product.title }}</a></li>{% endfor %}
template/product-detail.html
<h2>{{ page.title }}</h2><p>{{ page.description }}</p>
Output
...
├── dest
| ├── index.html
| ├── about
| | └── index.html
| └── product
| ├── index.html
| ├── salt
| | └── index.html
| ├── pepper
| | └── index.html
| └── sugar
| └── index.html
...
dest/product/index.html
:
PepperSaltSugar
dest/product/salt/index.html
:
SaltThis is salty.
Products are sorted by filename.
Sort products by specific order
Rename product files:
...
| └── product
| ├── index.yml
| ├── #01.salt.yml <- renamed
| ├── #02.pepper.yml <- renamed
| └── #03.sugar.yml <- renamed
...
Output
dest/product/index.html
:
SaltPepperSugar
Order part of filename is stripped from output.
Add site name for all pages
Add site
option in gulpfile.js
:
...gulp;
Prepend title tag to all template files:
{% if page.path === '/' %}<title>{{ site.name }}</title>{% else %}<title>{{ page.title }} - {{ site.name }}</title>{% endif %}...
Output
dest/index.html
:
Hello Website...
dest/about/index.html
:
About - Hello Website...
Add Japanese language version of files
Suffix language name:
.
├── src
| ├── index.md
| ├── index.ja.md <- added
| ├── about.html
| ├── about.ja.html <- added
| └── product
| ├── index.yml
| ├── index.ja.yml <- added
| ├── #01.salt.yml
| ├── #01.salt.ja.yml <- added
| ├── #02.pepper.yml
| ├── #02.pepper.ja.yml <- added
| ├── #03.sugar.yml
| └── #03.sugar.ja.yml <- added
...
src/index.ja.md
:
---template: home.htmltitle: こんにちは---こんにちは、世界
Specify locales
and defaultLocale
in gulpfile.js
:
...gulp;
Output
...
├── dest
| ├── index.html
| ├── about
| | └── index.html
| ├── product
| | ├── index.html
| | ├── salt
| | | └── index.html
| | ├── pepper
| | | └── index.html
| | └── sugar
| | └── index.html
| └── ja
| ├── index.html
| ├── about
| | └── index.html
| └── product
| ├── index.html
| ├── salt
| | └── index.html
| ├── pepper
| | └── index.html
| └── sugar
| └── index.html
...
dest/index.html
:
...こんにちはこんにちは、世界
Write draft document
Start filename with _
:
.
├── src
| ├── _contact.html <- added
...
gulpfile.js
:
...var gutil = ;...gulp;
Output
With $ gulp minisite
:
...
├── dest
| ├── contact
| | └── index.html
...
But with $ gulp minisite --production
, dest/contact/index.html
won’t be generated.
Add image files
...
├── src
| ├── img <- added
| | ├── logo.png <- added
| | ├── logo.ja.png <- added
| | ├── logo@2x.png <- added
| | └── logo@2x.ja.png <- added
...
Output
...
├── dest
| ├── img
| | ├── logo.png
| | └── logo@2x.png
...
| └── ja
| ├── img
| | ├── logo.png
| | └── logo@2x.png
...
If your files aren’t document, gulp-minisite just relocate and copies them.
Use Sass, CoffeeScript, etc.
gulp-minisite does nothing for that. Just proceed them as you like.
...
├── style
| └── main.scss
├── script
| └── main.coffee
...
gulpfile.js
:
...var sass = ;var coffee = ;...gulp;gulp;...
Options
minisite([options])
options.locales
- Type:
Array
ofString
- Default:
null
Acceptable locale names.
options.defaultLocale
- Type:
String
- Default:
null
If defaultLocale
specified, any file without locale part in filename will be assigned that locale.
options.site
- Type:
Object
- Default:
null
Site-global variable. You can refer the object in template files like {{ site.name }}
.
options.templateEngine
- Type:
Function
- Default: Nunjucks template engine
Template engine’s render function. The function should receive template name (actually, template
value of document) and data, and return rendered string.
To use jade:
... { var jade = ; var path = ; var tmplDir = 'jade'; return jade;}...
options.draft
- Type:
Boolean
- Default:
false
If true
, draft files (their filename starts with _
) will be proceeded.
options.dataExtensions
- Type:
Array
ofString
- Default:
['yml', 'yaml', 'json']
File extensions that are treated as documents. If you want YAML/JSON files not to turn out to be HTML, pass []
or null
.
License
MIT