静的サイトジェネレータ「Metalsmith」と、テンプレートエンジン「Swig」で効率化＆爆速コーディング！
先日の名古屋遠征で教えてもらった「Metalsmith」。
（あ、名古屋のことRiot.jsの件しかブログに書いてない(；´Д｀)）
静的サイトジェネレータっていうのは初めて聞きましたが、、、
使い始めると、これは辞められなさそうです( 0w0)ﾉ ｳｪｰｲ
ハムさんありがとう！
詳しくは、ハムさんのサイトを参考にどうぞ！
- Metalsmithのコンセプト
- package.json を作成
- npm install
- フォルダ構造
- metalsmith.json を作成
- テンプレートファイルを作成
- 外部読み込み用のデータを作成
- コンパイル
- さいごに
下記は、自分への忘備録を兼ねて。。。
Metalsmithのコンセプト
サイトには、こう記されています。
EVERYTHING IS A PLUGIN
とあるように、プラグインがいろいろあります。
まだ、使いこなせる気がしませんが(；´Д｀)
気になる方は、サイトをチェックしてみてください。
では、早速触ってみましょう。
package.json を作成
ようやく、黒い画面ともお友達になりつつあります(๑´ڡ`๑)
ということで、、、
まずはおなじみのpackage.jsonの作成から。
{
"devDependencies": {
"metalsmith": "~1.0.1",
"metalsmith-templates": "~0.6.0",
"swig": "~1.4.2"
},
"private": true
}
ここで、Swigって出てきてます。
Swigっていうのは、どうやらテンプレートエンジンと呼ばれるもののようです。
http://paularmstrong.github.io/swig/
SwigとMetalsmithを組み合わせると最強！ということを、ハムさんから教えていただきました。
npm install
続いて、下記コマンドで、プラグインを一括でインストール。
便利っすね、これ。
npm install
フォルダ構造
今回、僕の中で衝撃を受けたのが、フォルダ構造でした。
何かというと、
- 呼び出し元（ソース）のフォルダ：_source
- テンプレート用のフォルダ：_tpl
- 吐き出し用のフォルダ：htdocs（コンパイル時に生成されます）
と、3つのフォルダの概念があるのだと。。。
今までは、trunkの中で普通に展開してて、sassファイルの置き場所とかによく困ってたんですけど。
なるほど、こういう考え方をしてるのね。ということを学ばせていただきました。
/root/ ┣ /_source/ ー呼び出し元（ソース）のフォルダ ┃ ┃ /company/ ー階層構造も作れます ┃ ┃ ┗index.html ┃ ┗index.html ┣ /_tpl/ ーテンプレート用のフォルダ ┃ ┣default.html ┃ ┣footer.html ┃ ┗header.html ┣ /htdocs/ ー吐き出し用のフォルダ（コンパイル後に生成） ┃ ┃ /company/ ┃ ┃ ┗index.html ┃ ┗index.html ┣ metalsmith.json ーmetalsmithの設定ファイル ┗ package.json ーもろもろ設定ファイル
フォルダ構造のキャプチャも載せておきます。
ここから、いろいろ自分用にカスタマイズしていこう。
動くものができたら、あとの応用は自分次第ですからね。
オレオレ仕様に染めていきます。
あと、呼び出し元のフォルダで階層構造を作ると、
吐き出されるHTMLも、階層構造を保ったまま出力してくれる。
この機能もありがたい。
metalsmith.json を作成
つづきまして。
metalsmith.json の設定。
{
"source": "_source", //外部読み込み用フォルダ
"destination": "htdocs", //出力先フォルダ
"plugins": {
"metalsmith-templates": {
"engine": "swig", //テンプレートエンジン
"directory": "_tpl" //出力先フォルダ
}
}
}
※実装時はコメント外してくださいね。エラーになります。
こちらのファイルの内容としては、ファイルの吐き出し先や、テンプレートフォルダの指定などですかね。
いろいろ拡張できるようなので、今後もいろいろ触ってみようと思います。
（今の段階では、呪文のようにコピペ！）
テンプレートファイルを作成
もろもろ設定ファイルができたら、あとはテンプレートをつくります。
書き方は、こんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> </head> <body> <!-- ヘッダー読み込み --> {% include 'header.html' %} <h1>{{ title }}</h1> <!-- コンテンツ読み込み --> {{ contents | safe }} <!-- フッター読み込み --> {% include 'footer.html' %} </body> </html>
なるほどですね。
ヘッダーやフッターなども、インクルードできますね！
外部読み込み用のデータを作成
テンプレートができたら、読み込ませる用のデータをつくります。
書き方は、こんな感じ。
--- template: default.html title: テスト --- <p>本文テスト</p>
ここに、コンテンツの内容を記載していきます。
テンプレートと、コンテンツが分離できるので、管理がしやすそうです。
コンパイル
設定ファイルを作った！
テンプレートも作った！
読み込ませるデータも作った！
そしたら、あとはコンパイル！
下記の呪文をどうぞ。
node node_modules/.bin/metalsmith
これで、めでたく「htdocs」フォルダが生成されて、htmlファイルが吐き出されていることでしょう。
さいごに
ひとまず、動くことを確認できたので、カスタマイズしていきますー。
ハムさん、ありがとう！
（って、何回言うてんねん。。。）
おわり。
