To: ３日後には全てを忘れている自分へ

今回、久しぶりにブログを書こうとしたらOctopressの仕組みを全く覚えていなくて、いろいろ回り道したせいで、ほぼ丸１日無駄にしてしまった。おそらく未来の自分はまた忘れるのだろうでここにメモをしておく。　

masterとsourceブランチ

ブログはGithub Pageでホスティングしている。ブログそのものは、http://kimh.github.io/ で記事とかOctopressのコードは、https://github.com/kimh/kimh.github.io で管理している。

https://github.com/kimh/kimh.github.io には master と source の二つのブランチがある。soruce にはmardkdownで書かれた記事が保存されていて、デプロイするとここから静的HTMLを生成して master にpushする。

今回このことを覚えていなくて時間の多くを無駄にしてしまった。というのも、新しいMacに移行した際に新しくブログのレポジトリをcloneしたんだけど、中身を見たら静的HTMLしか見当たらない。というかOctopressそのものが見当たらない。 あるのはmarkdownから生成されたと思われるhtmlファイルばっかり。「なんてこった！！！markdownで書いた記事はどこか別の場所で管理していて、それをGithubにはpushしていなかったんだ！今まで書いた記事が消失してしまった。やってもたー！！！」

それで、静的HTMLからmarkdownへがんばって変換して、復旧が完了した時にふと読んだOctopressの解説記事で source ブランチがあることを知った。恐る恐る source にcheckoutするとmarkdownで書かれた記事とOctopressがあるじゃないですか！

この発見はすごくショッキングだったけど、きっと未来の自分は忘れているんだろう。ということで、メモ。

  • https://github.com/kimh/kimh.github.io には master と source ブランチがある。
  • source にはmarkdownで書いた記事とOctopressがある
  • master にはmarkdownからOctopressが生成した静的HTMLファイルがある
  • http://kimh.github.io/ は master を表示している
  • 記事を編集する時は source で行う
  • というか、基本 master にcheckoutすることはない

Octopressのディレクトリ構成 (sourceブランチ)

多くの時間を無駄にしてしまった原因の一つにそもそもOctopressのファイル構成を理解していなかったことがある。幸い今回の復旧作業ではそれ学ぶことができた。

以下は、kimh.github.io配下の重要ディレクトリ。

source/_postsディレクトリにはmarkdown記事が置いてある。ブログの編集作業の大半はここにあるファイルを編集することになる。

source/_includesとかsource/_layoutsにはOctopressがブログサイトを構成するためのhtmlファイルが置いてある。ブログサイトそのものを変更したければここを直接いじることになる。3rd Party Themeがインストールされるのもここ（後述）

.themesには3rd Party Themeを置く。置き方は、git clone https://github.com/rwwaskk/linkedlist.git .themes/linkedlistのようにするのが一般的な方法のよう。 .themesに置いたら、rake install['name-of-theme']でインストールできる。このコマンドを実行すると、source　配下にthemeが生成したHTMLやCSSやJavascriptが生成される。

ブログサイトそのものに変更を加える

前述したように、Octopressはsource配下にあるファイルから静的HTMLを生成して、3rd Party Themeはsource配下にインストールされる。しかし、時にはThemeが気に入らなくて自分で変更を加えたいこともあると思う。

例えば今回の復旧作業でThemeをLinked Listインストールした状態だとブログのタイトルを site.sub_title から取得しようとしている。コードはlinkedlist/source/_layouts/home.html

自分的にはここは site.title からとって欲しい。じゃー、どのファイルを編集するのかというと、一つは、.themes/linkedlist/source/_layouts/home.html 編集して、rake install['name-of-theme'] で再インストールする。

もう一つは、source/_layouts/home.htmlを直接編集する。ここで一つ注意するのは、themeを再インストールするとsource/配下は全て置き換えてしまうので自分で加えた変更も上書きされてしまう。

なので、この方法で編集した際はなんらかの理由でthemeを再インストールする時は要注意。(じゃー、やっぱりThemeのほうを変更すればよくない？と思うかもしれないけど、themeに自分の変更を加えるのはなんかおかしいと思う。この疑問は未解決。)

よく使うOctopressコマンド

rake new_post[“new-post-title”]

新しい記事を作成する。

rake generate

sourceにあるファイルをpublic配下に静的HTMLとして生成する。

rake preview

http://localhost:4000 を立ち上げて、public配下をブラウザからアクセスできるようにする。

rake setup_github_pages

Github Pageにデプロイするために一度だけ実行しないといけない。

rake deploy

public配下にあるファイルを_deployディレクトリにコピーして、master ブランチにpushする。少ししたら、ブログのurlからアクセスできるようになる。

rake gen_deploy

generateとdeployを一気に行う。とりあえず、deployしたい時はこれを実行しておけば問題ない。