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
-

執筆者:

関連記事

Rails3でECサイト構築8 都道府県の登録~spree

  都道府県の登録を忘れていた seedを追っていくとわかるのだけど、rake db:load_file[tablename.yml, dir]で登録できる サンプルは、spree_core …

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

  jQuery UIのプラグインdynatreeをRailsで使ってみた github.com/glebtv/dynatree-rails wwwendt.de/tech/dynatree …