Metalsmith

EVERYTHING IS A PLUGINという思想の元に作られた静的サイトジェネレーター(static site generator)。
githubのリポジトリ：https://github.com/segmentio/metalsmith

やりたいこと

下記みたいに、markdown × handlebars(JSテンプレート)をやりたい。

index.md

# {{title}}

{{#each sections}}
## {{this.title}}
{{this.description}}
{{/each}}

{{#each lists}}
* {{this}}
{{/each}}

やり方

サンプル(ソース)：maruLoop/metalsmith-inplace-example
実物：http://maruloop.github.io/metalsmith-inplace-example/build/

全体の流れ

metalsmith-in-placeを使って、src/*.mdをhandlebarsでビルドする
metalsmith-markdownを使って、markdownをパース
metalsmith-layoutsを使って、buildディレクトリ以下に生成

使うmetalsmithプラグイン

plugin	説明
superwolff/metalsmith-in-place	YAML Front-MatterのJSONを使って、Markdownをビルド
segmentio/metalsmith-markdown	Markdownをパース
superwolff/metalsmith-layouts	HTMLのテンプレートと合わせて、buildディレクトリに生成物を作る

package.json

{
  "devDependencies": {
    "handlebars": "^3.0.0",
    "metalsmith": "^1.3.0",
    "metalsmith-in-place": "^1.0.1",
    "metalsmith-layouts": "^1.0.0",
    "metalsmith-markdown": "^0.2.1"
  },
  "private": true,
  "name": "static-site-in-place-example"
}

metalsmith.json

{
  "metadata": {
    "title": "My Blog",
    "description": "My second, super-cool blog."
  },
  "plugins": {
    "metalsmith-in-place": {
      "engine": "handlebars"
    },
    "metalsmith-markdown": {},
    "metalsmith-layouts": {
      "engine": "handlebars"
    }
  }
}

src/*.md

---
{
  "template": "index.html",
  "title": "My Page Title",
  "lists": [
    "oh",
    "yeah"
  ],
  "sections":[
    {
      "title": "secition 1",
      "description": "sec1 sec1 sec1"
    },
    {
      "title": "secition 2",
       "description": "sec2 sec2 sec"
    }
  ]
}
---
# {{title}}

{{#each sections}}
## {{this.title}}
{{this.description}}
{{/each}}

{{#each lists}}
* {{this}}
{{/each}}

テンプレート

※HTMLにビルドされたmarkdownは、contentsフィールドに格納されている

template.html

<html>
<head>
    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}">
</head>
<body>
{{{contents}}}
</body>
</html>

備考

metalsmith-in-placeとmetalsmith-layoutsは、metalsmith-templatesから分離したもの。
詳細：Process templating syntax in content files as well · Issue #35 · segmentio/metalsmith-templates

Metalsmithにて、Markdownをhandlebarsでビルドする