Octopressをアップデート

Octopress がJekyllのバージョンが上がったり色々とアップデートされてるので、 それを追随してアップデートしてみました。 (このページでの作業は基本Macでの作業です。)

• Octopress環境
• アップデート手順
  • 現状の整理
  • 新しいディレクトリの作成
  • 古いディレクトリでの注意
• 変更の中で気になった点等
  • カテゴリーをCapitalizeする
  • 時間帯地域の設定
  • アップデート@Cygwin
  • アップデート@coLinux (debian)
  • jQueryのバージョンと読み込み位置
  • ender.js
  • Pagenation
  • Previewが動かない。。。
  • Topへ戻るボタン
  • Font AwesomeのTwitterボタン
• まとめ

Octopress環境

基本的にGitHub pages + Octopressの導入 でやった通り。

soruceというブランチで普段作業を行い、 このブランチはBitbucketにつながっています。

また、最終的にdeployする先はこのサイト: [email protected]:rcmdnk/rcmdnk.github.ioのmasterブランチです ¹ 。

$ git remote -v
bitbucket       [email protected]:rcmdnk/rcmdnk.github.com.git (fetch)
bitbucket       [email protected]:rcmdnk/rcmdnk.github.com.git (push)
octopress       [email protected]:imathis/octopress.git (fetch)
octopress       [email protected]:imathis/octopress.git (push)
origin  [email protected]:rcmdnk/rcmdnk.github.io (fetch)
origin  [email protected]:rcmdnk/rcmdnk.github.io (push)

実際には、前にやった時にはまだioではなくてcomを使ってた時代なので 古いディレクトリではoriginのところはrcmdnk.github.ioとなっていますが ²

アップデート手順

テーマとかを変更せずに使っていればOctopressのmasterにそのまま rebaseすれば簡単に出来そうですが、 テーマも自分で作ってたり³ して色々何が変更されたかチェックしたいので、一つ一つチェックしてみることに ⁴。

現状の整理

古いOctopressのディレクトリで

$ git status # should be updated, and at source branch
...
$ git tag -a source-20140709 -m "source of old version"
$ git push bitbucket source-20140709

みたいな感じで、現状のスナップショットをtagとして bitbucketの方へ送っておきます。

次に、テーマoctogray をアップデート。

一旦整理するのも兼ねて、新しいOctopressのバージョンと 前にベースにしたのを比べて、変更点を見て手で追加変更していくことに。

ただ、手元にあるレポジトリは後からまた作ったりしたもので、 ローカルのmasterに登録されてるoctopressのmasterが本来のベースになってたものよりも 新しかったので、sourceブランチでgit logして、 octopressの中での最後の変更点のリビジョン番号を取ってきて、 それとoctopressの最新版を比較、見ながらoctograyをアップデート。

$ git diff XXXXXXXX octopress/master

(XXXXXXXXはリビジョン番号。)

ひと通りチェックしながらアップデートしたら、 Octopressディレクトリ内にある_config.yml等、自分用に レポジトリ名等を変更してあるものをまとめて~/mythemeとして保存。 あとでこれをコピーして入れます。

新しいディレクトリの作成

適当なディレクトリへ行き

