metalsmith – シンプルな静的サイトジェネレーター

metalsmith という静的サイトジェネレーターを見かけたのでメモ。

http://www.metalsmith.io/

EVERYTHING IS A PLUGIN

すべてがプラグインである。

このキャッチフレーズに惹かれてちょっと試してみました。
金物細工師って意味も好きですね。
何よりメタル。
以前メタルにハマっており、slipknotとか、Dragon Forceとかメロメロでした。

そんなmetalsmithですが、
ベースはnode.jsで書かれております。

1. ファイル階層を準備します。

非常にシンプルな静的サイトジェネレーターのため、ファイル構造などは自信で設定します。

今回は下記の階層を想定し、jekyllみたいなことをやってみます。

demo /
    _layouts/
        index.html
    _posts/
        post01.md
    _site/

_layout フォルダにはラップするhtmlをいれ、
_posts フォルダにはマークダウンを記事として保存します。
_site フォルダには構築後のhtmlファイルが入るとします。

2. package.jsonの用意

まずは package.json を書きます。
metalsmith本体と、プラグイン郡を用意します。

{
  "name": "metalishihara",
  "private": true,
  "dependencies": {
    "metalsmith-watch": "0.0.2",
    "metalsmith-sass": "0.1.1",
    "metalsmith-drafts": "0.0.1",
    "metalsmith-templates": "^0.1.0",
    "metalsmith-markdown": "^0.2.1",
    "metalsmith-permalinks": "^0.1.0",
    "swig": "^1.3.2",
    "metalsmith": "^0.2.3",
    "metalsmith-sass": "~0.1.1"
  }
}

そのままコマンドでインストール。

$ npm install 

これで、metalsmithをはじめとするパッケージ郡がインストールされます。

3. metalsmith.jsonの用意

metalsmithでは、javascriptを書いて構築する方法と、
metalsmith.json という設定ファイルを作り、コマンドから構築する方法の2つがあります。
今回はめんどくさいので
同じ階層に metalsmith.json を用意します。

{
  "source": "./_posts",
  "destination": "./site",
  "metadata": {
    "title": "hogehogehoge",
    "description": "hogehogehogehogehogehoge!"
  },
  "plugins": {
    "metalsmith-watch": "*.md",
    "metalsmith-drafts": true,
    "metalsmith-markdown": true,
    "metalsmith-sass": {
        "outputStyle": "expanded"
    },
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-templates": {
      "engine": "swig",
      "directory": "_layouts"
    }
  }
}

jsのテンプレートエンジンもswigとかhandlebarsjsとかお好きなのをどうぞ。

まぁ、デモなのでいろいろ適当に書いていきましょう。

_layouts/post.html

<html>
<head>
  <title>これは投稿です。</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <time>{{ date | date('Y-m-d') }}</time>
  {{ contents | safe }}
</body>
</html>

_posts/post01.md

---
title: 最初の投稿
date: 2012-08-20
template: post.html
---

# これは最初の投稿です。

* これはリストですこれはリストです
* これはリストですこれはリストです
* これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです

    * マークダウンでかけます。
    * 自動でコンパイルもかけてくれます。

そして、

$ node node_modules/.bin/metalsmith

というコマンドを打つと、
_siteフォルダ内に書き出ししてくれます。

…… 。
上記のほとんどは examples内にまとめられていますので、参考にしてください。

感想

node.jsでのコーディングにおいて参考になるかなと思いました。
( metalsmith.ioのソースも公開されています。 )

バリバリコード書いて、カスタマイズするにはむいているのかなと思いますが、敷居は少し高いのかなと思いました。

これからですかね。

1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です