このブログをGitHubPagesに移行し、同時にWordPressからjekyllでの静的ページ生成に切り替えたので。移行のメモとして、GitHubPagesとjekyllでサイトを作成する手順を残しておきます。

GitHubPageではjekyllを使って動的にサイト生成する機能があるのですが、pluginなどを自由に拡張できないなどの制約があるので、Shippableでページを生成して、静的ファイルをホスティングする流れでいきます。全体の流れを以下の図に示します。

ShippableとGitHubPages全体図

この手順を実施する際に以下のページを参考にさせていただきました。 Shippableの場合はsshkeyがあるのでTravisのよりも、シンプルに実現できました。

Middleman で作った web サイトを Travis + GitHub pages でお手軽に運用する http://tricknotes.hateblo.jp/entry/2013/06/17/020229

GutHubPagesを準備する

GitHubPagesとは

GitHubPagesとは、GitHubのサーバで静的なWebサイトをホスティングする機能です。サイトのソースコードがGitHubのリポジトリで管理されます。

HTML, CSS, Japascript, ImageなどをリポジトリにpushするとWebサイトとして公開されるという仕組みです。

詳しくはこちら、 https://pages.github.com/

GitHubPageを準備する

手順は、先ほどのページに書いてありますが。「[githubのアカウント名].github.io」という名称のリポジトリをgithubに作成して。「index.html」ファイルをpushすれば準備完了です。

しばらく待ってから、http://[githubのアカウント名].github.io/にアクセスするとサイトが確認できます。（※ 私の場合、10分と少しほど待てば確認出来ました。）

PCへのjekyllセットアップ

jekyllとは

jekyllとは、markdownやtextile記法で書かれたテキストファイルを、静的なWebサイトやブログに変換するツールです。GitHubPagesやOctpressというブログツールなどで利用されています。

詳しくはこちら、http://jekyllrb.com

jekyllのセットアップ

まずはローカルPCにjekyllをセットアップします。rubyの環境が構築出来ている前提で話をすすめます。（※私の場合は、MacOSX&rbenvでruby2.1.2でやっています）

bundlerで、jekyllをセットアップします。

Gemfileを次のように作成

source 'https://rubygems.org'
gem 'jekyll'

以下のように、インストールと初期化を実施。

$ bundle install --path vendor/bundle
$ bundle exec jekyll new source
$ mv source/.gitignore ./
$ mv source/_config.yml ./

_config.ymlに以下を追記しておきます。

# Global settings
source: source

※_config.ymlの設定についてはこちら、http://jekyllrb.com/docs/configuration/

ここまで出来たら以下のコマンドから、開発用Webサーバを起動し、http://localhost:4000/ で表示を確認出来るはずです。

$ bundle exec jekyll serve

.gitignoreに、以下を追加しておきます。

# Ignore vendor gems
/vendor/bundle

ここで一度commitしておきます。

$ git init
$ git add --all
$ git commit -a -m "install jekyll"

このリポジトリをbitbucketの非公開リポジトリにpushしておきます。手順は、bitbucketで新規リポジトリを生成した後に出てくる、既存リポジトリの登録方法を参照してください。

GitHubPagesへの公開

それでは、ローカルPCからjekyllで生成したページをGitHubPagesに公開します。

まず、_site以下に、GitHubPages用のリポジトリを取り込みます。

$ rm -rf _site
$ git clone git@github.com:[あなたのID]/[あなたのID].github.io.git _site

jekyllでページを生成します。

$ bundle exec jekyll build

_site以下でcommit/pushを行い、変更をGitHubPagesに反映します。

$ cd _site
$ git add --all
$ git commit -m ""
$ git push
$ cd ../

ここまで出来たらhttp://[あなたのID].github.io/ でサイトの表示を確認出来るはずです。

Shippableでの配備の設定

Shippableとは

Shippableとはアプリケーションの継続的インテグレーションと配備の機能を提供しているWebサービスです。類似のサービスにTravisCIやCircleCIなどがあります。

shippableでの継続的インテグレーションは、以下の２点を対応を行えば設定することができます。

対象リポジトリにshippable.ymlという定義ファイルを格納
ShippableにbitbucketのIDでログインし該当リポジトリをEnableに設定

詳しくはこちら、 http://www.shippable.com

Shippableでの配備設定を行う

前準備として、先ほど手動で行ったGitHubPagesへの公開の手順をRakefileとして作成しておきます。

REPO_URL='git@github.com:[あなたのID]/[あなたのID].github.io.git'

desc 'setup for github pages deploy'
task :setup do
  unless File.exists?('_site/.git')
    system 'rm -rf _site'
    system "git clone --quiet #{REPO_URL} _site"
  end
end

desc 'build site'
task :build do
  system 'rm -rf _site/*'
  system 'bundle exec jekyll build'
end

desc 'deploy to github pages'
task :deploy do
  msg = `git log -n 1 --oneline`.chomp
  system "cd _site && git add --all && git commit -m \"update with #{msg}\""
  system "cd _site && git push --quiet #{REPO_URL}"
end

以下のようにshippable.ymlを作成して、Rakefileで定義したtaskを呼び出すようにします。

language: ruby
rvm: 2.0.0
branches:
  only:
    - master
before_script:
  - rake setup
script:
  - rake build
after_success:
  - rake deploy

Shippalbeの管理画面で、Organizationを選び、Reposの中から対象のリポジトリを選び「Enable」を押すと、継続的インテグレーションを有効にします。

ただし、このままではShippableからGitHubに対してpushが出来ないので、以下の手順でGitHubにsshkeyを登録します。

Shippableの管理画面で、Organizationを選び、「Deployment Key」で表示される公開鍵をコピーします。
GitHubのアカウントSettingから「SSH Keys」を選び、「Add SSH Key」でShippableの公開鍵をペーストし、登録します

ここまで出来たら、次のようにbitbucketに変更をpushします。

$ git add shippable.yml Rakefile
$ git commit -a -m "install shippable"
$ git push

あとは、自動的にShippableがページを生成して、GitHubPagesにpushしてサイトが公開されます。（Shippableがバージョンアップした直後だからなのか、無償アカウントだからなのか、30〜40分くらい待たないと生成が開始しないみたいです。）

生成から配備までの流れは以上になります。ここまで設定すれば、あとは記事を追加して、bitbucketにpushすれば、サイト公開まで自動的に行われます。

WordPressもよく出来たアプリケーションですが、このような仕組みの方がソースと公開したファイルのバージョン管理がやりやすくて好きですね。