前回の投稿で、若者のための投資信託のすすめをリリースしたと書きましたが、このサイトはCMSとか使っていないただのHTML5,JS,CSSのみで作られています。

そのように作った理由ですが、html,js,cssのみで作っているサイトは負荷に強いし軽いからです。数年前まではちょっとしたサイトだったらWordPressやMODxを使って作ったほうが早いし楽だと思っていたのですが、今は違います。というのも、WordPressやMODxはデータベースが必須だしPHPが動く環境も必要だからです。今頃だとStaticPressというのもあるらしいですが。今は、私はmiddlemanを使っています。

middlemanとは

middlemanはRuby製の静的サイトジェネレータです。Railsで開発をしている人たちには親しみやすいツールだと思います。利点はいくつもあります。

• テンプレートエンジンとして、haml,slim,erbなどが使える
• htmlのパーツ化ができる
• 初期設定でCoffeeScriptやSassが使える
• Railsのように自動コンパイルされる
• LiveReload機能も使うことができる
• minifyも簡単に行える

これらの機能が、最初からほぼ使えます。config.rbを多少修正すると、もっと便利に使えます。

JS界隈ではgrunt,gulpなどが自動化で有名なところで、AltJSやSassのコンパイルもそれらのツールに任せることができますが、どこかのブログで書かれていましたが、管理が大変そうに思えました。

Grunt/Gulpで憔悴したおっさんの話

私は昔、yeomanでAngularJSを使ってサイト作るんだー！と思ってやろうとしたことがあるんですが、正直面倒になってしまってやめました…。Railsに比べると、gruntで自動化を設定していくのがしんどかったからです。そこで、Railsのように書ける静的サイト作る用のツールないのか！？と思って探したら見つかったのがmiddlemanです。

実は以前にmiddlemanは紹介しています。

Ionic Framework & Cordova & Middlemanでやってみようと思う。

middlemanのインストールから動かすところまで

middlemanはgemなので、Rubyがあればすぐにできます。
ちなみに私の環境はMac(Yosemite)なので、他の環境での動作はわかりません。
私はRubyはRVMでインストールしています。Rubyのバージョンを変えたりする場合は、RVMをインストールしてもいいと思いますが、MacのデフォルトのRubyでも問題なく動作するとは思います。

インストール

ターミナルから以下を入力します。

gem install middleman

これだけです。ただ、これだとおそらくmiddleman 3系がインストールされます。
今回は私はmiddlemanの4系をインストールしたので、以下のようにしています。

gem install middleman -v 4.0.0.alpha.6

middleman 3系と4系では結構違うようなので、α版とはいえ、4系を使ってもいいかなと思います。

プロジェクトの作成

ターミナルで、以下を入力します。my_projectはプロジェクト名なので変更はご自由に。

middleman init my_project

これで、今のディレクトリにmy_projectディレクトリが作られました。

middlemanの起動

middlemanの起動はめっちゃ簡単です。
以下をターミナルで入力します。

middleman

これだけです。これでWebサーバーが立ち上がり、http://localhost:4567にアクセスすると、my_projectを見ることができるようになりました。

プロジェクトのビルド

ここでいうビルドとは、middlemanで作っているサイトを、html,js,cssとして出力するということです。haml, coffeescirpt, sassで作っていたサイトがこれだけで静的なファイルになるので、ものすごく便利です。作られたファイルは、buildディレクトリ以下にまとめられるので、あとはこれらをインターネット上のサーバにポイッとアップロードすれば完了です。

ここまでですと、middlemanは動かせたけれど、よくわからん！ということになりそうなので、次回はmiddlemanの設定を行っていきます。