わふうの人が書いてます。

iOSアプリケーション開発、BLEのファームウェアとハードウェア試作のフリーランスエンジニア。

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をインストールして:

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

rubyをインストール。

1
2
$ brew doctor
$ brew install ruby

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

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

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

1
2
3
4
5
$ 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関連コマンドを実行:

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

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

1
2
3
4
5
6
7
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のアカウントなど。ここに設定しておけば、その関連情報を適当に表示してくれる。

ブログを書く
-
コマンドラインで新規ページを作れる。

1
rake["octpress-install-memo"]

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

1
published = false

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

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

編集とプレビュー
-
ファイル編集が完了したら

1
% rake generate

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

1
% rake preview

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

iPad miniでプレビュ

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

1
2
3
4
$ 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を利用しているなら、

1
% rake deploy

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

その他
-

画像を入れるには?

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

1
2
3
cd octopress/source
mkdir post_images
mv img_1261.jpg ./

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

1
{% 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というファイルを作り、

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

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

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