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
-

執筆者:

関連記事

RailsでECサイト構築5 プロモーションを試す~spree

  spreeをインストールするとspree-promoというエクステンションが含まれている これを使うといろいろな販売企画をすることができる 管理画面から適当に作成してみる 今回は特定の商 …

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …

Ubuntu Server 12.04.1にいま流行のDiscourseをインストールしてみた

By: Wonderlane – CC BY 2.0 目次1 はじめに2 環境3 インストール4 情報 はじめに すでにGitHubのトレンドRepoでスター数がTwitterのFligh …

連続的な位置情報の取得とHerokuへのアップ~HTML5 Geolocation API

  目次1 連続的な位置情報の取得2 heroku3 結果 連続的な位置情報の取得 連続的な位置情報の取得はこんなかんじで書いてみた [crayon-594e8501cbdae7863418 …

今度こそRails3.2からdocxを生成する

  前提 Rubyからdocxを生成する 前回、イキオイアマって自分でdocxを生成する簡単なライブラリを作ってしまった.(なんて車輪の再発明 今回はこれをRailsから利用してみる. 目次 …