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
-

執筆者:

関連記事

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …

RailsでReactコンポーネントをつかう

By: justine warrington – CC BY 2.0 目次1 React on rails2 インストール3 react on railsで生成されるファイル4 mater …

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

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

Rails5でコントローラーの記述を省略~inherited_resources

By: Simon Matzinger – CC BY 2.0 目次1 inherited_resources2 Gemfile3 使い方 inherited_resources inhe …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …