プログラム音痴がMetalsmithを試してみた

静的サイトジェネレーターは有名なものしか知らなかったが、かなりの数が公開されているようだ。
https://staticsitegenerators.net/
https://www.staticgen.com/

Metalsmith（An extremely simple, pluggable static site generator.）というのが人気急上昇中のようなので、試してみた。
Hexo同様、プログラミング言語がJavaScriptなので、早さも期待できる。

テストするにあたり、下記サイトを参考にさせて頂いた。
Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO
metalsmith - シンプルな静的サイトジェネレーター - Layman’s Web Creation.

先ずはpackage.json を用意して導入するプラグインを指定、一括インストールするのが良いようなのだが、本体やプラグインのバージョンがよく分からない。
なのでmetalsmith-testという作業フォルダを作り、そこで端末を開いて一個一個インストールした。

~/metalsmith-test$ npm install metalsmith
~/metalsmith-test$ npm install metalsmith-templates
~/metalsmith-test$ npm install swig
~/metalsmith-test$ npm install metalsmith-markdown
~/metalsmith-test$ npm install metalsmith-permalinks
~/metalsmith-test$ npm install metalsmith-sass
~/metalsmith-test$ npm install metalsmith-watch
~/metalsmith-test$ npm install metalsmith-drafts

次に作業フォルダ内にmetalsmith.jsonを作成する必要があったが、これはjekyllの構成に倣ったexampleのものをほぼそのまま使わせてもらった。
https://github.com/segmentio/metalsmith/blob/master/examples/jekyll/metalsmith.json

{
  "source": "./_posts",
  "destination": "./_site",
  "metadata": {
    "title": "My Jekyll-Powered Blog",
    "description": "My second, super-cool, Jekyll-powered blog."
  },
  "plugins": {
    "metalsmith-drafts": {},
    "metalsmith-markdown": {},
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-sass": {
        "outputStyle": "expanded"
    },
    "metalsmith-templates": {
      "engine": "swig",
      "directory": "_layouts"
    }
  }
}

_layoutsフォルダを作り、そこへ下記内容のpost.htmlを配置。

<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>プログラム音痴がMetalsmithを試してみた</h1>
  <time>2014-11-28</time>

</body>
</html>

_postsフォルダを作り、テスト用の記事test-post-1.mdを配置。

---
template: post.html
title: テスト投稿１
date: 2014-11-28
---
##今日の天気
本日は晴天なり。

node node_modules/.bin/metalsmithとコマンドを打つと、自動的に_siteフォルダ、その下にtest-post-1フォルダ、その中にindex.htmlが生成された。

<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>テスト投稿</h1>
  <time>2014-11-28</time>
  <h2 id="-">今日の天気</h2>
<p>本日は晴天なり。</p>

</body>
</html>

ローカルホスト上でプレビューを可能にするプラグインmetalsmith-serveというのがあったのでインストールしたが、どう使えばいいのかよく分からない。

metalsmith.jsonの"plugins":の箇所に無理やり

    "metalsmith-serve": {
      "port": "8081",
      "verbose": "true"
    }

と加えてみたら、node node_modules/.bin/metalsmithのコマンドで、生成と共にローカルホストが立ち上がった。
ブラウザでhttp://localhost:8081/test-post-1/にアクセスすると、CSSは当たっていないが表示はされた。

たぶん正しい使い方ではないのだと思うが、プラグインの説明の

var metalsmith = require('metalsmith');
var serve = require('metalsmith-serve');

metalsmith(__dirname)
  .use(serve())
  .build();

というのを何処で設定するのか分からない。

トップページの生成の仕方やCSSの当て方なども勉強する必要がありそう。
それに、新規記事作成やgenerate、プレビューなど、それぞれコマンドに割り当てて操作したいところ。

Metalsmithのサイトの上方に記載してある

Metalsmith(__dirname)
  .use(drafts())
  .use(markdown())
  .use(permalinks('posts/:title'))
  .use(templates('handlebars'))
  .build();

というのも、いったいどこの記載のことなんだか。

「Everything is a Plugin」と謳われているようにカスタマイズ性は高そうだが、Jekyllの使い方が分からずOctopressに移った自分のようなプログラム音痴には、少々ハードルが高そうだ。
静的サイトジェネレーターの仕組みを勉強するには良さそうだが。

表示

プログラム音痴がMetalsmithを試してみた

Comments