Octopressのはじめかた

OctopressはWeb/App Serverを用意する必要がありません。RubyとGitHubを少しでも触ったことがある方なら簡単に構築することができます。
また、新たに追加するページやブログ記事などの編集は全てMarkdownファイルに対して行うことができるので、時間や場所やエディタなどの環境を選ばず編集することが可能です。

Jekyllを拡張したものなので、Jekyllのカスタマイズに迷っていた私にとって非常に便利なものでした。

必要なモノ

  • Git
  • Ruby
  • GitHubリポジトリ

Macを使用している場合はGitHubリポジトリを除いて既に全て整っていると思います。
以下、私が構築した際の環境です。

$ ruby -v
ruby 1.9.3p547

$ git --version
git version 1.9.3

GitHubリポジトリはusername.github.ioという名前のものを用意してください。
(usernameがchangamiの場合: changami.github.io)
作成後、空の状態で以降の手順に進みます。

構築手順

ここからはしばらくコマンドラインで操作を行います。

Octopressリポジトリのクローンと作業用ディレクトリの作成を行います。
作業用ディレクトリを作成したい場所まで移動して以下を実行します。
octopress_workspaceとしている場所は任意の名前をつけてください。

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

以降、全てOctopressのディレクトリ(octopress_workspace)内で操作していきます。

Octopressに必要なbundleをインストールします。

$ bundle install --path vendor/bundle

ここからはrakeでの操作を中心に行なっていくことになります。
Octopressのフォルダ構成をつくります。

$ bundle exec rake install

問題なく完了していれば、プレビューを表示することができます。

$ bundle exec rake preview

ブラウザでlocalhost:4000にアクセスすると表示されます。
プレビューを終了する場合は、コマンドライン上で
Ctrl + C
を押します。

プレビューは問題なく表示されましたか?

続いて設定ファイルを編集していきましょう。
私の場合、以下を編集しました。

url: http://changami.github.io
title: chan_memo
subtitle: I wanna be a passionate Core gamer.
author: chan_gami
date_format: "%Y.%m.%d"
github_user: changami
twitter_user: chan_gami

さて、編集とプレビューを繰り返して公開したいレベルになりました。
デプロイの準備をしていきましょう。

公開するにあたって、GitHub Pagesという技術を使っています。
GitHubにコミットするだけで公開されるなんて素晴らしいですね!

プッシュ/デプロイ先の情報を設定します。

$ bundle exec rake setup_github_pages

そうすると、リポジトリの所在を問われます。
exampleが表示されるのでそれに従って入力してください。
私の場合、以下を入力しました。

[email protected]:changami/changami.github.com.git

ここまでくればあと一歩で完了です。

$ bundle exec rake gen_deploy

どうでしょう?
しばらくすると http://changami.github.io にデプロイされているのが確認できます。
これで構築と設置は完了です。

次項で、新たなページや記事を作っていきましょう。

運用手順

新たにブログ記事を作成する場合

$ bundle exec rake new_post

タイトルが決まっている場合は、

$ bundle exec rake new_post['title']

を実行してください。
タイトルを入力しなかった場合はタイトルを聞かれますが、この値はパーマネントリンクに使用されるため、それっぽいものを入力してください。
例えば今回の記事の場合、
how to use octopress
と入力しました。半角スペースで区切っていても問題ありません。

すると、source/_postsにMarkdownファイルが生成されます。
そのファイルがブログ記事本体となるので、記事を編集してください。

新たにページを作成する場合

Aboutページを追加する場合、

$ bundle exec rake new_page['about']

を実行してください。
すると、source/aboutフォルダが生成され、中にindex.markdownが生成されます。
このファイルがAboutページ本体となるので、ページを編集してください。

そしてナビゲーションバーに、このページへのリンクを追加します。
ナビゲーションバーは source/_includes/custom/navigation.html に記述されていますので、

<li><a href="{{ root_url }}/about">About</a></li>

を追加してください。

各編集が完了した際のデプロイ手順は先と同様です。

独自ドメインを使う

source/CNAMEを作成します。
次に、CNAME内にドメインを記入しておきます。
私の場合、以下のように記入しました。

www.changami.com

また、ドメイン側にCNAMEレコードを設定しておきます。
ValueDomainを使用している私の場合、以下を設定しました。

cname www changami.github.io.

記法に慣れている方は問題ないかと思いますが、最後のドットに注意してください。

テーマを適用する

多くの素晴らしいOctopress Themeが公開されています。
適用方法は各README.mdに記されていますが、今回WhiteSpaceを適用しました。

$ git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
$ bundle exec rake install['whitespace']

プレビューを確認して適用されていれば完了です。

デプロイ時にエラーが出た

2度目のデプロイでエラーが発生したので記しておきます。

$ bundle exec rake gen_deploy
を実行した際に、

To https://github.com/changami/changami.github.io
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/changami/changami.github.io'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

このようなエラーメッセージが表示されました。

参考に載せているStack Overflowに同様の現象が書かれていたのでそれを適用しました。
Rakefile内の
multitask :push
にある
system "git push origin #{deploy_branch}"

system "git push origin +#{deploy_branch}"
というように + を書き加えることで回避できます。

が、Stack Overflow回答に書かれているように、これは良く考えられたベストプラクティスではないので回避策の1つに過ぎません。

参考

Octopress
OctopressでGitHub無料ブログ構築。sourceをBitbucket管理。簡単ガイド! – 酒と泪とRubyとRailsと
3rd Party Octopress Themes · imathis/octopress Wiki
rake gen_deploy rejected in Octopress – Stack Overflow