herokuにoctpressをデプロイ - mfks17's blog（Life is Good !!）

参考サイト様

今回の検証環境

macbookair Late 2010
macbookair Mid 2012
OSX 10.8.2
Xcode4.5.2 インストール済み（Command Line Toolsも）

まずはRubyです
なんかRubyのバージョンが1.9.2以降じゃないといけないみたいです。

自分はrbenvで1.9.3の環境があるのでOK。
ここではインストール方法を割愛しますがこちらが詳しいです。

Octopressの取得

githubから落としてきます。

git clone http://github.com/imathis/octopress.git ~/git/octopress

落としてきたリポジトリに移動してRubyのバージョンを確認しましょう。

$cd git/octpress

$ ruby --versiion

ruby 1.9.3p327 (2012-11-10 revision 37606) [x86_64-darwin12.2.0]

次にBundlerをインストールします。

$ gem install bundler

Successfully installed bundler-1.2.3

1 gem installed

Installing ri documentation for bundler-1.2.3...

Installing RDoc documentation for bundler-1.2.3...
$ rbenv rehash 

$ bundle install

Fetching gem metadata from http://rubygems.org/........

Fetching gem metadata from http://rubygems.org/..

Using rake (10.0.3) 

Using RedCloth (4.2.9) 

Using chunky_png (1.2.6) 

Using fast-stemmer (1.0.1) 

Using classifier (1.3.3) 

Using fssm (0.2.9) 

Installing sass (3.2.4) 

Using compass (0.12.2) 

Using directory_watcher (1.4.1) 

Using haml (3.1.7) 

Using kramdown (0.13.8) 

Using liquid (2.3.0) 

Using syntax (1.0.0) 

Using maruku (0.6.1) 

Using posix-spawn (0.3.6) 

Using yajl-ruby (1.1.0) 

Using pygments.rb (0.3.4) 

Using jekyll (0.12.0) 

Installing jsmin (1.0.1) 

Using rack (1.4.1) 

Using rack-protection (1.3.2) 

Installing rake-minify (0.4.0) 

Installing rb-fsevent (0.9.3) 

Using rdiscount (1.6.8) 

Installing redcarpet (2.2.2) with native extensions 

Using rubypants (0.2.0) 

Using tilt (1.3.3) 

Using sinatra (1.3.3) 

Using stringex (1.4.0) 

Installing tzinfo (0.3.35) 

Using bundler (1.2.3) 
$ bundle show

Gems included by the bundle:

  * RedCloth (4.2.9)

  * bundler (1.2.3)

  * chunky_png (1.2.6)

  * classifier (1.3.3)

  * compass (0.12.2)

  * directory_watcher (1.4.1)

  * fast-stemmer (1.0.1)

  * fssm (0.2.9)

  * haml (3.1.7)

  * jekyll (0.12.0)

  * jsmin (1.0.1)

  * kramdown (0.13.8)

  * liquid (2.3.0)

  * maruku (0.6.1)

  * posix-spawn (0.3.6)

  * pygments.rb (0.3.4)

  * rack (1.4.1)

  * rack-protection (1.3.2)

  * rake (10.0.3)

  * rake-minify (0.4.0)

  * rb-fsevent (0.9.3)

  * rdiscount (1.6.8)

  * redcarpet (2.2.2)

  * rubypants (0.2.0)

  * sass (3.2.4)

  * sinatra (1.3.3)

  * stringex (1.4.0)

  * syntax (1.0.0)

  * tilt (1.3.3)

  * tzinfo (0.3.35)

  * yajl-ruby (1.1.0)
$ rbenv rehash

bundle installコマンドが呼び出されたときに、それがプロジェクトのGemfileから必要なリストを読み込みます。最後に、デフォルトOctopressのテーマをインストールするには次のコマンドを実行します。

$ rake install

## Copying classic theme into ./source and ./sass

mkdir -p source

cp -r .themes/classic/source/. source

mkdir -p sass

cp -r .themes/classic/sass/. sass

mkdir -p source/_posts

mkdir -p public

ここでrakeのバージョンが違うよみたいなエラーがでました。

rake aborted!
You have already activated rake 10.0.3, but your Gemfile requires rake 9.2.2.2 Using bundle exec     may solve this.

どうやらこれは既知のバグみたいです。

Rails not running the gem in Gemfile

なので、とりあえず

$ gem uninstall rake -v 10.0.3

として、対応いしました。

