GitHub pages + Octopressの導入

GitHubを使って色々管理をし始めた今日このごろ、 GitHubではGitHub Pagesとページが 簡単に作れるということを知って、 さらにしばらく調べていたらOctopressと 言うツールを使ってブログをGitHub Pages上でブログを作る、 と言うのが面白そうだったのでいっその事ブログも作って見ることにしました。

ということでまずは、導入メモ。 今回はMacとWindowsで作業を行ったのでそれらのメモです。

• GitHubでの設定
• rubyのインストール
  • Macの場合 (rvmを使う)
  • Windowsでの設定
• Octopressのインストール
• 記事やページを作る
• GitHubとOctopressを繋げて記事を公開する
• 下書きをdeployしないようにする
• sourceの管理
• 管理のまとめ

GitHubでの設定

GitHubのアカウントを作ります。 gitの導入なり、ssh-keyの登録なりは色々な所で紹介されているので省略。

アカウントが作成できたら、Create a new repoへ行き、 “username.github.com”というGitHub page用のレポジトリを作ります。

branch = (repo_url.match(/\/[\w-]+\.github\.io/).nil?) ? 'gh-pages' : 'master'

rubyのインストール

Macの場合 (rvmを使う)

現在使っているMacは2011年に買ったLionなのですが、 入っているrubyは1.8.7で、octopressには1.9.3以上が必要なので 新しいものをrvmを使って入れます。

rvmのインストールで、... bash -s stable --rubyとするとrubyも同時にインストール 出来るのですが、自分の環境だと

There is no checksum for 'http://production.cf.rubygems.org/rubygems/rubygems-2.0.2.tgz' or 'rubygems-2.0.2.tgz', it's not possible to validate it.
If you wish to continue with unverified download add '--verify-downloads 1' after the command.

There has been an error while trying to fetch the source.
Halting the installation.

と言うメッセージが出たので、別途入れることにしました。 現時点でrubyの最新版が2.0.0、これと同時にインストールされるrubygemが2.0.2で、 どうもこれが悪さしてるみたいです。 2.0.0でメッセージにあるように--veryfy-downloads 1をつけてもrubygemの インストールで失敗している様なので1.9.3をインストールすることにしました。

$ # rvm installl, ref: https://rvm.io/
$ \curl -L https://get.rvm.io|bash -s stable
$ # ruby install, also rubygems-1.8.25 (at this time) will be installed
$ rvm install 1.9.3

この時点ではPATH等が上記のコマンドによって自動的に設定されますが、 今後も$HOME/.rvm以下のrubyを使うように、bashを使っている場合は.bash_profile (または.bashrcを.bash_profileから読み込む様にしてある場合は.bashrc)に

1
2
3

if [ -s $HOME/.rvm/scripts/rvm ];then
  source $HOME/.rvm/scripts/rvm
fi

を加えておきます。

Windowsでの設定

今回はCygwinを使って環境を作りました。 インストール時にはOctopress用に最低限

• Devel:git
• Ruby:全部

はインストールします。 gitをCUIで積極的に使う場合は

• Utils:tig (gitのCUIブラウザー)

もインストールしておくと良いと思います。

Cygwinでsetup.exeでインストールされるrubyは現時点で1.9.3なのでそのまま使えます。 現時点で使っている物は

• Cygwin 1.7.17
• ruby 1.9.3p385
• git version 1.7.9
• tig version 1.1

です。

CygwinはRubyのためで、この他にもWindowsにインストールする方法としては

• RubyInstaller: rubyを使えるコマンドプロンプトがインストールされる。
• yari: Yet Another Ruby Installer、rvm などにinspireされたツールということらしいが、コマンドプロンプトからrubyをインストール出来る。(参考ページ)
• これらの場合には別途GitまたはGitHub Clientも必要。 また、
• MinGW: Cygwinからフォークして出来たUnix環境を作るソフト。

といったものもあります。

CygwinでOctopressをインストールする時、下にある bundle installでposix-spawnをインストールする時に 上手く行かないのでこれだけ先に別にインストールしておきます。

