JanGaJan.com

Is fun? JOY!

Jekyllでブログを作ってみた

JekyllとHerokuを使ってBlogを作成しました。
サーバーにはUnicornを利用します。
githubはprivate repositoryが有料なので、bitbucketを使用。
せっかくなのでCIツールとして、werckerをお試しで。
よくよく考えるとHeroku使うんならどっちも要らないがさておき。


事前準備

アカウント作成

  1. heroku
  2. bitbucket(ついでにrepositoryも作成)
  3. wercker

jekyllインストール

jekyllのgemをインストールします。
テンプレートとして、jekyll-incorporatedを使ってみます。
なかなかいい感じにデザインしてくれる。

> gem install jekyll
> git clone https://github.com/kippt/jekyll-incorporated.git blog
> cd blog
> git branch myblog
> git checkout myblog

環境設定

環境用のファイルを作成。
heroku、wercker用の設定ファイルと、jekyllのmarkdownの設定をします。

blog
├── Gemfile      # 必要なGemを追加
├── Gemfile.lock
├── Procfile     # heroku用
├── _config.yml
├── config.ru    # heroku用
├── unicorn.rb   # heroku用
...
└── wercker.yml  # wercker用

Gemfile

+ gem 'rack-jekyll'
+ gem 'unicorn'

Procfile

+ web: bundle exec unicorn -p $PORT -c ./unicorn.rb

_config.yml

1
2
3
4
5
6
7
8
9
10
- exclude:     []
+ exclude:     ["vendor"]
- markdown:      maruku
+ markdown:      redcarpet
+ redcarpet:
+     extensions: ["no_intra_emphasis"
+                  ,"fenced_code_blocks"
+                  ,"autolink"
+                  ,"tables"
+                  ,"with_toc_data"]

config.ru

1
2
3
+ require "bundler/setup"
+ Bundler.require(:default)
+ run Rack::Jekyll.new(:destination => '_site')

unicorn.rb

1
2
3
+ worker_processes 1
+ timeout 30
+ preload_app true

wercker.yml

indentは半角スペース2つじゃないと怒られる。
ここでフォーマットのチェックができて便利ですね。

+ box: wercker/ruby
+ build:
+   steps:
+     - bundle-install
+     - script:
+         name: echo ruby information
+         code: |
+             echo "ruby version $(ruby --version) running!"
+             echo "from location $(which ruby)"
+             echo -p "gem list: $(gem list)"
+ deploy:
+   steps:
+   - heroku-deploy

Remote Repositoryにpush

ここまでの設定を保存します。 実際はちまちまコミットしちゃいました。
ついでにherokuでアプリ作成。

> bundle install
> git remote add bitbucket [email protected]:xxxx/jekyllblog.git
> git add .
> git commit -m 'initial commit for myblog'
> # bitbucketにpush
> git push bitbucket myblog
> # herokuに専用アプリ作成
> heroku create myblog

ちなみに、ここでherokuにpushして、heroku openすれば確認できる。
やっぱりこっちの方が楽なんじゃ…


wercker

いよいよwercker試してみます。

Add App

ここでは作業対象となるリポジトリを設定します。
(ADD APPLICATION)

Choose a Git provider

bitbucketを選択

Select a repository

pushしたbranchを選択

Add werckerbot

read権限だけつけて許可する

Setup your wercker.yml

準備済み!

My Apps

Add Appで登録したAppsを選択します。

Settings

Deploy targetsでHeroku APIキーの登録します。
Deploy target nameにheroku createしたアプリ名を設定します。

Builds

Build Passが通ったら、Deploy toからSettingsに設定したアプリ名を選択します。


動作確認

成功していればDeploysのデプロイ結果のURLからアクセス可能です。 (あるいはheroku open)

Comments