では、気を取り直して
public/フォルダーの内容は、デフォルトでは、Octopressによってコンパイルされているので、デフォルトのGitのクローンでは、パブリックフォルダを無視します。.gitignoreファイルに含まれています。なのでpublic/フォルダの内容が、プッシュされるように、gitignoreファイルのpublicを削除します。

$ vi .gitignore

とりあえずこれでローカルの準備は整いました。
ではこれをherokuにデプロイします。

まずは、herokuのアカウントが必要なので、ない場合はここから作成します。
そして、ここからheroku toolbeltをインストールします
heroku toolbeltは、herokuのコマンドラインツールです。
以前はgemでインストールしていました。

では早速、heroku toolbeltでログインします。

$ heroku login

Enter your Heroku credentials.

Email: yourEmailAddress

Password (typing will be hidden): 

Found existing public key: /Users//.ssh/id_rsa.pub

Uploading ssh public key /Users//.ssh/id_rsa.pub

成功した場合は、Herokuのloginコマンドは、Herokuのサービスに自動的にSSH公開鍵をアップロードします。この理由は、Gitを使ってHeroku上に管理され、他の標準Gitのリモートリポジトリと同様に、SSHを介して行われます。

次に、このブログをホストするHerokuの上にアプリケーションを作成します。

$ heroku create

Creating thawing-beach-9900... done, stack is cedar

http://thawing-beach-9900.herokuapp.com/ | git@heroku.com:thawing-beach-9900.git

Git remote heroku added

Herokuはアプリケーションのためのランダムな名前を生成します。作成した後、任意のHerokuのアプリケーションの名前を変更することができます。

cloneしてきたリポジトリの名前を変更します。

## クローンしてきたリポジトリのディレクトリをリネーム

$ mv ../octpress ../typopress

$ heroku rename typopress

Renaming thawing-beach-9900 to typopress... done

http://typopress.herokuapp.com/ | git@heroku.com:typopress.git

Git remote heroku updated

この時点で我々はHerokuのアプリは、ローカルのOctopressのリポジトリにリンクされました。

ともあれ、これでブログをデプロイする準備ができました。
記事の作成のしかたはbundle exec rake new_post["Blog_title"]です

$ bundle exec rake new_post["Get blogging with Octopress on Heroku"]

mkdir -p source/_posts

Creating new post: source/_posts/2013-01-26-get-blogging-with-octopress-on-heroku.markdown

Octpressはmarkdownフォーマットで記事を書きます。

お気に入りのエディタで編集しましょう。ちなみにボクはSublime Text 2です

$ subl source/_posts/2013-01-17-get-blogging-with-octopress-on-heroku.markdown

フォーマットはこんな感じ()

---
layout: post
title: "Get blogging with Octopress on Heroku"
date: 2012-01-14
comments: true
categories: [heroku]

Hello World!!

ここで_config.ymlを書き換えてテンプレートを変更しましょう。

# ----------------------- #
# Main Configs #
# ----------------------- #

url: http://your.site/ # ここherokuアプリのURL
title: My Octpress Blog
subtitle: A blogging framework for hackers.
author: Your Name
simple_search: http://google.com/search
description:

〜〜〜〜〜

# ----------------------- #
# 3rd Party Settings #
# ----------------------- #

# Github repositories
github_user:
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

# Twitter
twitter_user:
twitter_tweet_count: 4
twitter_show_replies: false
twitter_follow_button: true
twitter_show_follower_count: false
twitter_tweet_button: true

# Google +1
google_plus_one: false
google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user: # google+にアクセスしたときのURLの文字列
googleplus_hidden: false

# Pinboard
pinboard_user:
pinboard_count: 3

# Delicious
delicious_user:
delicious_count: 3

# Disqus Comments
disqus_short_name:
disqus_show_comment_count: false

# Google Analytics
google_analytics_tracking_id:

# Facebook Like
facebook_like: false

これで次に行う記事の生成の際に設定される項目が変更できます。

そして次のコマンドで記事を生成できます。
では、記事を生成します。

$ bundle exec rake generate

## Generating Site with Jekyll

unchanged sass/screen.scss

Configuration from /Users/some/pathf/octopress/_config.yml

Building site: source -> public

Successfully generated site: source -> public

ここで、public/index.htmlでプレビューを見ることができますので、記事を完成させましょう。

プレビューで気に入らなかった場合は、再度
source/_post/2013-01-17-get-blogging-with-octopress-on-heroku.markdown <- 編集する記事
を編集して再度bundle exec rake generateを実行し、public/index.htmlでプレビューします。

2013/01/30追記

