ここでOctopressで新規記事を投稿する方法を紹介する。
Octopressを知っていない方もいると思うが、始まる前に少しOctopressを紹介してから進めましょう。

Octopressとは？

Octopressは最近人気上昇のブログエンジンである。特にhackerたちに流行している。膨大なWordPressに対して不満をもって、より簡単、hackerらしいブログツールを望んでいる中でOctopressを生み出した。
Octopressはrubyとgitを利用して、Markdown記法のtextをhtmlページに変換する。Githubのpage serviceを利用して、簡単にブログを公開できる。Githubを利用しなくてもrsync、Herokuのpage serivceでもブログを構築できる。
ここでGithubのpage serviceを利用する前提で本ブログに投稿の作業を解説する。

環境設定

Windows環境はruby gemの相性がよくないので、Mac OSXまたはLinux環境を推奨する。
ruby環境はRVMとrbenvがあるが、ここでMac OSXのrbenvを例として解説する。

Octopressの環境構築

まず、Octopressのドキュメントを参考してください。
事前準備：

• Git
• Ruby 1.9.3以上(rbenvでインストール)

1
2
3
4

$ rbenv install 1.9.3-p194
$ rbenv versions # インストールされたrubyバージョンを確認
$ rbenv global 1.9.3-p194 # 1.9.3のバージョンを使用
$ rbenv version # 現在ruby versionを調べる

sjitechブログ取得

Githubからブログのソースを取得する。

1
2
3
4
5
6
7
8

$ git clone https://github.com/sjitech/sjitech.github.com.git
$ cd sjitech.github.com
$ git checkout source # ブランチを切り替え
$ ruby --version # 現在ruby versionを調べる
$ gem install bundler # 依存ライブラリをインストール
$ rbenv rehash
$ bundle install
$ rake setup_github_pages # デプロイ準備フォルダーの作成

新規記事

新記事の追加

1
2

$ cd sjitech.github.com
$ rake new_post["記事タイトル"] # Creates source/_posts/yyyy-MM-dd-記事タイトル.markdown

markdown編集

markdownは幾つかのオンラインエディタ(例：markable)を利用できる。MacならMouを強く推奨する。
markdown文法はJOHN GRUBERのブログに参考ください。和訳はここにご参考ください。

コードブロック

Octopressにコードブロックは以下のように挿入する。

``` ruby
puts 'hello markdown!'
```

上記のコードは以下のように表示される。

1

puts 'hello markdown!'

またはtagを使用する。

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

例：

{% codeblock Time to be Awesome - awesome.rb %}
puts "Awesome!" unless lame
{% endcodeblock %}

以下のように表示する。

1

puts "Awesome!" unless lame

画像

tagを使う。

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

例：

{% img http://www.sji-inc.jp/Portals/0/images/index/top-img02.jpg %}
{% img left /images/sji_logo.png #2 %}
{% img right /images/sji_outline.jpg Shinagawa Seaside East Tower #3 %}

中央寄せに表示する画像：

左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像
左寄せに表示する画像

右寄せに表示する画像
右寄せに表示する画像
右寄せに表示する画像
右寄せに表示する画像
右寄せに表示する画像

画像ファイルをsource/imagesフォルダーに置いてください。

改行

markdownにhtmlタグも使えるが、極力的に避けたほうがいいと思う。ただ、改行の時に<br />を使っても良い。

途中の内容をプレビュー

1
2

$ rake generate
$ rake preview

とすれば、http://localhost:4000で確認できる。

投稿公開

記事を書き終えたら

1
2

$ rake gen_deploy
$ rake deploy # sourceブランチをmasterブランチにマージし、githubにpushする

deploy途中にgithubアカウントとパスワードの入力を求める。

最後にsourceブランチも一緒にgithubにpushしましょう。

1
2
3

$ git add .
$ git commit -m "add new post 記事タイトル"
$ git push origin source

では、さっそく記事を投稿しましょう。

参考リンク

• Octopressのインストールから運用管理まで
• Markdown記法
• Octopressで記事を投稿するまでの手順