nanoc導入メモ 1/5 「Getting Started」編
nanocはRubyで書かれた静的CMS(Content Management System)です。HTMLの生成をローカルで行い、サーバ側には静的HTMLのみを配置します。
似たようなツールで有名どころとしてはOctopressがありますが、nanocの方がより柔軟にカスタマイズできそうな印象だったのでこちらを選びました。
ちなみに、Ruby製静的CMSは他にもいくつかあるようです。
それでは、まずは公式のGetting Startedから要点をまとめて紹介します。
nanocのインストール
nanocを使うためにはRuby 1.8.6 以上(1.9含む)とgemがインストールされている必要があります。以下のコマンドでそれぞれバージョンが表示されることを確認します。
> ruby -v
> gem --version
nanocのインストールはgemで一発です。
> gem install nanoc
> nanoc --version
Getting Started
Requirements
Markdownの変換に使用するkramdownと、サイトのプレビューに使用するadsfをそれぞれgemでインストールします。
> gem install kramdown
> gem install adsf
Creating a Site
tutorialサイトのひな形を作成します。以下のコマンドでカレントフォルダに「tutorial」フォルダが作成され、その中にひな形のファイルが生成されます。
> nanoc create_site tutorial
標準のファイル構成は以下のようになっています。
content/ : コンパイル元となるコンテンツ
layouts/ : レイアウト
lib/ : コンパイル時に読み込まれるヘルパ等のカスタムコード
output/ : コンパイルされたデータ
tmp/ : コンパイル用に使用される一時領域
config.yaml : サイト設定
Rules : コンパイル、ルーティング、レイアウトのルール
Compiling the Site
作成されたtutorialフォルダに移動し、tutorialサイトをコンパイルすることで、outputフォルダの中にHTMLが生成されます。
> cd tutorial
> nanoc compile
ローカルサーバを起動し、ブラウザから「http://localhost:3000/」にアクセスすると表示が確認できます。
> nanoc view
初期表示はこんな感じ。なお、標準でcssが絶対パスで指定されているため、直接htmlを開いた場合はスタイルシートが適用されずに表示されます。
ローカルサーバはCtrl+c→yで停止できます。
Editing the Home Page
「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
Adding a Page
ページを追加するコマンドとして「create_item」が用意されています。このコマンドは単純に「content」フォルダ配下にテキストファイルを作成するだけなので、手動でテキストファイルを作成しても構いません。
> nanoc create_item about
> nanoc compile
> nanoc view
Customizing the Layout
作成した「content/about.html」冒頭のメタデータセクションに以下を追加します。メタデータセクションはYAMLのフォーマットに従って記述してください。
author: "John Doe"
続いて「layouts/default.thml」のbody内に以下を追加します。
<% if @item[:author] %>
<p>This page was written by <%= @item[:author] %>.</p>
<% end %>
コンテンツで設定した属性値をレイアウトで使用できることが分かります。
> nanoc compile
> nanoc view
Writing Pages in Markdown
「content/index.html」の本文を以下のMarkdown書式の内容で置き換えます。
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
「Rules」ファイルの「compile '*' do … end」より前に以下のコードを追加します。
compile '/' do
filter :kramdown
layout 'default'
end
これによりトップページのみにMarkdownのフィルタが適用されます。
> nanoc compile
> nanoc view
Writing some Custom Code
「content/about.html」のメタデータセクションに以下を追加します。
tags: [foo, bar, baz]
「lib/default.rb」に以下のコードを記述します。
include Nanoc::Helpers::Tagging
「layouts/default.html」の「<%= yield %>」行の上に以下のコードを追加します。
<p>Tags: <%= tags_for(@item, {:base_url => "/tags/"}) %></p>
設定したタグが表示されることを確認します。
> nanoc compile
> nanoc view
おわりに
「Getting Started」編は以上です。このあとは「Basic Concepts」編と「カスタマイズ」編を予定していますので興味のある方は引き続きお付き合い下さい。
連載一覧
- nanoc導入メモ 1/5 「Getting Started」編
- nanoc導入メモ 2/5 「Basic Concepts」編
- nanoc導入メモ 3/5 「カスタマイズ」編
- nanoc導入メモ 4/5 「Markdown独自拡張」編
- nanoc導入メモ 5/5 「運用効率化バッチ」編
