Railsで使えるGem

Rubyで静的ページをジェネレート〜middleman

投稿日:

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで

middlemanもそんな静的なページのメジャーなジェネレータの1つ

middlemanの利点は次のようなものが考えられる

  • 日本語の公式ページがある
  • erb,coffeescript,scssなどrailsを使っていればなじみやすい感じ
  • マークダウンにも対応してる

ハローmiddleman

インストール

サイト作成

サーバ起動

screenshot

静的サイトのもとはsourceにあるので、index.html.erbをいじってみる

screenshot

ソースに書かれた—で囲まれた部分はフロントマターと言っていろいろな設定をyamlで書けるところ

titleのほかにlayoutなども指定できる

新しいページの作成は適当にabout.html.erbなど作成すれば、/about.htmlにアクセスできる

CoffeeScriptやSCSSをつかってみる

erbで慣れたヘルパを使って呼び出してみる

stylesheets以下にbase.css.scssを、javascripts以下にhello.js.coffeeを作ってみる

 

こうなる

screenshot

Railsのようにsprocketも標準で使えるのでlayout.html.erbなどで

application.css

application.js

でも同じ結果になる

middleman-livereload

middlemanapp.com/jp/basics/livereload/

middleman-livereloadは標準で読み込まれてるみたい

config.rbで次の行をコメントアウトすればOK

livereloadの使い方は、Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

middleman-blog

middlemanapp.com/jp/basics/blogging/

middleman-blogは公式の拡張機能でブログを作成するための構成とコマンドが付属している

インストール

ブログ作成

記事用ファイル作成

日本語だとエラーになるので、英語タイトルでファイルをジェネレートしてから、フロントマターのタイトルを変えてる

タイムゾーン設定

 

日本語url

middleman-blogではデフォルトで次のようなファイル名で記事を作れば

こんなurlになる

しかし、日本語タイトルにするとエラーが出てしまう

これは日本語ファイル名が扱えないためで

とか、適当な設定にしておけば日本語タイトルのまま日本語urlも扱える

ただ、middleman-blog articleコマンドで生成されるファイル名が {year}-{month}-{day}-.htmlという中途半端な感じになるのでどうしたらいいか検討中。今のところ手動でidを決めてリネームしてる。

なお、config.rbでactivate :blogのあとにactivate :directory_indexesを使えばきれいなurlになる

もちろん、ここでも日本語urlは問題なく使える

middleman-syntax

github.com/middleman/middleman-syntax

middleman-syntaxも公式の拡張機能でシンタックスハイライトが使える

Gemfile

bundle

設定

markdownで使うには。もしかしたらGemfileにredcarpetを足してるかも

そして、アクティベート。その他の設定は開発サーバで/__middleman/config/をみる

CSS

適当にcss.erbファイルを作って読み込めばOK

 

ただ、Twitter Bootstrapと一緒に使おうとするとpreタグの設定がかぶるので

cssで次のように指定した。あと暗めのテーマの場合はフォントカラーも手動で指定しないといけなかった

おおむねこんな感じになる

 

screenshot

Middleman Blog を Bourbon, Neat, and Bitters で styling したテンプレートを作りました

-Railsで使えるGem
-

執筆者:

関連記事

no image

Rails3.2でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …

Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現

前提 Railsのテーブル並び替えを実装する Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard 目次1 作戦(ストラテジー)2 have_contentの正規表現 …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …