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からWindows Installerをインストールして、パスを通す。
コマンドプロンプトで以下を確認できればOK.

>node -v
v0.12.0

>npm -v
2.6.1

gitコマンドが使える環境の準備

git for Windowsからダウンロード。
インストール中に、環境変数にPathを追加するか聞かれるので、「Run Git from the Windows Command Prompt」を選択。
詳細は、こちらのブログが丁寧なので参照のこと。
コマンドプロンプトで以下を確認できればOK.

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

サンプルをビルド

公式のサンプルは古くて動かないらしいので、
色々と最新にした、シンプルな例を作ったので、こちらを利用する。
metalsmith-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でページリストを作るのに利用。なにかと使う
metalsmith-markdown	markdownのparserプラグイン。
metalsmith-permalinks	permalinkを貼るのに利用。 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として利用される。

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
Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO
metalsmith - シンプルな静的サイトジェネレーター - Layman's Web Creation.