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

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …

no image

railsでdocxを生成する動画

  知り合いに試しに使ってもらうのに動画を作成しました

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …