Octopress + Github Pagesな環境構築

  #Octopress

もはや様式美だけど自分のために。
公式のOctopress Documentationを参考に。

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.8.4
BuildVersion:	12E3067

$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.4.1]

$ gem -v
2.0.3

$ bundle -v
Bundler version 1.3.5

Octopressのセットアップ

参考 : Octopress Setup

# リポジトリをclone
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

# 必要なgemを入れる
$ bundle install
$ rake install
rake aborted!
You have already activated rake 0.9.6, but your Gemfile requires rake 0.9.2.2. Using bundle exec may solve this.
/Users/kobtea/Programs/octopress/Rakefile:2:in `<top (required)>'
(See full trace by running task with --trace)
# 失敗した
# 落ち着いてもう一度update
$ bundle update
$ 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 -T
rake clean                     # Clean out caches: .pygments-cache, .gist-cache, .sass-cache
rake copydot[source,dest]      # copy dot files for deployment
rake deploy                    # Default deploy task
rake gen_deploy                # Generate website and deploy
rake generate                  # Generate jekyll site
rake install[theme]            # Initial setup for Octopress: copies the default theme into the path of Jekyll's generator.
rake integrate                 # Move all stashed posts back into the posts directory, ready for site generation.
rake isolate[filename]         # Move all other posts than the one currently being worked on to a temporary stash location (stash) so regenerating the site happens much more quickly.
rake list                      # list tasks
rake new_page[filename]        # Create a new page in source/(filename)/index.markdown
rake new_post[title]           # Begin a new post in source/_posts
rake preview                   # preview the site in a web browser
rake push                      # deploy public directory to github pages
rake rsync                     # Deploy website via rsync
rake set_root_dir[dir]         # Update configurations to support publishing to root or sub directory
rake setup_github_pages[repo]  # Set up _deploy folder and deploy branch for Github Pages deployment
rake update_source[theme]      # Move source to source.old, install source theme updates, replace source/_includes/navigation.html with source.old's navigation
rake update_style[theme]       # Move sass to sass.old, install sass theme updates, replace sass/custom with sass.old/custom
rake watch                     # Watch the site and regenerate when it changes

試しにrake previewしてみる。

$ rake preview
Stkobteang to watch source with Jekyll and Compass. Stkobteang Rack on port 4000
directory source/stylesheets/
   create source/stylesheets/screen.css
Configuration from /Users/kobtea/Programs/octopress/_config.yml
[2013-09-22 20:52:05] INFO  WEBrick 1.3.1
[2013-09-22 20:52:05] INFO  ruby 2.0.0 (2013-06-27) [x86_64-darwin12.4.1]
[2013-09-22 20:52:05] INFO  WEBrick::HTTPServer#start: pid=136 port=4000
>>> Change detected at 20:52:05 to: screen.scss
Auto-regenerating enabled: source -> public
[2013-09-22 20:52:05] regeneration: 93 files changed
identical public/stylesheets/screen.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET / HTTP/1.1" 200 - 0.0207
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /stylesheets/screen.css HTTP/1.1" 200 - 0.0034
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /javascripts/modernizr-2.0.js HTTP/1.1" 200 - 0.0014
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /javascripts/octopress.js HTTP/1.1" 200 - 0.0015
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /images/line-tile.png?1379850683 HTTP/1.1" 200 - 0.0013
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /images/noise.png?1379850683 HTTP/1.1" 200 - 0.0025
127.0.0.1 - - [22/Sep/2013 20:52:35] "GET /images/rss.png?1379850683 HTTP/1.1" 200 - 0.0010
127.0.0.1 - - [22/Sep/2013 20:52:36] "GET /favicon.png HTTP/1.1" 200 - 0.0015

ブラウザでlocalhost:4000にアクセス。


わーお

Github Pagesへデプロイ

参考 :

githubにUSERNAME.github.ioでリポジトリを作成しておく。

# 途中でgithub pagesのリポジトリを入力する
$ rake setup_github_pages
Enter the read/write url for your repository
(For example, '[email protected]:your_username/your_username.github.io.git)
           or 'https://github.com/your_username/your_username.github.io')
Repository url: [email protected]:kobtea/kobtea.github.io.git
rm -rf _deploy
mkdir _deploy
cd _deploy
Initialized empty Git repository in /Users/kobtea/Programs/octopress/_deploy/.git/
[master (root-commit) d1ed656] Octopress init
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
cd -

---
## Now you can deploy to [email protected]:kobtea/kobtea.github.io.git with `rake deploy` ##

# とりあえずdeploy
$ rake deploy
## Deploying branch to Github Pages
## Pulling any updates from Github Pages
cd _deploy
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream master origin/<branch>

cd -
rm -rf _deploy/index.html

## Copying public to _deploy
cp -r public/. _deploy
cd _deploy

## Commiting: Site updated at 2013-09-22 12:50:23 UTC
[master 29f0918] Site updated at 2013-09-22 12:50:23 UTC
 61 files changed, 1118 insertions(+), 1 deletion(-)
 create mode 100644 assets/jwplayer/glow/controlbar/background.png
 create mode 100644 assets/jwplayer/glow/controlbar/blankButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/divider.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/pauseButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/pauseButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/playButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/playButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderBuffer.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderCapLeft.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderCapRight.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderProgress.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderRail.png
 create mode 100644 assets/jwplayer/glow/controlbar/unmuteButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/unmuteButtonOver.png
 create mode 100644 assets/jwplayer/glow/display/background.png
 create mode 100644 assets/jwplayer/glow/display/bufferIcon.png
 create mode 100644 assets/jwplayer/glow/display/muteIcon.png
 create mode 100644 assets/jwplayer/glow/display/playIcon.png
 create mode 100644 assets/jwplayer/glow/dock/button.png
 create mode 100644 assets/jwplayer/glow/glow.xml
 create mode 100644 assets/jwplayer/glow/playlist/item.png
 create mode 100644 assets/jwplayer/glow/playlist/itemOver.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderCapBottom.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderCapTop.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderRail.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderThumb.png
 create mode 100644 assets/jwplayer/glow/sharing/embedIcon.png
 create mode 100644 assets/jwplayer/glow/sharing/embedScreen.png
 create mode 100644 assets/jwplayer/glow/sharing/shareIcon.png
 create mode 100644 assets/jwplayer/glow/sharing/shareScreen.png
 create mode 100644 assets/jwplayer/player.swf
 create mode 100644 atom.xml
 create mode 100644 blog/archives/index.html
 create mode 100644 favicon.png
 create mode 100644 images/bird_32_gray.png
 create mode 100644 images/bird_32_gray_fail.png
 create mode 100644 images/code_bg.png
 create mode 100644 images/dotted-border.png
 create mode 100644 images/email.png
 create mode 100644 images/line-tile.png
 create mode 100644 images/noise.png
 create mode 100644 images/rss.png
 create mode 100644 images/search.png
 rewrite index.html (100%)
 create mode 100644 javascripts/github.js
 create mode 100644 javascripts/libs/jXHR.js
 create mode 100644 javascripts/libs/jquery.min.js
 create mode 100644 javascripts/libs/swfobject-dynamic.js
 create mode 100644 javascripts/modernizr-2.0.js
 create mode 100644 javascripts/octopress.js
 create mode 100644 javascripts/pinboard.js
 create mode 100644 javascripts/twitter.js
 create mode 100644 robots.txt
 create mode 100644 sitemap.xml
 create mode 100644 stylesheets/screen.css

## Pushing generated _deploy website
Counting objects: 79, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (72/72), done.
Writing objects: 100% (79/79), 186.46 KiB, done.
Total 79 (delta 1), reused 0 (delta 0)
To [email protected]:kobtea/kobtea.github.io.git
 * [new branch]      master -> master

## Github Pages deploy complete
cd -

で、10~20分くらいのんびり待つ。
しばらくするとkobtea.github.ioにページが出来てる！すごい!

sourceブランチはBitbucketで管理する。

$ git remote add bitbucket [email protected]:kobtea/kobtea.github.io.git
$ git push -u bitbucket source

# ブランチはこんな感じになる
$ git branch -a
* source
  remotes/bitbucket/source
  remotes/octopress/2.5
  remotes/octopress/2.5-simplify-rakefile
  remotes/octopress/3.0
  remotes/octopress/HEAD -> octopress/master
  remotes/octopress/commander
  remotes/octopress/gh-pages
  remotes/octopress/guard
  remotes/octopress/linklog
  remotes/octopress/master
  remotes/octopress/migrator
  remotes/octopress/refactor_with_tests
  remotes/octopress/rubygemcli
  remotes/octopress/site
  remotes/octopress/site-2.1
  remotes/origin/master
  remotes/origin/source

Octopressの設定

参考 : Configuring Octopress

ブログの基本的な設定は_config.ymlで行う。
とりあえず、title, subtitleだけ変更した。

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

url: http://kobtea.github.io
title: blog.kobtea.net
subtitle: 咳をしても情弱
author: kobtea
simple_search: http://google.com/search
description:

# Default date format is "ordinal" (resulting in "July 22nd 2007")
# You can customize the format as defined in
# http://www.ruby-doc.org/core-1.9.2/Time.html#method-i-strftime
# Additionally, %o will give you the ordinal representation of the day
date_format: "ordinal"

# RSS / Email (optional) subscription links (change if using something like Feedburner)
subscribe_rss: /atom.xml
subscribe_email:
# RSS feeds can list your email address if you like
email:

Jekyll & Plugins, 3rd Party Settingsはまた今度いじる。

投稿！

参考 : Blogging Basics

# 記事を作成する
$ rake new_post["hello-octopress"]
zsh: no matches found: new_post[hello-octopress]

# zshだと[]はエスケープしないといけないのね
$ rake new_post\["hello-octopress"\]
mkdir -p source/_posts
Creating new post: source/_posts/2013-09-22-hello-octopress.markdown

markdownファイルが生成されるので編集する。

source: source/_posts/2013-09-22-hello-octopress.markdown

---
layout: post
title: "こんにちはOctopress"
date: 2013-09-22 22:44
comments: true
categories:
---

よろしくタコ出版！

---で囲まれたブロック内にはポストのメタデータを書く。
カテゴリを複数登録するには2通りある。

categories: [hoge, huga]

categories:
- hoge
- huga

書けたら、generateしてdeploy!

$ rake generate
$ rake deploy

反映に時間がかかることもあるからのんびり待つ。
記事が投稿されたら喜んでおしまい。