Metalsmith(静的サイトジェネレーター)の導入

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

# 環境構築
##用意するもの
* gitコマンドが使える環境
* node/npmコマンドが使える環境

マカーは簡単に出来ると思うので、Windows向けに解説する。
### Windowsで環境構築
ここではコマンドプロンプトで紹介するが、cygwinやgit bashやpowershellなどは使う場合は、適切に変換して読むこと。
#### node/npmコマンドが使える環境の準備
[Nodejs](https://nodejs.org/download/)からWindows Installerをインストールして、パスを通す。
コマンドプロンプトで以下を確認できればOK.

```
>node -v
v0.12.0

>npm -v
2.6.1
```

#### gitコマンドが使える環境の準備
[git for Windows](https://msysgit.github.io/)からダウンロード。
インストール中に、環境変数にPathを追加するか聞かれるので、「Run Git from the Windows Command Prompt」を選択。
詳細は、[こちらのブログが丁寧なので参照](http://opcdiary.net/?page_id=27065)のこと。
コマンドプロンプトで以下を確認できればOK.

```
>git --version
git version 1.9.5.msysgit.0
```

# サンプルをビルド
[公式のサンプル](https://github.com/segmentio/metalsmith/tree/master/examples/static-site)は古くて動かないらしいので、
色々と最新にした、シンプルな例を作ったので、こちらを利用する。
[metalsmith-simple-example](https://github.com/maruLoop/metalsmitth-simple-example)
GitHub-Pagesで動いているものも見えるようにした。
http://maruloop.github.io/metalsmith-simple-example/build/
## サンプルの動かし方

```
# git cloneする
git clone https://github.com/maruLoop/metalsmith-simple-example.git

# metalsmith-simple-exampleに入る
cd metalsmith-simple-example

# node-modulesのインストール
npm install

# (Windowsのみ) metalsmithをglobalにインストールする
npm install -g metalsmith

# ビルド
##(Windows以外)ビルド
node node_modules/.bin/metalsmith

##(Windowsのみ)globalのmetalsmithを使ってビルド
metalsmith

```

これで、buildディレクトリ以下に生成される。

## サンプルの解説
### node-modules
|名前|説明|
|----|----|
|metalsmith|metalsmith本体|
|handlebars|handlebars.js。テンプレートエンジンに利用|
|metalsmith-collections|今回は[index.html](http://maruloop.github.io/metalsmith-simple-example/build/)でページリストを作るのに利用。なにかと使う|
|metalsmith-markdown|markdownのparserプラグイン。|
|metalsmith-permalinks|permalinkを貼るのに利用。<br>posts/first-post.mdがビルド後、http://maruloop.github.io/metalsmith-simple-example/build/posts/my-first-post/ というURLになったのはこれのおかげ。
|metalsmith-templates|handlebarsを利用して、テンプレートをビルドするのに利用|

### ディレクトリ解説
ディレクトリ構成は自由に変更が出来る。
今回はMetalsmithのデフォルトの構成を利用した。

|ディレクトリ|説明|
|---|-----|
|src|markdownなどのソースファイルを置く|
|templates|テンプレートファイルを置く|
|build|ビルドされた生成物が置かれる|

### metalsmith.json
ここで使うプラグインやオプションなどを指定する。

```metalsmith.json
{
  "metadata": {
    "title": "My Blog",
    "description": "My second, super-cool blog."
  },
  "plugins": {
    "metalsmith-collections": {
      "posts": {
        "pattern":"posts/*.md"
      }
    },
    "metalsmith-markdown": {},
    "metalsmith-permalinks": {
      "pattern": "posts/:title"
    },
    "metalsmith-templates": {
      "engine": "handlebars"
    }
  }
}
```

このjsonが内部的には、以下のようなjsとして利用される。

```js
Metalsmith(__dirname)
  .use(markdown())
//..略
  .use(templates('handlebars'))
  .build(function(err) {
    if (err) throw err;
  });
```

handlebarsテンプレートで、独自にヘルパー作ったりしない限り、metalsmith.jsonで十分。
逆に独自ヘルパーなど利用したい場合は、metalsmith.jsonではなく、jsを直接作った方がよい。

# 参考になる日本語ドキュメント
[静的サイトジェネレータMetalSmith - I am Bad at Math](http://d.hatena.ne.jp/badatmath/20140426/1398495275)
[Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO](http://h2ham.net/metalsmith-static-site-generator)
[metalsmith - シンプルな静的サイトジェネレーター - Layman's Web Creation.](http://web-layman.com/metalsmith-simple-static-site-generator/)