rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress

20141112_en_200_200

英語でもブログを書いてみようということで、 GitHub Pagesを使って別ブログを作ってみました。

英語用ブログ

GitHubに色々公開して説明を書くときに READMEに載せきれない部分を適当にブログに書いてたりしますが、 英語でも色々書きたいと思ってて、 でもここにいきなり英語で書くのも何なので別のブログを作りたいな、と思ってました。

丁度そんなことを言われたこともあって 1 作ってみました。

GitHub Pages

別ブログ、と言ってもこのブログ同様にGitHub Pagesを使っていて、 単にレポジトリを変更して下の階層に入れてるだけです。

GitHub Pagesでサイトを公開したいとき、

  • User site: user.github.ioというレポジトリを作ってそのmasterブランチ
  • Project site: その他のディレクトリのgh-pagesブランチ (Project site)

がそれぞれ

  • User site: http://user.github.io
  • Project site: http://user.github.io/project

というURLで自動的に公開されます。

一つ注意しなくてはいけないのは、例えばprojectというレポジトリを持っていて、 そこでgh-pagesブランチを作ってサイトを公開したいとき、 user.github.ioレポジトリのmasterブランチにprojectという 同じ名前のディレクトリやファイルがあると http://user.github.io/projectにアクセスした時、 user.github.ioにあるディレクトリやファイルを優先して見に行ってしまう点です。

User siteの方に同じ名前の物があると、Project siteの方は全て無視されます。

また、一度間違ってUser siteの方でデプロイしてしまうと、 projectに当たるファイルやディレクトリを消してデプロイしなおしても projectの方を再度デプロイするまで反映されないので注意です。

GtHub Pagesについて

New blog with Octopress + Octogray, in GitHub Pages

ということでブログを作っていきます。 今回はenというレポジトリを作って http://rcmdnk.github.io/en/という形で 公開される物を作りました。

レポジトリの準備

まずレポジトリをGitHubに準備します。 GitHub websiteから作るか、 コマンドラインから次のようにしても作れます。

$ repo=<"user.github.io" or "what you want">
$ user=<username>
$ read -s # Enter your password
$ twofac=XXXXXX # if necessary, otherwise remove following '-H "...twofac"' section.
$ curl -u ${user}:${pass} -H "X-GitHub-OTP: $twofac" https://api.github.com/user/repos -d "{\"name\":\"$repo\"}"

Octopressのインストール

別のレポジトリに入れるので、Octopressをこのブログ用とは別に用意します。 ディレクトリ名はenだけだとちょっとわかりづらいので、octopress_enとしました。

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

User siteを使う場合、Octopressはsourceというブランチを自動的に作って作業を行います。 (masterブランチは別途deploy用のものになるため混同しないように).

Project siteの場合にはmasterブランチのまま作業を進めようとしますが、 masterブランチをOctopressのアップデートを追うように使いたいので、 ここでもsourceブランチを作って作業を行います。

$ git checkout -b source

Octograyのインストール

このサイトのテーマの octogray を使います。

サブモジュールとして加えて、中にあるsetupファイルでセットアップ:

$ git submodule add [email protected]:rcmdnk/octogray.git .themes/octogray
$ .themes/octogray/setup.sh -y
$ rake setup_github_pages["[email protected]:rcmdnk/en"]
Do you want to use 'md' extension instead of 'markdown'? [y/n]: y
Do you want to push_ex (renew remote repository evry time)? [y/n]: y
Enter where you want to put _deploy (current: /path/to/install/dir/): ~/tmp/octopress/en
rm -rf ~/tmp/octopress/en/public/en
## Site's root directory is now '/en' ##

上のsetupの中でOctopressで通常最初に必要なbundle installやrake install['octogray'] のテーマのインストール等を行ってくれます。

セットアップ後、GitHub Pagesの設定をsetup_github_pagesで行っています。 Octograyの設定で、記事のsuffixをmarkdownからmdに変更し、 さらにdeploy時に使うpushをpush_exに変更しています。 また、deployに使うディレクトリをOctopressの中から別の場所に変更しています。

Octopressのpublic/_deployディレクトリの変更

push_exはdeploy_dirを常にテンポラリーなものにして、 毎回新しい物をpush -fでレポジトリに送ります。 つまりGitHubのレポジトリでは変更の履歴無しの状態になります。

これは、もし間違えて載せてはいけない情報とかをデプロイしてしまった時に便利です。 後、恥ずかしい変更もささっと何もなかったかのように消せますsweat_smile

実際の編集履歴はsourceの方で別に自分で管理し、 必要な変更履歴はサイトにきちんと書くとして、 公開されるGitHubのサイトのソースの履歴を残しておくのは嫌なのでこれを使っています。 毎回全部送るので、非常に大きなサイトだとちょっと時間がかかるかもしれませんが、 今のところgenerateする時間に比べてそれ程気にならないので。

_config.ymlの変更

サイトのURL等は上で住んでいますが、サイト名など、 _config.ymlで必要なところを変更します。

