Octpressインストールメモ

Macbook Air 11(2012 mid)にOctpressを導入したときの、メモ。

octpressを使うと:

Markdown記法(Markdown syntax guide)で書いたテキストを、ローカルで静的にHTMLに変換できる。
ソースと静的に生成されたウェブページはGitで管理できる。
- ローカルで編集して好きなタイミングでリリースできる。
テーマやプラグインがあり、見た目のいいブログサイトを手間なく構築できる。カスタマイズもできる。

みたい。

プログラミング関連の記事を書くときに必要なソースコードのハイライト表示等が設定なしで使えるのが便利そう。オフラインで書いて、そして静的に生成されたページは、ローカルのウェブサーバでプレビュでき、Gitで管理できるから、オンラインエディタを使う時のネットワークの切断を気にしなくてもいいのは、ストレスがなさそう。

環境構築

octpressインストールガイドの手順に従えばできる。octpressはruby 1.9.3以降を必要とするが、Macのは1.8系。そのためRubyの環境構築が必要になる。

octpress SetupでrbenvもしくはRVMを使う方法が紹介されているが、私は使い方がわからなかった。Homebrewで環境構築をした。

GitはXcodeのCommandline toolをインストールしていたので、すでにインストール済。まずhomebrewをインストールして:

	$ ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

rubyをインストール。

	$ brew doctor
	$ brew install ruby

~/.bash_profile にパスを設定して、1.9.3のRubyを先に見つけるようにする。

	export PATH=/usr/local/bin:$PATH

コンソールを新しく開いて、先ほどの環境を反映させて、rubyのバージョンを確認する。

	$ ruby --version
	ruby 1.9.3p327 (2012-11-10 revision 37606) [x86_64-darwin12.2.1]

	git clone git://github.com/imathis/octopress.git octopress
	cd octopress

先ほどインストールしたruby関連コマンドを実行:

	/usr/local/Cellar/ruby/1.9.3-p327/bin/gem install bundler
	/usr/local/Cellar/ruby/1.9.3-p327/bin/bundle install

octpressがプレビューに使うコマンドを、実行パスにシンボリックリンクで置く。

	cd /usr/local/bin	
	ln -s ../Cellar/ruby/1.9.3-p327/bin/jekyll  ./
	ln -s ../Cellar/ruby/1.9.3-p327/bin/compass ./
	ln -s ../Cellar/ruby/1.9.3-p327/bin/rackup  ./

	cd path/to/octpress
	rake install

設定

Rakefileと_config.ymlの設定項目を書く。ブログのタイトルや、メールアドレス、Githubのアカウントなど。ここに設定しておけば、その関連情報を適当に表示してくれる。

ブログを書く

コマンドラインで新規ページを作れる。

	rake["octpress-install-memo"]

source/_posts/ 以下にファイルがあるので、それにコンテンツを書く。プレビュー時や、deployするときは、ファイルが変更されると静的なページが自動生成/更新される。書いている途中に、それを禁止しておきたい時は、

	published = false

ヘッダにこの1行を入れておく。

編集環境

Macで動作するMarkdowプレビュ・エディタを使うと、レンダリング結果を見ながら書ける。また、Markdownの記法に従いハイライトされるので、読みやすい。

Mou - Markdown editor for web developers, on Mac OS X
kobitoapp
- プログラミングのTIpsを集めるサイト http://qiita.com が提供しているエディタ。

編集とプレビュー

ファイル編集が完了したら

	% rake generate

プレビュにしておくと、ブラウザで表示結果を確認できる。Markdownのソースファイルが変更されたら、変更を検出して、自動的に静的にページを生成する。コンソールのコマンドでプレビュを立上げる。これはCtrl-cで終了する:

	% rake preview

WEBrickが4000番ポートで立ち上がるので、ローカルで http://127.0.0.1:4000 を開いて確認する。

iPad miniでプレビュ

/post/2012-12-10-octpress-install-memo/img_1261.jpg

iPad miniなど、外部から確認するときは、IPアドレスを調べて、開く。例えば:

	$ ifconfig
		en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
		inet 10.0.1.9 netmask 0xffffff00 broadcast 10.0.1.255
		^^^^^^^^^^^^^^ この端末のIPアドレス

無線ルータが割り当てたこの端末のIPアドレスは10.0.1.9なので、iPad miniから、http://10.0.1.9:4000 で開く。自宅で無線ルータを利用しているならば、MACアドレスに対してIPアドレスを指定して、同じ端末に同じIPアドレスが割り当てられるようにしておけば、常に同じURLでプレビュができるので、便利。

公開

ソースファイルはsourceブランチにある。Github pagesを利用しているなら、

	% rake deploy

でmasterブランチに静的にHTMLファイルを生成、githubにpushする。これでuser-name.github.com でページが見られる。このページなら、http://reinforce-lab.github.com。

その他

画像を入れるには？

octpressで画像を表示するには、画像プラグインで画像のURLを指定する。私は、画像ファイルもmarkdownテキストと同じレポジトリで管理したい。そこでoctopressのsourceにpost_imagesというフォルダを作り、そこに画像ファイルを置いた。octpressは、sourceフォルダ以下に置いたフォルダとファイルを、自動的にサーバ側にコピーしてくれるみたい。

	cd octopress/source
	mkdir post_images
	mv img_1261.jpg ./

img_1261.jpgはこのエントリで使った画像のファイル名。この画像を読み込むには：

	{% img /post_images/img_1261.jpg %}

‘/’で始まるURLは、サーバのルートに置換してくれる。画像の幅だけ指定しておけば、縦横比はそのままで表示される。

レポジトリの扱い:今あるファイルがdeployされる

Gitpagesは、masterブランチにpushされたmarkdown形式およびhtmlのファイルを、jekyllで処理して静的に公開する仕組み。

‘rake deploy’で、今のローカルにあるファイルが、静的にhtml変換されて、masterおよびgithubにpushされる。sourceブランチにpushする必要はない。だから、一時的なお知らせのようなページも、sourceブランチにpushせず一時的に変更したままの状態で、‘rake deploy’でgitpagesに公開できる。

Octpressのソース・ファイルはsourceブランチで管理されている。masterブランチは、ローカルから見えなくしてあり、‘rake deploy’で、生成したhtmlファイルをmasterブランチにpushして、それをGitpagesにpushしてくれる。

部分的なファイルの読み込み

リンク・リストや、著作権表示のような、様々なページが参照する共通の情報や定形文章には、[render partial]機能を使う。 Jekyllは、ファイル名もしくはフォルダ名がアンダースコアで始まるものは、レンダリングの対象外にする。

利用方法:共有するリンク集

[render partial]を使い、ブログで頻繁に参照するリンク・リストを、別ファイルにして共有する例。まず_source/_link.markdownというファイルを作り、

	[render partial]: http://octopress.org/docs/plugins/render-partial/

そこにリンクのリストを書く。この書き方は、テキストタグとURLをリンクさせるmarkdownの記法で、本文中の[render partial]は、自動的にURLリンクに変換される。そして本文の適当な場所に

を入れておく。先程のリンク集が本文によみこまれ、そこリンク集のタグを’[タグ]‘で使える。相対パスの始点は、sourceフォルダなので、パスの頭に"_posts/“が必要。