前回の投稿で、若者のための投資信託のすすめをリリースしたと書きましたが、このサイトは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のコンパイルもそれらのツールに任せることができますが、どこかのブログで書かれていましたが、管理が大変そうに思えました。
私は昔、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の設定を行っていきます。