読者です 読者をやめる 読者になる 読者になる

mfks17's blog(のぼりエスカレーターの右側を駆け上がる)

趣味や思った事を書いていくと思います

herokuにoctpressをデプロイ

heroku octpress

参考サイト様

今回の検証環境

  • 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.

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

なので、とりあえず

$ 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 したときに怒られた時の対処法

$ 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を消していないと思われるので(自分はやらかしました)きちんと消しておいてください。

では、改めて



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 ブログ記事のプレビュー方法に関して追記しました。