個人サイトでも作ろうかなーと思って、
でもWordPressやるのはコスト高いし、ブログはちょっと違うような気もするし・・、
HTMLをゴリゴリ書いていくのも、slimになれたおじさんにはストレスがマッハなので、いい方法がないか調べてたら middleman ってものがあった。
middleman とは
middleman は静的サイトをRubyで作るためのフレームワークです。
RubyOnRails と似ていて、Railsを知っている人には使いやすいものになってます。
■ middlemanの雑イメージ
運用的には、Rubyで書いたファイルをHTMLにビルドして、それをサーバにアップロードする感じですね。
middleman のええとこ
- Rubyが使える
- slimが使える（gem使えるので）
- 共通テンプレートが作れる
- includeとかできる
- データファイル（yaml, json）の読み出しも簡単
すごく RubyOnRails の走り感があって、RubyOnRailsの学習前段階で使えそうな感じ。
Rails 難しいよー＼(^o^)／うわぁぁぁってなってる人は、middleman から入ってみてはどうでしょうか。
インストール
Node.js と Ruby をインストール
この辺は割愛します。middleman をインストール
$ gem install middleman
プロジェクト作成
- middleman のプロジェクト作成
$ cd [作業したいディレクトリ]
$ middleman init [プロジェクト名]
プロジェクトが出来ましたね。はい、次はフォルダ構成を見てみましょう。
■ フォルダ構成
Rails を小さくした感じ。ファイルやフォルダ数が少なくて、とてもシンプルです。
サーバ起動
サーバ起動も出来ます。
ただし、Railsに比べたら読み込みが遅い。
- サーバ起動
$ cd [プロジェクト名]
$ middleman server
- http://localhost:4567 にアクセスするんだ
■ ドン!!
このページが見えたらOKです。あとは、自由にカキカキしていきましょう。
デプロイ
- ビルド
$ middleman build
プロジェクトのフォルダ内のbuildフォルダを確認してください。
htmlファイルが出来てますね。あとは、これをサーバにアップロードしましょう。
- デプロイ
環境によってご自由に。
AWS S3の静的サイトホスティング とか、Firebase Hosting がおすすめ。
おまけ（middlemanの使い方）
部分テンプレートの挿入
// Railsの書き方
= render "menu"
// middlemanの書き方
= partial "menu"
Railsと書き方が違って、戸惑ったので注意！！
dataの使い方
例）名前のリストを表示する場合
- user_name: hoge
mail_address: hoge@mail.com
age: 30
- user_name: fuga
mail_address: fuga@mail.com
age: 45
ol
- data.users.each do |user|
li = user.user_name