$ git clone [email protected]:imathis/octopress.git
$ cd octopress
$ # Add bitbucket source repository
$ git remote add bitbucket [email protected]:rcmdnk/rcmdnk.github.com.git
$ # Save current octopress as tag
$ git tag -a octopress-20140709 -m "octopress on which based"
$ git push bitbucket octopress-20140709
$ # Make new source
$ # First, install octogray at master, and make source by setup_github_pages
$ git submodule add [email protected]:rcmdnk/octogray .themes/octogray
$ git commit -m "added octogray as submodule"
$ ./.themes/octogray/setup.sh
$ git add -A
$ git commit -m "setup octogray"
$ # check octogray, if necessary
$ # rake generate # test, will create ./public
$ # # check with preview,  pow or etc...
$ # rm -rf public
$ rake setup_github_pages
...
$ git branch
* source
$ git remote -v
bitbucket       [email protected]:rcmdnk/rcmdnk.github.com.git (fetch)
bitbucket       [email protected]:rcmdnk/rcmdnk.github.com.git (push)
octopress       [email protected]:imathis/octopress.git (fetch)
octopress       [email protected]:imathis/octopress.git (push)
origin  [email protected]:rcmdnk/rcmdnk.github.io (fetch)
origin  [email protected]:rcmdnk/rcmdnk.github.io (push)
$ cp -r ~/mytheme ./.themes # My own settings (Rakefile, _confit.yml, source with own settings)
$ cp -r ./.themes/mytheme/* ./
$ git add -A
$ git commit -m "setup with mytheme"
$ # Connect to bitbucket
$ git push -f -u bitbucket source
$ # Then, check
$ # rake generate # && preview, pow, etc...
$ # Save current source as tag
$ git tag -a source-20140709-new -m "source of new version"
$ git push bitbucket source-20140709-new

な感じで。

• octopressをチェックアウト。
• Bitbucketをremoteに登録。
• octopressの現状をBitbucketにタグとして保存。
• octograyを取ってきてテーマのインストール。
• rake setup_github_pagesでGitHubのレポジトリを設定(この時にmasterブランチがsourceに変更される。)
• 先ほど作ったmythemeを.themesに追加して、中身をOctopress内にコピー。
• sourceブランチをBitbucketとつなげて、上書きする。
• 現状のsourceのスナップショットをBitbucketにタグとして保存。

を行っています。

これで、新しくOctopressをcloneしてきてそこで作業しようとする時でも、

$ git remote add bitbucket [email protected]:rcmdnk/rcmdnk.github.com.git
$ git fetch bitbucket
$ git checkout -b base octopress-20140709
$ git checkout -b source-old source-20140709
$ git checkout -b source-new source-20140709-new

とかすればこの時の様子がすぐに分かります。

古いディレクトリでの注意

上ではoctograyのsetup.shの中でbundle updateなどしてるのですが、 その後に古いoctopressの所でrake generateとかrakeコマンドを打つと、

$ rake generate
rake aborted!
Gem::LoadError: You have already activated rake 10.3.2, but your Gemfile requires rake 0.9.6. Prepending `bundle exec` to your command may solve this.
/Library/Ruby/Gems/2.0.0/gems/bundler-1.6.2/lib/bundler/runtime.rb:34:in `block in setup'
/Library/Ruby/Gems/2.0.0/gems/bundler-1.6.2/lib/bundler/runtime.rb:19:in `setup'
/Library/Ruby/Gems/2.0.0/gems/bundler-1.6.2/lib/bundler.rb:120:in `setup'
/Library/Ruby/Gems/2.0.0/gems/bundler-1.6.2/lib/bundler/setup.rb:7:in `<top (required)>'
/octopress/Rakefile:2:in `<top (required)>'
(See full trace by running task with --trace)
$

と言われてしまいます。

ここでテストだけのためならbundle updateとかしなくても 上で言われてるように

$ bundle exec rake generate

とすればbundleそのままに(古いのを使って？)実行できます。

変更の中で気になった点等

カテゴリーをCapitalizeする

こちら参照: Jekyll 1.X or 2.X (+ Octopress)でのCategoryの取り扱い

時間帯地域の設定

こちら参照: Octopressでの時間帯の地域の設定

アップデート@Cygwin

こちら参照: Octopressのアップデート@Cygwin

アップデート@coLinux (debian)

こちら参照: Octopressのアップデート@coLinux (debian)

jQueryのバージョンと読み込み位置

jQueryは以前はなんとなく最新を使おう、とか思ってバージョン2.0.0 を読み込むようにしていたんですが(昔のOctopressでは読み込んでなかった)、 最新のOctopressでは1.9.1を読み込んでいます。

さらに、

1
2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>

こんな感じでローカルにもファイルを設置しておいて、 ウェブから読み込めなかった場合にはローカルから拾ってくるようにもなっていて、 テストの時にチョット便利だったりします。

で、1つ問題があったのが、Octopressのhead.htmlの中だと、 jQueryはoctopress.jsより先に読み込む点。

octopress/.themes/classic/source/_includes/head.html

この順番で読み込むと、何故か一部のジャバスクリプトが上手く動作しませんでした。

octograyでは他にも幾つか JavaScriptファイルを読み込んでたりもするのでその辺で何か変なコンフリクトが 起きてるのかイマイチ分からなかったんですが、 とりあえずoctopress.jsを先に読みこめば上手く動いたのでそのような順番で 書いています(ちゃんと理解した方が良さげ)。

ender.js

もう1つJavaScriptについて。

古いOctopressではsource/javascripts内に ender.js: http://ender.jit.su/がありましたが、 今は取り除かれています。

octopress/.themes/classic/source/javascripts at 9decd23b5a7a2f26590a4995cafcba010695717d · imathis/octopress

Removed Twitter and Ender.js. Added jQuery and updated Modernizr · 9801354 · imathis/octopress

イマイチこのスクリプトが何をしてるか理解してないんですが、 これを新しいOctopressの方で除いた所、 Googleカスタム検索のアップデート の所でやった 検索ボタンの表示を変更 が反映されずにそのまま検索と表示される様になってしまいました。

とりあえずender.jsを追加して読み込ませるとこれが上手くいくので入れておくことに。

Pagenation

Indexページなどで、次のページ、的な古いIndexページを作る方法も変更されています。

以前のOctopressでは _config.ymlの中で

paginate: 10          # Posts per page on the blog index
pagination_dir: blog  # Directory base for pagination URLs eg. /blog/page/2/

と言った感じで、pagination_dirを指定していて、 ./plugins/pagenation.rbを使ってIndexページを作っていました(多分)。

これが、新しいOctopressではpagenation.rbは削除され、 _config.ymlでは、

paginate: 10          # Posts per page on the blog index
paginate_path: "posts/:num"  # Directory base for pagination URLs eg. /posts/2/

と、paginate_pathでインデックスページのパスを指定しています。

とりあえず、前の状況と合わせるために

paginate_path: "blog/page/:num/"  # Directory base for pagination URLs eg. /blog/page/2/

と変更しておきます(octograyのセットアップでやってくれますが)。

それから./source/index.htmlの中でも、 次のページの変数とかが paginator.previous_page paginator.previous_page_path と言った感じに変更されてるのでテーマを作ってる場合にトップのindex.htmlとかを いじってる場合には注意が必要です。

Pagination Initial update to be compatible with Jekyll 2 · 52f9119 · imathis/octopress

上の変更の中で、パスを変えたのに加え、最後に/も加えています。 説明では/posts/2/となっているのですが、 この設定だとOlder/Newerボタンに付けられるリンクは.../posts/2の様に 最後に/が無いパスになっています。

本来はこれは全く問題ないはずなんですが(pagenationでなくても普通にディレクトリ名で URLを指定して中のindex.htmlを開くのは当たり前なので)、 何故かpowを使う時だけちょっと問題がありました。

pow経由で開いて、このような/が最後に無いULRを開くと 404 Not Foundと出てきます。

しかも、 用意してある404 Not Foundのページ⁵ ではなくて、単に文字が出るだけ。

他のwindowsページなんかも最後の/を除くとだめ。 (トップディレクトリだけはhttp://octopress.devみたいにしても大丈夫。)

同じ物をpreviewなんかで見るときちんと/が最後に無くても見れます。

さらに変なのは、今はpublicディレクトリを~/tmp/octopress/へ 作る様にしている⁶ のですが、 試しにOctopressのディレクトリ内に通常通り./publicのディレクトリを作って powで確認してみると、そこでは/なしでも普通に見れます。

昔の物で試してみたところ ⁷ 、同じ様に404 Not Foundになったので、 よくわからないですが、Octopress+powでOctopressのディレクトリ外に publicディレクトリを作るとこの問題が起こるみたいです。

なので、単純にpowのバグとかではないみたいで、 ちょっと意味がわからないんですが、 とりあえず手元ではpowで見ることが多いので、 上の様に/を加えておきます(今のところはこれによる問題は無さ気)。

Previewが動かない。。。

上の所でpreviewで見たら、的な事が書いてありますが、 実はその辺りはoctogray 抜きのオリジナルのままの状態でのテストです。

何かコンフリクトしてるのか、previewが上手く動きません。 rake previewしてhttp://localhost:4000/ をみても白紙になります。 (ターミナルではアクセスがあったような出力はされていますが。)

$ thin start

と、thinコマンドを直接動かして http://localhost:3000/ を見ても同じ。

さらに、 generate_only コマンドなんかもpublishedをfalseにしておくと上手く行きません。 こちらはどうもOCTOPRESS_ENV"=>"preview" の設定がうまくいってない？様子。

これは新しいRakefileでも使われてるので、コレ自体は使えるはず。

オリジナルのままだとうまくいくので完全に自分のミスですが とりあえずpowがあればそれ程問題ないので後回し。

ただ、たまにWindowsでやる場合に困る(Macが動いてればTeamViewerで見てみるしかない。。。) 、のと generate_onlyもpublished: falseのまま出来ないのが結構面倒なので 早めに何とかしたい所。

Topへ戻るボタン

Topへ戻るボタンの設置 で、上に戻るボタンを設置していたはずなんですが、表示されず。

古いものでも確認した所、そちらでも表示されず。

どこかでJavaScriptとかがおかしくなってるのかな、と悩んでいましたが、 _config.ymlで、

scrolltop: false

と自分でしていました(この設定自体も自分で加えたものなので。。。)。

そういえば;ｗ確か、特に携帯とかで見るときにあまりに右下にうざかったので消したな、 と思い出しました。

Font AwesomeのTwitterボタン

以前のものとページごと比べていたら、 タイトル下とかにあるFont AwesomeによるTwitterのボタンが 昔の物のが大きいことに気づきました(ほんのちょっとでしたが)。

Font Awesome のページでアイコンの大きさをなんとなくチェックしてみると、 どうも新しいほうが正しい模様。

どうも、以前、 We Love Icon Fonts を試してみようと思って、sass/plugins/_we_love_fonts.scssを入れていたのが 問題だったようです。

head.htmlの中で、この_we_love_fonts.scssを含んだscreen.css とFont Awesomeのfont-awesome.cssを読み込んでいますが、 これがscreen.cssを後に持ってくると、何かを上書きするのか 大きさが変わります。

screen.cssを前にした時と、_we_love_fonts.scssを除いてscreen.css を作った時(この時はfont-awesome.cssとの位置関係はどちらでも)は 通常(小さめ)に表示されました。

特に大きな問題でもないんですが、 少なくとも現状We Love Fontsは使ってないのでscssは削除で。

We love Fontsもサイトも様変わりして大分使いやすそうにはなってますが、

Caution!

This is a public gamma. Use this service for mockups, reduced test-cases or CodePens, but not on productive systems!

とも書いてあるので、特にFont Awesomeだけ使いたい場合には 直接使う方が良さげ。

まとめ

今は新しいものになっていて、基本的に殆ど変わってないはずですが、 何か動作がおかしなところがあれば指摘してもらえると嬉しかったりします。