さくらのレンタルサーバ上でJekyllブログを公開

このエントリーをはてなブックマークに追加

はじめに

Jekyllとは

JekyllとはRuby製の静的サイトジェネレータです。
Ruby on Railsはユーザからのリクエストを受けて、データベースに格納したデータを元に HTMLを生成して返す動的サイトを構築することができます。一方、Jekyllはデータベースを持たず、 HTML, Markdownで記述したコンテンツとレイアウトなどのテンプレートを組み合わせて、 HTMLを出力するだけのシンプルなツールです。最近ではgithub pageでのブログ作成などに使われています。

Jekyll公式ページ

この記事でやること

Jekyllでブログを公開する場合、github pageを利用するのが一般的のようですが、 今回は、別のレンタルサーバを利用して、ブログサイトを作成してみます。

Jekyllで生成したHTMLファイルをFTPでサーバにアップロードすることもできますが、 github pageと同じように、gitコマンドを利用してデプロイする仕組みを作ります。

作業の流れ

  1. ローカルマシンにjekyllをインストール
  2. サーバにgitインストール
  3. サーバにjekyll用のベアリポジトリを作る
  4. サーバにブログ公開用gitリポジトリを作る
  5. おまけ(もう少し便利に使うために)

環境

ローカルマシン

  • Mac OSX(10.8)
  • git 1.8.5.2
  • gem
    • jekyll v0.12.0
    • jekyll-bootstrap v0.2.13

サーバ

  • さくらレンタルサーバ(FreeBSD 9.x)
  • git 1.8.1

ローカルマシンにjekyllをインストール

まずは開発用のローカルマシンにJekyllをインストールします。 今回、Jekyll-BootstrapというBootstrapなどのテーマを内包した フレームワークを利用して作業を行います。

これ以降、ローカルマシン上での作業は[local]、レンタルサーバ上の作業は[server]という プロンプトで表しています。

Jekyllのインストール

1
[local] gem install jekyll

Jekyll-Bootstrapのインストール

1
[local] git clone https://github.com/plusjade/jekyll-bootstrap.git

これだけでローカルマシンで静的サイトを確認することができます。

1
2
[local] cd jekyll-bootstap
[local] jekyll --server

ブラウザからlocalhost:4000にアクセスするとサンプルページが表示されます。
(ローカルマシンへのgitインストールの手順は省略します。)

サーバにgitをインストール

次は、さくらのレンタルサーバにgitをセットアップします。
最終的に、ローカルマシン上でJekyllで生成したHTMLファイル一式をgit pushでサーバにデプロイをしたいため、 サーバにもgitをインストールする必要があります。

1
2
3
4
5
6
7
8
[server]$ cd ~/local/source
[server]$ tar zxvf git-1.8.1.tar.gz
[server]$ wget http://git-core.googlecode.com/files/git-1.8.1.tar.gz
[server]$ cd git-1.8.1
[server]$ ./configure --prefix=$HOME/local
[server]$ gmake
[server]$ gmake install
[server]$ ~/local/bin/git --version

ログインシェルの変更

さくらレンタルサーバのログインシェルを デフォルトでcshになっています。 最近ではcshを使うことも少ないのでbashに変更します。

1
2
[server]$ cat /etc/shells
[server]$ chsh -s /usr/local/bin/bash

rcファイル、profileファイルの作成

続いて.bashrcと.bash_profileを作成します。

.bashrc

1
2
3
[server]$ vi .bashrc

PATH=$HOME/local/bin:$PATH

.bash_profile

1
2
3
4
5
[server]$ vi .bash_profile

if [ -f $HOME/.bashrc ]; then
  source $HOME/.bashrc
fi

設定を有効にするため再度ログインし直すか、 sourceコマンドで.bashrcを再読み込みします。

1
[server]$ source ~/.bashrc

gitの実行ファイルにPATHが通ってることを確認します。

1
2
[server]$ git --version
git version 1.8.1

バージョンが表示されたらインストール作業は完了です。

サーバにJekyll-Bootstrap用のベアリポジトリを作成

レンタルサーバ上に、ローカルマシンで作成したHTMLのデプロイ先となるベアリポジトリを作ります。 このリポジトリはweb公開用ではなく、中間のリポジトリという位置づけになります。

1
2
3
[server]$ mkdir -p ~/repo/jekyll-bootstrap
[server]$ cd ~/repo/jekyll-bootstrap
[server]$ git init --bare

ローカルマシンからベアリポジトリへデプロイできるか試してみます。

1
2
3
[local] cd jekyll-bootstrap
[local] git remote add deploy ssh://<username>@<server_domain>/~/repo/jekyll-bootstrap
[local] git push deploy master

するとここでエラーが発生してしまいました。

1
2
3
[local] git push deploy master
bash: git-receive-pack: command not found
fatal: The remote end hung up unexpectedly

