Entries

スポンサーサイト

カテゴリ:スポンサー広告
更新日:--------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

nanocをインストールしてみた

カテゴリ:コンピューター
タグ: nanoc 
更新日:2011-10-17
nanocをインストールしてみたのでメモ。

> 静的HTMLファイルを生成するCMSツールってないかしらん?

とりあえず、いけそうな感じ。

piapiacの場合、フォルダーに日本語を使う必要があって、Backlogのsubversionにチェックインしようとするとエラーになっちゃうんだけど、これならその問題が回避できるので、ドキュメントも構成管理に含められそうだ。

Rubyのインストール

nanocはRubyを使うので、まずはRubyのインストール。Rubyのサイトに行ったら、Ruby Installer for Windowsというのがあったので、それをつかう。

> http://rubyforge.org/projects/rubyinstaller/

最新版の1.9.2-p290だったけど、gemを使ってnanocをインストールする時にエラーになる。

> nanocでつまづいた所まとめ - eup

Ruby1.9.2の文字コードに関する不具合 Windows31J関連の不具合があるらしく(詳しくは知りません)度々エラーが出ていたので仕方なく1.8シリーズの安定版1.8.7を使いました。 新しいバージョンの1.9.3では改善されているらしいのですが、まだテスト中とのことで知識がない私にはインストールが困難だったので、1.9.3が正式リリースされるまでは1.8.7を使うと良いでしょう。

One-Click Installer の「ダウンロード」のリンク先から「rubyinstaller-1.8.7-p330.exe」をダウンロードした。

ダウンロードしたexeを起動してインストールする。インストール場所は初期値のまま、「Add Ruby executables to your PATH」と「Associate .rb and .rbw files with this Ruby installation」をチェックした。

nanocのインストール

nanocは、Rubyのgemを使えばインストールできる。「Ruby Installer for Windows」には、gemが含まれているので、コマンドラインで以下のコマンドを実行する。
> gem install nanoc
インストールガイドには、以下も入れたほうがいいよ、とあったのでインストールしておく。
> gem install win32console
> gem install kramdown
> gem install adsf


nanocによるサイト構築の手順

コマンドラインで以下を実行するとカレントディレクトリに<name>フォルダーができる。作成後、カレントディレクトリを移動する。以後、作成したディレクトリをカレントとする。
> nanoc create_site <name>
> cd <name>

HTMLの生成と確認を行うには、以下のコマンドを使用する。
> nanoc compile
> nanoc view
コンパイル時にエラーがなければ、「http://localhost:3000/」にアクセスする。以後、ソースファイルを変更したら、コンパイル&Viewを実行を繰り返す。コンパイルし直す。viewは、別のコンソールで実行しておけば止めなくても良い。(修正:2011/10/18)

outputフォルダーにHTMLが生成されるので、そのファイルを直接見ても良いが、パスの問題からhttpd経由のほうがよい。

ページの追加

以下のコマンドでcontentフォルダーにファイル「<file>.html」ができる。
> nanoc create_item <file>

エディッタで直接作ってもOK。
日本語は、UTF-8で書けば表示できた。
フォルダーを作って階層化もできる。(「<folder>/<file>」など)
階層化した場合は、<folder>の下に「index.html」ファイルを作ったほうがいいかも。
画像は、ファイルを置いておけば一緒にコピーされる。

contentフォルダーのファイルは、内容だけを記述する。ページ全体は、「layouts\default.html」をひな形として生成される。

Markdownの使い方

contentファイルは、HTMLタグで直接記述することもできるが、Markdownを使用することで簡易的に記述ができる。

Markdownを使うためには、インストール時に「kramdown」を入れておくこと。また、「Rules」ファイルに「filter :kramdown」の記述を追加する。
compile '*' do
if item.binary?
# don't filter binary items
else
filter :erb
filter :kramdown
layout 'default'
end
end


ヘッダ-タグの書き方。#の数でレベルが変わる。
# H1タグ
## H2タグ
### H3タグ

引用の書き方。
> 引用
> 引用

リストの書き方。記号はどれでもいい。階層化は、記号の前に空白を入れる。
* リスト
+ リスト
- リスト

番号付きリストの書き方。数字なら何でもいいようだ。
1. 番号付きリスト
1. 番号付きリスト

リンクの書き方。Titleテキストは省略可。
[リンクテキスト](URL "Titleテキスト")

以下の書き方でリンクアドレスを集約できる。複数のリンクが同じリンク先の時などに使える。リンク番号は、任意の文字列が使える。
[リンクテキスト][リンク番号]

[リンク番号]: URL "Titleテキスト"

インライン画像の書き方。
![Altテキスト](URL "Titleテキスト")

リンクと同じように参照でも指定できる。
![Altテキスト][リンク番号]

[リンク番号]: URL "Titleテキスト"

サムネイルをインラインで表示して、元画像にリンクしたい場合は、次のように書く。
[![Altテキスト](サムネイル画像URL "Titleテキスト")](元画像URL "Titleテキスト")

強調の書き方。
*emタグ*
**strongタグ**

テーブルの書き方。これで、1行目がthタグになる。
名前|年齢
-|-
Fred|29
Jim|47
Harry|32
行の中でthタグを使いたい場合はどうするのかな?


参考サイト

> 静的HTMLを生成するRuby製CMS「nanoc」 - Computer Practice
> nanoc › Installation
> nanoc チュートリアル翻訳 - transitive.info
> Daring Fireball: Markdown
> Markdownの高度な使用

チュートリアル翻訳は、少し古い。インストールで使っているコンポーネントの指示が違う。
スポンサーサイト

Appendix

プロフィール

いむら@fintopo いむら@fintopo

フリーのシステムエンジニア兼プログラマです。趣味はガーデニングとカメラ。2017年4月にα7IIを買いました。フルサイズ一眼初心者です。

このページのQRコード

季節暦

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。