静的なページ作成にはmiddlemanがいいかもしれない

Pocket
[`evernote` not found]

mid

先日ruby製の静的ページジェネレータjegyllのご紹介をしましたが、静的なページの作成だったらmiddlemanの方がいいよというご指摘をいただき、試してみましたので、ご紹介します。

>middleman

middlemanもrubyで出来ている静的ページジェネレータです。
jegyllとの大きな違いは、システムに依存せずに、静的ページを生成してくれることだと思うのですが(違っていたらご指摘ください)
jegyllの場合、静的なページを作ることはできますが、公開する場合、サーバーにもjegyllがインストールされていないとだめだったような感じです。(すみません、詳しく調べていません)
なので、公開先としてはgithub pagesとか特殊な環境に限定されてしまうようです。

・・・歯切れが悪い説明だな。こりゃ

その点milldemanだと、build(いわゆるコンパイルです)すると、完全な形で静的なhtmlを生成してくれるので、そのままFTPとかでアップすればOKということですね。

僕がmiddlemanがいいなと思ったわけ

htmlをパーツに分けてコンポーネント化できる。

わざと難しく書きました。
つまりは、headerとかsidebarとか全ページ共通の部分を一つの塊として管理できるということです。

CMSでは、おなじみの処理ですね。

これができると、かなり便利です。個人的な話であれですが、このコンポーネント化をしたいがために、わざわざCMSでサイト構築をしていたりします。
これができれば、ドリでサイト定義して全ページ置換で修正なんて手間も省けるようになります。

テーマを複数作れる。

コンポーネント化に近いかもしれませんが、テーマファイルも自由に作成できます。
例えば、商品ページ用のテンプレート、店舗紹介用のテンプレートみたいな形で必要なテーマを用意しておけば、
流し込み作業も楽になります。

この2つにつきますね。
まだ実務で使っていませんが、使うのが楽しみです。

導入方法

僕が紹介するまでもありませんが、備忘録としてmiddlemanの導入方法をまとめておきます。

rubyはインストール済みという前提です。

middlemanのインストール
(sudo)gem install middleman

ダダダだ-っと文字が流れてきてエラーにならなければこれでOKです。

middlemanのプロジェクト作成

これもコマンドラインでの作業です。
適当なディレクトリに移動して

middleman init [プロジェクト名]

これでmiddlemanのプロジェクトを生成してくれます。
(macの場合システムのパスワードを聞かれます)

このプロジェクト作成時にオプション設定をすることができます。
詳しくはヘルプを見てもらうといいかと思います。

middleman init --help
テンプレート

middlemanにはいくつかのテンプレートが用意されています。default/html5/mobileなど
これらを利用する場合は

middleman init [プロジェクト名] --template=html5

のように指定します。

ちなみに、理由は分かりませんが、僕の環境だとdefaultでプロジェクトを生成するとbuildしたhtmlからcssやjsへのパスがうまく通っていないです。
他のテンプレートなら問題ないのですが…
詳しく検証していないのですが、もしかしたらテンプレートはhtml5とかのほうがいいかもしれません。

css/js/imagesディレクトリの名称変更
--css-dir= 

でcssディレクトリの名称を変更できます。
普段使っているディレクトリ名があれば、ここで設定変更するといいです。

プロジェクトが生成されたら、ローカル環境でテストしてみます。

コマンドラインでプロジェクトのディレクトリに移動して

middleman

これでローカルサーバーが起動して、サイトが閲覧できるようになります。

ブラウザでlocalhost:4567にアクセスするとサイトが見れるはずです。

ローカルサーバーの停止はctrl+Cです。

サイトのbuild(コンパイル)

同じくコマンドラインで

middleman build

これで、サイトを生成してくれます。
プロジェクトディレクトリの中にbuildディレクトリができているはずです。
この中のhtmlファイルを開くと、サイトが閲覧できます。

こんな感じで、middlemanでサイトが生成できました。

DEMO(かなり地味なデモですね)

次は、以前作ったモバイル用CSSワークフレームを使って、簡単なモバイルサイトを作ってみたいと思います。(公開日未定です…)

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。