上記のままでは、記事の見た目が反映されずに、殺風景な見た目になってしまい、イメージが使い見にくいです。
まず、以下のコマンドを実行します。
$ bundle exec rake watch
このコマンドは、source/ディレクトリとsass/ディレクトリの変更を監視します。
実際にコマンドを実行すると、
$bundle exec rake watch
Starting to watch source with Jekyll and Compass.
Configuration from /Users/typosterr/github/typopress/_config.yml
Auto-regenerating enabled: source -> public
[2013-01-31 00:19:45] regeneration: 97 files changed

Dear developers making use of FSSM in your projects,
FSSM is essentially dead at this point. Further development will
be taking place in the new shared guard/listen project. Please
let us know if you need help transitioning! ^_^b
- Travis Tilley
こんな感じになります。
そして、
$ bundle exec rake preview
を実行すると、ローカルホストにサーバが立ち上がり4000ポートでアクセス出来るようになります。
http://localhost:4000
これで、プレビュー出来るようになります。
また、この状態でブログを更新すると
$ vi octopress/source/_post/記事のファイル.markdown
~~~
なんらかの変更
~~~
すると、
>>> Compass is watching for changes. Press Ctrl-C to Stop.
[2013-01-31 00:23:16] regeneration: 1 files changed
みたいな感じで、変わります。
ここで、ブラウザをリロードすると、変更箇所が更新されます。
これで心置きなく、編集できますね。

問題がなければ、herokuにデプロイします。

$ git add .

$ git commit -am 'Initial commit with our first post, get blogging with octopress on heroku'

ここまでのローカルのリポジトリをheroku上にpushすることができます。
git push したときに怒られた時の対処法

Herokuで鍵がPermission denied (publickey).　になる時

$ git push heroku master

Counting objects: 4189, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (1509/1509), done.

Writing objects: 100% (4189/4189), 994.11 KiB | 149 KiB/s, done.

Total 4189 (delta 2391), reused 4090 (delta 2344)










> Deleting 3 files matching .slugignore patterns.
> Ruby/Rack app detected
> Installing dependencies using Bundler version 1.3.0.pre.5




       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin --deployment

       Fetching gem metadata from http://rubygems.org/..........

       Fetching gem metadata from http://rubygems.org/..

       Installing rack (1.4.1)

       Installing rack-protection (1.3.2)

       Installing tilt (1.3.3)

       Installing sinatra (1.3.3)

       Using bundler (1.3.0.pre.5)

       Your bundle is complete! It was installed into ./vendor/bundle

       Cleaning up the bundler cache.










> Discovering process types




       Procfile declares types     -> (none)

       Default types for Ruby/Rack -> console, rake, web










> Compiled slug size: 948K
> Launching... done, v4




       http://typopress.herokuapp.com deployed to Heroku
To git@heroku.com:typopress.git

 * [new branch]      master -> master

ここまできたら、http://<アプリ名>.heroku.com.にアクセスして、きちんとデプロイされているか確認して見てください。

ブラウザに

Sorry, I cannot find/

と出てしまったら、.gitignoreのpublicを消していないと思われるので（自分はやらかしました）きちんと消しておいてください。

Octopress on Heroku

では、改めて

http://typopress-en.herokuapp.com

まとめ

少しのgitの知識があればgemの依存関係なんて知らない僕でも簡単にできました。
ちなみにOctpressのリポジトリはgit push heroku masterとやりますが

$ git push

とかやって、guthub上のリポジトリになんかしでかしちゃうのでないか（権限もないのでそんなことはないと思いますが）とおもったので、Bitbucketに別のリポジトリを作ってそっちにoriginの方はremoteにするようにしました。

こんな感じです。

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
[remote "origin"]
    fetch = +refs/heads/*:refs/remotes/origin/*
    url = ssh://git@bitbucket.org/typosterr/typopress.git
[branch "master"]
    remote = origin
    merge = refs/heads/master
[remote "heroku"]
    url = git@heroku.com:typopress.git
    fetch = +refs/heads/*:refs/remotes/heroku/*
[gitflow "branch"]
        master = master
        develop = develop
[gitflow "prefix"]
        feature = feature/
        release = release/
        hotfix = hotfix/
        support = support/
        versiontag = 
[branch "develop"]
        remote = origin
        merge = refs/heads/develop

herokuコマンドがなくても[remote "heroku"]
の箇所を書き換えればURLを変更できました。
（ポータルサイトでの変更もできるようです）

最後までお読みいただき、ありがとうございました。

追記

2013/01/30 ブログ記事のプレビュー方法に関して追記しました。