Ari-Press

エンジニアAriのブログ.

ブログをOctopressにしてみました

Octopress

さて、前回久しぶりに記事を書いたわけですが、個人的にWordpressが使い慣れてなさすぎて辛いことが身に染みました。。基本的にReadonlyであるHerokuとの相性も良いとは言えないですし(画像アップロードがし辛いなど)。

まあこのあたりはWordpressだとかPHPとかに対する理解不足でしょうがね。。

そんなわけで何かWordpressに代わるブログ的なものは無いかと探したところ、Octopressなるものがあるらしいということを知りました。

幾つか特徴があるようなのですが、僕が良いなぁと感じたのは

  • Jekyll(RubyGem)ベース
  • HerokuやGithub Pages、独自サーバ環境などに対応
  • 話題?の静的ブログシステム
  • 各種ソーシャルプラグインへの対応
  • rakeタスクによる管理
  • markdownで記述
  • レスポンシブデザインへの対応

あたりです。デフォルトのサブタイトルが「A blogging framework for hackers.」というのもなかなか刺してきますね←

そんなわけで、Octopressのセットアップに移って行こうと思います。

Octopressのセットアップ

Octopressの準備

まずはOctopressをセットアップしていきます。と言っても手順は至って簡単です。

git clone git://github.com/imathis/octopress.git install_dir/octopressでoctopressのファイル一式をローカルにダウンロードします。

この後、cd install_dir/octopressでディレクトリに移動すると、.rvmrcを読み込みますか?という警告が出てきます。これは素直にyesで承認をしておきました。どうやらRuby1.9.3が求められるようですね。

依存Gemのインストール、、の前に

続いてbundle installを実行して依存Gem類をインストールしていくわけですが、僕はアプリケーションごとにRVMのgemsetを分けて管理しているので、先にrvm gemset create octopressとしてgemsetを作成し、.rvmrcの内容をrvm use 1.9.3からrvm use 1.9.3@octopressに変更しておきます。

これで以降octopressのディレクトリに移動してきた時に自動的に「octopress」と名付けたgemsetを使うようになります。

依存Gemのインストール

ここまで準備ができたところでbundle installを実行しました。

しかし途中で失敗。。

1
2
3
4
Gem files will remain installed in ~/.rvm/gems/ruby-1.9.3-p327@octopress/gems/RedCloth-4.2.9 for inspection.
Results logged to ~/.rvm/gems/ruby-1.9.3-p327@octopress/gems/RedCloth-4.2.9/ext/redcloth_scan/gem_make.out
An error occurred while installing RedCloth (4.2.9), and Bundler cannot continue.
Make sure that `gem install RedCloth -v '4.2.9'` succeeds before bundling.

どうやらRedClothのインストール中にエラーが出ている、ということで即座にGoogle先生に質問しました。

StackOverFlowを参照すると、どうやらインストールに/usr/bin/gcc-4.2を使っている模様ですね。そしてXcodeのコマンドラインツールを入れていれば/usr/bin/gccはあるはずと。しかも4.2です。

なので、記事の通りsudo ln -s /usr/bin/gcc /usr/bin/gcc-4.2でシンボリックリンクを張りました。

これでもう一度bundle installしてみると、、成功しました!

デフォルトテーマのインストール

これは公式ページにある手順通りにrake installを叩いたらすぐにできました。

コマンドを叩くと

1
2
3
4
5
6
7
## Copying classic theme into ./source and ./sass
mkdir -p source
cp -r .themes/classic/source/. source
mkdir -p sass
cp -r .themes/classic/sass/. sass
mkdir -p source/_posts
mkdir -p public

と何やら可愛いログが。

Octopressを動かしてみる

ここまでできたらとにかくいっぺん動作を試してみたかったので、ドキュメントにあるrake deployは無視、Rakefileの中で一番動作確認っぽかったrake previewコマンドを実行しました。

そうすると、何やら色々生成した後にどうやら4000番ポートをリッスンし始めた様子。http://localhost:4000/にアクセスしてみると。。。かっこいい画面が出てきました!

Wordpressのデータインポート

しかしそもそもこのブログはWordpressで運用していました。できればデータを移行したい。

調べてみると、どうやらJekyllがWordpressのデータ移行に対応しているとのこと。

ということで、JekyllのWikiを参考に作業を進めました。

DBの接続情報を渡して移行することもできるとのことですが、HerokuのDBに直接つなぎに行くのもなんだか気が引けたので、今回はXML形式のエクスポートデータからインポートする方法を選択しました。

まずはWordpressからデータをエクスポート(XML形式)して、irbからrequire 'jekyll/migrators/wordpressdotcom'を実行!・・・そしてエラー!

1
2
irb(main):002:0> require 'jekyll/migrators/wordpressdotcom'
LoadError: cannot load such file -- hpricot

どうやらhpricotというgemが読めないらしいですね。なのでGemfileにgem hpricotを追記してbundle installを実行しました(Gemfileに書くべきかは微妙な気がしましたが。。)。おお、、読めた。

1
2
irb(main):001:0> require 'jekyll/migrators/wordpressdotcom'
=> true

ここからはWikiにある通り、WordpressDotComモジュールを使ってWordpressのエクスポートデータを読み込みます。

1
2
3
4
5
irb(main):004:0> Jekyll::WordpressDotCom.process("some_dir/ari-press.wordpress.2012-12-13.xml")
Imported 1 pages
Imported 8 posts
Imported 1 attachments
=> {"page"=>1, "post"=>8, "attachment"=>1}

データ量少ないですね。記事少ないので。。

この手順の結果、octopress_root/_postフォルダ以下にhtmlファイルがいくつかできました。が、ファイル名が文字化けしています。元々Octopressは日本語ファイル名をサポートしていないっぽいので、ファイル名は全て書き換えました。

インポートしたデータの動作確認・整形

ここまででhtmlファイルはできたものの、rake previewを実行してみても記事が見られませんでした。

これはしばらく悩みましたが、正しく生成したエントリのファイルはどうやらoctopress_root/source/_postディレクトリ配下に置かれる模様。対してインポートされたデータはoctopress_root/_postに吐かれていました。そもそもディレクトリが違うんですね、凡ミスでした。

なので、内容をmarkdownに書き換えつつ拡張子をhtmlからmarkdownに変更し、octopress_root/source/_post以下に移動してみたら、、見れました!正しく表示されています。

恐らくJekyll::WordpressDotComモジュールが吐いたHTMLファイルのままでも表示されたのだろうと思うのですが、僕の場合は記事数が少なかったので全てmarkdownに書き換えてしまいました。

おまけ: 画像ファイルについて

今回のやり方では画像はうまいことインポートされなかったようです。というかXMLからのインポートなので当然ですね。

なので、画像は別途ダウンロードする必要があります。これをsource/images以下に置いておけばimages/file_name.pngなどでアクセスできるようです。

以上、Octopressインストールメモでした!

Comments