Project siteを作る際には少し注意することがあって、 カスタムドメイン 2 にしない限り、上に書いたようにUser siteの下につく形になるので トップディレクトリはUser siteのものになります。

ただし、Octopressでは、記事中に/...のようなhttp://無しの絶対パスを書いた場合、 それに_config.ymlで指定したrootの値を補完する機能がついています。

これはplugins/octopress_filters.rb中のexpand_urlsという関数で行われ、 source/_layouts/default.html の中で使われています。

見ると分かるように、これはhead.htmlやheader.html、footer.html には適用されません。 なので、逆にこれらのファイルではroot_urlという値(_config.ymlのrootに対応?) がJavaScriptの前などに付いてたりします。

なのでそのあたりを気をつけて_config.ymlの中でも値を設定する必要があります。

Octograyの中で使う値として、自分のレポジトリの/images ディレクトリの物を使いたい場合、次の様にする必要があります。

  • favicon: in head.html: need to be /en/images/…
  • titlelogo: in custom/header.html: need to be /en/images/…
  • aboutme_logo: in custom/asides/about.html: need to be /images/…

ローカルでテストしたりする必要がなければhttp...からフルで書いておけば間違いないです。

その他の問題として404 pageの問題があります。

GitHub Pagesでは自分で好きな404 pageを作れますが 3、 これは一番上のディレクトリに置いた場合だけ有効なので、 Project siteの場所に置いても有効になりません。

また、GitHub pagesでは.htaccessなどがサポートされてないので 4、 Project site以下の所で404になった時だけ、みたいな設定を行うことが出来ません。

従って、カスタムドメインにしない限りはProject siteの 404 pageはUser siteの物と共通になります。

なので、そちらの方でどちらでも使える様なものにしておくくらいしか 今のところ対処法は思いつきません。

記事を作ってサイトを構築してデプロイしてみる

準備が整った所で記事を作ってみます。

$ rake new_post['test']

source/_posts/20XX-XX-XX-test.mdというファイル(XXはその日の日付) ができてるのでこれを編集するか、 下みたいな感じで変更してみます。

$ post=$(rake new_post["test"]|grep "Creating new post"|cut -d: -f2)
$ sedi 's/published: *false/published: true/' $post
$ sedi 's/categories:/categories: cat/' $post
$ sedi 's/tags:/tags: tag/' $post
$ sedi "s/<\!-- *more *-->/This is test post."\\$'\n'"<\!-- more -->/" $post
$ sedi "s/{% include after_excerpt.html %}/{% include after_excerpt.html %}"\\$'\n'"# Test Sectiontest"\\$'\n'"test test./" $post

できたら、

$ rake gen

とすればサイトが出来上がります。 genはOctograyによって導入された新しいタスク名で、 単にgenerateの短縮です。

他にも色々追加があるのでrake -Tとして見てみてください。 特にrake gen_onlyは便利だと思います。

Octopressでチェック用に高速にgenerate/previewする

Octopressのgenerate_onlyをモット便利に

Octopressのgenerate_onlyをモット便利に2

サイトのソースは~/tmp/octopress/enにpublicというディレクトリで 出来てるはずです。

この中に~/tmp/octopress/en/public/en/という形でサイトが入ってると重います。

チェックするためにrake previewしてhttp://localhost:4000/ をブラウザから見てみます。

もしくはMacならPowが便利です。

Octopressでのプレビュー方法

Pow用には下のようにリンクを作って

$ cd ~/.pow && ln -s ~/tmp/octopress/en ./octopress_en

http://octopress_en.dev/en/ を開けば見れます。

もし大丈夫そうならデプロイしてみます。

$ rake deploy

上手くいけば http://rcmdnk.github.io/en/ にサイトができているはずです。 (最初は10分くらいかかるときもあるみたいです。)

ソースを別途管理

途中で書いたように、 Octopress(Jekyll)で変換する前の物は履歴も含めて 別途管理します。

これは公開する必要もないししたくもないのでプライベートな物を使うため、 Bitbucketを使います。 (GitHubではプライベートレポジトリは有料ですがBitbucketは無料です。)

管理するため、まずBitbucketにアカウントが無ければ作って、 管理用のレポジトリを用意しておきます。

ここではユーザー名rcmdnkでoctopress_enというレポジトリで管理します。

$ git remote add bitbucket [email protected]:rcmdnk/octopress_en
$ git push -u bitbucket source

これで、sourceブランチがbitbucket/sourceに繋がったので、 後は変更を保存したいときに

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

とすればOKです。

GitHub pages + Octopressの導入

New blog with Octopress + Octogray, in GitHub Pages - rcmdnk’s blog

Sponsored Links

  1. Please translate the article on your webpage about homebrew file into english · Issue #12 · rcmdnk/homebrew-file ↩

  2. Setting up a custom domain with GitHub Pages - User Documentation ↩

  3. Custom 404 Pages - User Documentation. ↩

  4. Redirects on GitHub Pages ↩

Sponsored Links

« Mac OS Xでアカウント名を変更する方法 Homebrew-fileでApp Storeのアプリの情報も残せる様にした »

}