サーバのログインシェルをcshに戻すと、git pushが成功するので、 ログインシェルをbashに変更したことがエラーの原因のようです。
調査したところ、さくらのレンタルサーバではssh経由でコマンドを実行したときは、.bashrcが読み込まれないことがわかりました。 そのため、sshで接続した後にgitコマンドのPATHが見つからず、エラーとなっています。 sshで接続した後、/home/<username>/binにはPATHが通っているので、ここにgitの実行ファイルのシンボリックリンクを作成することで対処します。

参考情報:さくらインターネットをgitの共用リポジトリにする方法

シンボリックリンクの作成

1
[server]$ ln -s ~/local/bin/git* ~/bin

ローカルマシンから再度git pushを実行。

1
[local] git push deploy master

今度はデプロイ成功しました。 これでローカルマシンで生成したHTMLなどのコンテンツをサーバ側にデプロイできます。

サーバにブログ公開用リポジトリを作る

ベアリポジトリにpushした公開するのではなく、別に公開用のリポジトリを作成します。

さきほど作成したベアリポジトリをcloneします。
clone先のリポジトリがブログ公開用のディレクトリになります。 レンタルサーバ上の~/www/以下が公開用のディレクトリになっているため、このディレクトリ以下にcloneします。

1
[server]$ git clone ~/repo/jekyll-bootstrap ~/www/jekyll-bootstrap

ブラウザでさくらのレンタルサーバで割当てられているドメインのURLへアクセスすると、 Jekyllのサンプルページが確認できます。
<username>.sakura.ne.jp/jekyll-bootstrap/_site

URLを変更する場合は、さくらのコントロールパネルでドメイン設定でお好みのパスに変更してください。

ベアリポジトリへのpushのタイミングで、公開用リポジトリ更新

ここまでの状態だと、ブログのコンテンツをデプロイするために、 合計2回gitコマンドを実行すり必要があります。

  1. ローカルマシンのgitリポジトリ -> サーバのベアリポジトリ (git push)
  2. サーバの公開用リポジトリ <- サーバのベアリポジトリ (git pull)

2回目はわざわざサーバにログインする必要があり少々煩雑です。 そこで、git hookというgitのコールバックの仕組みを利用して、 ローカルマシンで実行するgit pushに連動して、公開用リポジトリのgit pullを実行するように設定します。

ベアリポジトリの更新後に別のタスクを実行するには、 hooksディレクトリにpost-updateファイルを作成して、 ベアリポジトリが更新された後に実行するスクリプトを記述します。

1
2
3
4
5
6
[server]$ cd ~/repo/jekyll-bootstrap/hooks
[server]$ cp post-update.sample post-update
[server]$ vi post-update

cd $HOME/www/jekyll-bootstrap
git --git-dir=.git pull

post-update内のスクリプトは 1. 公開用リポジトリに移動 2. git pullを実行

git pullで--git-dir=.gitオプションを指定しています。 通常の開発でgitを利用している場合、使うことのないオプションだと思います。 パスを正確に記述すると、--git-dir=$HOME/www/jekyll-bootstrap/.gitとなります。 このオプションは、gitコマンドを実行するリポジトリを指定するためのもので、 リポジトリの.gitディレクトリを値に指定します。

post-updateファイル内に記述されたシェルスクリプトは、 ベアリポジトリのpost-updateフックで実行されるため、 post-update内のitコマンドは、ベアリポジトリに対する命令だと解釈されてしまいます。

そのためオプション無しの場合、公開用リポジトリに対してgit pullを実行してるつもりが、 ベアリポジトリでgit pullを実行していることになります。 「公開用リポジトリに対するpull命令ですよ!」と教えてあげるためのオプションです。

厳密にいうとシェル内では環境変数GITDIRがベアリポジトリ側を指したままになっています。 cdコマンドの前にunset GITDIRというコマンドを追加することで、 –git-dir=.gitオプションを指定するのと同じことが実現できます。

公開用リポジトリに必要なファイルだけ反映

ベアリポジトリ内のファイルで公開に必要なのは_siteディレクトリのファイルのみです。 今はベアリポジトリの全ファイルを反映しているので、 _siteディレクトリだけpullしてくるように変更します。

これにはgitのsparse checkoutという機能を使います。git 1.7.0以降で使えます。

1
2
3
4
[server]$ cd ~/www/jekyll
[server]$ git config core.sparsecheckout true
[server]$ echo _site/ > .git/info/sparse-checkout
[server]$ git read-tree -m -u HEAD

やってることは、

  • configの設定でsparse checkout機能を有効にする
  • sparse-checkoutのリストに必要なファイルを追加
    (不要ファイルを追加する場合は!index.mdのように書く)
  • ブランチの最新(HEAD)のツリー情報を読み込んで、現在のブランチをマージ&アップデートする

これで、Jekyllブログをさくらのレンタルサーバで公開することができるようになりました!!

comments powered by Disqus