目次
metalsmith という静的サイトジェネレーターを見かけたのでメモ。
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_16_at_0_13_09.png")
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 という設定ファイルを作り、コマンドから構築する方法の２つがあります。
今回はめんどくさいので
同じ階層に 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フォルダ内に書き出ししてくれます。
![](\"http://web-layman.com/content/images/2014/Mar/_2014_03_16_at_1_06_26.png")
…… 。
上記のほとんどは examples内にまとめられていますので、参考にしてください。
感想
node.jsでのコーディングにおいて参考になるかなと思いました。
( metalsmith.ioのソースも公開されています。 )
バリバリコード書いて、カスタマイズするにはむいているのかなと思いますが、敷居は少し高いのかなと思いました。
これからですかね。
最新の投稿
- 2019.01.12未分類Google Mapの代替手段
- 2015.11.14Sketch 3Sketch Tips – オフセットを保持したまま複製
- 2015.10.31Sketch 3Sketch Tips – 簡単に表組みする方法
- 2015.10.25メモMac から Mac へ。移行した時の注意点メモ。