$ # for cygwin only
$ cd ~/tmp # anywhere tmporally space
$ gem install rake-compiler
$ git clone git://github.com/rtomayko/posix-spawn.git
$ cd posix-spawn
$ vi lib/posix/spawn/version.rb
$ # change     VERSION = '0.3.7' to     VERSION = '0.3.6'
$ rake gem
$ #gem install pkg/posix-spawn-0.3.6
$ #gem install pkg/posix-spawn-0.3.7.gem
$ gem install pkg/posix-spawn-0.3.6.gem

"posix-spawn", "~> 0.3.7"

$ rake gem
rake aborted!
cannot load such file -- rake/extensiontask
./posix-spawn/Rakefile:17:in `<top (required)>'
(See full trace by running task with --trace)

もしrake gemの所でエラーが出るようなら、もう一度、Cygwinのsetup.exeで Ruby等が全て最新になっているか確認してみてください。 全てUpdateしなおすと上手く行くこともあります。 それでも上手くいかない場合は個別に上手く行くバージョンを調べて インストールしたりする必要があるかもしれません。

Octopressのインストール

Octopressをcloneしてきてインストールします。

$ cd /path/to/octopress/install/dir
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

公式のsetupページにもあるように、 rvmを使っている場合はcdした時に、octopress内の.rvmrcをtrustするか聞かれるので yesとします。

$ gem intall bundler
$ bundle install
$ rake install

もしここで、rake aborted!と出たら、(rakeのバージョン云々のメッセージとともに)

$ bundle update

を一度実行してからもう一度rake installすればインストール出来るとおもいます。

ここまで出来たら、試しにrake previewとコマンドを打ってみると

$ rake preview
Starting to watch source with Jekyll and Compass. Starting Rack on port 4000
....

と始まるので、ブラウザでhttp://localhost:4000/ を開いてみます。 そうすると”My Octopress Blog”と言ったタイトルのブログページが見れると思います。

rake previewコマンドはHTMLにコンバートするrake generateコマンドも 同時に行うので、 いきなりpreviewコマンドを叩いてもちゃんとそれまで編集した物が反映されています。 さらにsourceを監視している様で、previewしながら記事を編集すると 即座にページを作成してくれるのでブラウザを再読み込みすると直ぐに ローカルで編集したものがチェック出来ます。

記事やページを作る

新しいブログ記事を作るには

$ rake new_post["test post"]

とするとsource/_posts/YYYY-mm-DD-test-post.markdownと言うファイルができるので それをMarkdown形式で編集します。

新たなページを作るには

$ rake new_page["test-page"]

とするとsource/test-page/index.markdownと言うファイルができるので、これも Markdown形式で編集します。 ページの方はBlog上に直接リンクが貼られないので必要ならばリンクを どこかに書いておく必要があります (Octopressのページの作成)。

rake previewしてみるとtest postと言うタイトルの記事がpostされているのが分かります。 さらに、http://localhost:4000/test-page にアクセスしてみると、 Test Pageと言うタイトルのページが表れるはずです。

preview中に記事を編集しても即座にブラウザをリロードすれば反映されるので 常に確認しながら書くことも可能です。

ちなみに、最初にnew_postなどに使うタイトルがファイル名に使われるので、 ここでは日本語は使えない様です。 タイトル自体は出来たファイルのYAML Front Matterブロック(ファイル上部の---で囲まれた部分) にあるtitleの値を編集すれば日本語に出来ます。

日本語の記事に関しては、utf-8にエンコードされてないと文字化けします。

GitHubとOctopressを繋げて記事を公開する

$ rake setup_github_pages

とコマンドを打ってレポジトリ ([email protected]:username/username.github.com)を入力すればOK。

この作業で作業ブランチがmasterからsourceに変わります。 ただし、Projectページ(username.github.com以外の通常レポジトリを指定した場合) はmasterのままとどまるので下に各sourceの管理、のところとかで ブランチ名に注意する必要があります。

$ rake generate # convert to html
$ rake deploy   # publish (push to GitHub)

この2つのコマンドは

$ rake gen_deploy

で一気に行う事も可能です。 ただし、gen_deployはgenerateが失敗した場合でもdeployを実行するので、 generate失敗時な形で投稿されてしまうことがあります。 さらに、下にあるpublishedのステートメントは最後の方に判断されるらしく、 例えば後で投稿しようと思っている下書きが他にあって、 今書いているものを投稿しようとしてその時にgen_deployすると、 中途半端な今の記事と後で投稿する予定の下書きの方も送られてしまうことがあるので ちょっとした変更とか以外は一回ちゃんとgenerateした方がよいです。

previewで見ながら編集していた場合には既にページが出来ているのでrake deploy するだけでもOKです。 ただし、preview中に大きな編集(テーマを変えたり)するとたまにgenerate が上手く行かなくなってページがおかしくなるので、そいういった場合は 別途rage generateしてやればちゃんとページが作成されます。

下書きをdeployしないようにする

一部下書きがあって完成してない状態でも、他の部分だけを公開したい時も あると思いますが、その場合は

published: false

をYAMLブロックに加えるとそのファイルはpreviewでは見れますが、deployされません。

sourceの管理

Octopressのインストラクション だとsouceにあるMarkdown形式のファイルもGitHubで管理する様になっていますが、 無料版だと元のファイルそのものが公開になってしまいますし、 下書きの段階でもバックアップしておこうと思うと 公開されてしまいます。 さらにgitの管理の面でも面倒が起こったりするとのことなので (Octopressのインストールから運用管理までにとても詳しく書いてあります) 他の人を真似てsourceはBitbucketの方で管理します。 BitbucketはGitHubと同じような要領でssh keyの登録やレポジトリの作成が出来ますが、 無料で非公開のレポジトリを作ることが出来ます。

Bitbucketの方で、username.github.com (管理しやすいようにGitHubのページと同じ名前のレポジトリにしましたが、何でもOKです) をprivate repository (Create a new repositoryのページで This is a private repositoryにチェックを入れておく)として作ります。

Butbucketのリモートレポジトリを登録します。

$ git remote add bitbucket [email protected]:username/username.github.com.git
$ git push -u bitbucket source

これで何か書いたら

$ git add .
$ git commit -m "comment"
$ git push

でBitbucketの方に記事のバックアップがとれます。

Bitbucketをあまりちゃんと使ってなかってんですが、 Bitbucketだとdiffがside-by-sideでも見れますね。 GitHubもそのうち出来るようになってもらいたい…

管理のまとめ

• 記事を書くには

    $ rake new_post["title"]
  

  でファイル(source/_posts/YYYY-mm-DD-test-post.markdown)を作成して、それを編集する。

• ブログのポストとは別にページが作りたい場合は

    $ rake new_page["title"]
  

  で新たなページを作り、source/title/index.markdownとして出来たファイルを編集 したりしてページを作る。

• 書いたらプレビューしてみる

    $ rake preview
  

  を走らせて、http://localhost:4000/をブラウザで開く。 途中で変更しすぎておかしくなったら一度generateする。

    $ rake generate
  

• 記事の元のファイルをバックアップしたいときはBitbucketに送る

    $ git add . # or files what you want to backup
    $ git commit -m "comment"
    $ git push
  

• 出来たらGitHubに送って公開する

    $ git generate
    $ git deploy
  

  または

    $ git gen_deploy
  

• 暫く使ってると色々キャッシュが溜まってくるので

    $ rake clean
  

  をすると

    $ rm -rf .pygments-cache/** .gist-cache/** .sass-cache/** source/stylesheets/screen.css
  

をしてくれます。

• gitの話ですが、暫く使っているとgitの管理ファイル(.git内)もどんどん肥大化していってしまうので、 気が向いたら

    $ git gc
  

  を行うと不要なファイルを削除したり最適化を行なってくれます。