ruby2.0上にnanocをインストールしたり設定したり | iii threetreeslight

June 10, 2013

ruby2.0上にnanocをインストールしたり設定したり

nanocを前々から利用しようと思っていた所、丁度静的ファイルをコンパイルしたりごにょごにょする必要があったので、環境構築から自動化まで色々仕込みました。

require

  • rvm 1.20.12
  • ruby2.0.0

えっrvm?rbenvじゃないの?とかは無しで。

nanocのインストール


とりあえず、他の環境を汚さないようにrvmでnanoc用gemsetを作る。

$ rvm use 2.0@nanoc --create

さて、nanocを入れて行きます。

参照:nanoc install

$ gem install nanoc

デモサイトの構築


$ nanoc create-site tutorial
     create  nanoc.yaml
     create  Rules
     create  content/index.html
     create  content/stylesheet.css
     create  layouts/default.html
Created a blank nanoc site at 'tutorial'. Enjoy!

おっ簡単に出来た。コンパイルしてみる

$ nanoc compile
Loading site data… done
Compiling site…
      create  [0.01s]  output/index.html
      create  [0.00s]  output/style.css

Site compiled in 0.08s.

viewを表示する。そのためにもadsf gem(Rackベースのファイルサーバ)が必要との事。

adsf (A Dead Simple Fileserver) is a tiny web server that you can launch instantly in any directory, like this:

adsf

$ gem install adsf
$ nanoc view
[2013-06-10 16:22:52] INFO  WEBrick 1.3.1
[2013-06-10 16:22:52] INFO  ruby 2.0.0 (2013-05-14) [x86_64-darwin12.3.0]
[2013-06-10 16:22:52] INFO  WEBrick::HTTPServer#start: pid=31370 port=3000

webrick立ち上がったし、localhost:3000にもアクセスできた。

軽く編集とかしてみる。

$ vim ./content/index.html
<p>This is a brand new paragraph which I've just inserted into this file! Gosh, I can barely control my excitement!</p>

$ nanoc compile
$ nanoc view

meta周りはymlで書かれていて、default.htmlでその変数引っ張っているのね。というわけで、tutorial通りindex.htmlをもいっちょ編集。

$ vim ./content/index.html
--- 
title: "My New Home Page"
--- 
$ nanoc compile

次はページの追加

$ nanoc create-item about
      create  content/about.html
An item has been created at /about/.

$ vim ./content/about.html
<h1>My cute little "About" page</h1>

<p>This is the about page for my new nanoc site.</p>
$ nanoc compile

なるほど。テンプレートエンジンについても、eRuby嫌だったらhamlやmastache使えるぜ!って書いてある。

これは後で設定しよう。

markdown


コンテンツについては、markdownでも書けるとの事。blogを作るのであればコレは嬉しい。

index.htmlをリプレイス

$ vim ./content/index.html
A First Level Header
====================

A Second Level Header
---------------------

Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.

The quick brown fox jumped over the lazy
dog’s back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

gemをインストールして、compileのRuleを修正

$ gem install kramdown
$ vim Rules
compile '/' do
  filter :kramdown
  layout 'default'
end

$ nanoc compile

ちゃんとcompileされ、htmlファイルが表示された。なるほど。

tagの設定


今度はタグの設定ね。ymlフォーマット部分に追加

$ vim content/about.html
tags:
  - foo
  - bar
  - baz

$ vim lib/tags.rb
def tags
  if @item[:tags].nil?
    '(none)'
  else
    @item[:tags].join(', ')
  end
end

$ vim layout/default.html
…
<p>Tags: <%= tags %></p>
<%= yield %>
…

タグちゃんと表示された嬉しい。でもtaggingはhelperあるって言われたので、helper設定

$ rm lib/tags.rb
$ vim lib/helper.rb
include Nanoc::Helpers::Tagging

$ vim layout/default.html
…
<p>Tags: <%= tags_for(@item) %></p>
<%= yield %>
…

$ nanoc compile

tagのハイパーリンク化も自動でやってくれるのね。 便利便利!

その他helperとかはnanoc api docsを参照すると乗ってます。

参考:nanoc tutroial

git, ruby, bundler辺りの設定


やっとこさnanocを理解したので、下ごしらえとしてgitでのバージョン管理や、rubyのバージョン固定、gem管理を設定します。

git

$ git init
$ vim .gitignore
    # For projects using nanoc (http://nanoc.stoneship.org/)

# Default location for output, needs to match output_dir's value found in config.yaml
output/

# Temporary file directory
tmp/

nanoc.gitignoreはgithubから拝借。

ruby

rubyのバージョンやgemsetを固定化するために.ruby系ファイルを設定

$ vim ./.ruby-version
ruby-2.0.0-p195
$ vim ./.ruby-gemset
nanoc

bundler

bundlerを使って、gemfileのバージョン管理

$ gem install bundler
$ bundle init
$ vim Gemfile
gem 'nanoc'
gem 'adsf'
gem 'kramdown'

$ bundle install    

ここまで整ったらコミット。

$ git add .
$ git ci -am "Initial Commit"

compile等の自動化


あとは面倒なコンパイルやページリフレッシュの作業をguardなどなどで自動化します。

autocompile

nanocの主たるcommandには、

  • compile : コンパイル
  • view : webサーバー起動
  • autocompile : コンテンツ変更を検出して自動コンパイル

って事だったので、とりあえずautocompileを叩くと

$ nanoc autocompile
WARNING: The `autocompile` command is deprecated. Please consider using `guard-nanoc` instead (see https://github.com/nanoc/guard-nanoc).

Captain! We’ve been hit!

Message:

LoadError: cannot load such file -- mime/types
Make sure the gem is added to Gemfile and run `bundle install`.

って怒られた。guuard使えって。

という訳でguardとguard-nanoc入れる

$ vim Gemfile
gem "guard"
gem "guard-nanoc"

$ bundle install
$ guard init nanoc
$ guard
$ vim comtent/about
<p>hogehoge</p> 

ok動いた。

P.S.


rack-livereloadが上手く動かなかったので悲しい。

後ほどhaml, sass, compass, less 周りは設定します

minifyやsprockets、herokuへのdeployまでやりたいところ。