Octopress + GitHub Pages = Simple Blog

いきなりですが、ブログを開設したいと思いました。

VimやMarkdownの勉強も兼ねることができるので、Octopress + GitHub Pagesで書いてみることにします。

Octopress

http://octopress.org/

Octopressとは、mojombo/jekyllという静的ファイルジェネレータのためのフレームワークです。

jekyllがMarkdownでの記事作成に対応しているのでエンジニアの方で利用されている方が多いようです。

  1. HTML5,レスポンシブデザイン対応
    • デフォルトのテンプレートデザインで既にレスポンシブデザイン対応
  2. Compass,Sassを用いたデザイン
  3. 記事の新規作成やローカルレビューなどの操作はrakeタスクに纏まっていてシンプル
  4. ローカルで作成した記事を反映させる方法は、Github pagesやRsyncを利用
    • Github pagesの場合はgithubへpushして更新
  5. POW,WEBrick,thinなどのRackサーバをサポート
  6. カラースキームとしてsolarizedを採用することで美しいシンタックスハイライトを実現
  7. Markdownで記事を作成可能

GitHub Pages

https://pages.github.com/

GitHub Pagesとは、username.github.ioというレポジトリに静的コンテンツを置くことでWebサイトとして公開できるものです。 WebサイトのデフォルトURLはレポジトリ名と同じhttp://username.github.ioとなります。 ちなみに、usernameは自分のGitHubアカウント名に置き換えてください。

GitHub PagesとしてWebページを作成することでコンテンツをGit管理にできるほか、GitHubレポジトリに置けることでバックアップとしての意味合いも果たします。

そして、GitHub Pagesでは静的ファイルジェネレータのmojombo/jekyllを使ったブログ作成が可能なので、Octopressもインストール可能なのです。

Octopressをローカル環境にインストール

今回の最終目標はGitHub PagesでOctopressのエントリー記事を表示させることですが、記事作成などの主な操作はローカル環境で行う必要があります(GitHubレポジトリの内容を直接操作することはできない)。ローカル環境で記事作成などの操作を行った後にGitHubへPushすることでGitHub Pagesに反映させるのです。

Octopressのソースコードをgit cloneでローカル環境に持ってきます。 ローカル環境側のRubyバージョンが1.9.3以上の必要があるので、rbenvやrvmなどでインストールしておきます。

1
2

git clone git@github.com:imathis/octopress.git username.github.io
cd username.github.io

gemモジュール群をインストールします。私の環境では、Could not find a JavaScript runtimeエラーが発生するのを防ぐために、therubyracerプラグインも一緒にインストールします。

Gemfileに追記します。

Gemfile
1
2

# for "Could not find a JavaScript runtime" Error
gem 'therubyracer'

Gemfileに記述されているGemモジュール、および依存関係のあるGemモジュールをインストールします。

1

bundle install

rake installコマンドを実行してOctopress初期セットアップとしてデフォルトテーマ用のファイルをJekyllの静的コンテンツ生成パスにコピーします。 rakeタスク実行時の標準出力をそのまま記載しているのでmkdirやcpはrakeタスク内で実行済みです。

1
2
3
4
5
6
7
8

$ bundle exec 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 previewコマンドを実行して、ローカル環境でWebページを公開します。

rake previewコマンドを実行することでRakefile内のpreviewタスクを実行します。previewタスクではjekyll build --watchコマンドを実行して静的コンテンツをジェネレートしつつ、以降の変更を監視し続けます。変更を検知すると再ジェネレートを自動実行してくれます。そしてrackupコマンドを実行し、TCPポート4000番でWEBrickサーバを起動します。

ここでもrake previewタスクの実行時の標準出力を(_config.ymlパス以外は)そのまま記載します。

1
2
3
4
5
6
7
8
9
10
11
12
13

$ bundle exec rake preview
Starting to watch source with Jekyll and Compass. Starting Rack on port 4000
[2014-07-22 01:08:53] INFO  WEBrick 1.3.1
[2014-07-22 01:08:53] INFO  ruby 2.1.0 (2013-12-25) [x86_64-linux]
[2014-07-22 01:08:53] INFO  WEBrick::HTTPServer#start: pid=4585 port=4000
Configuration file: /path/to/username.github.io/_config.yml
>>> Change detected at 01:08:54 to: screen.scss
            Source: source
       Destination: public
      Generating...
                    done.
 Auto-regeneration: enabled
identical public/stylesheets/screen.css

ブラウザでhttp://localhost:4000(localhostの部分はローカル環境のIPアドレスに置き換えてください)にアクセスすると以下のような初期ページが確認できます。

Octopressで指定可能なrakeタスク

Octopressをインストールする際にrake installコマンドやrake previewコマンドを実行しましたが、rakeコマンドの後ろに指定したサブコマンドはRakefileに定義されたタスクに対応しています。

指定可能なrakeタスクはrake -Tコマンドで確認できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$ bundle exec 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 new_post[title]コマンドを実行します。title部分は任意のタイトル文字を記述します。英字以外だとうまく認識できないケースが考えられるので、ここでは英字で指定します。

1

rake new_post[test_post]

rake new_post[test_post]コマンドでsource/_posts/yyyy-mm-dd-test-post.markdownというファイルが作成されます。

1

vim source/_posts/yyyy-mm-dd-test-post.markdown

テストのために本文を１行だけ追記しました。

source/_posts/yyyy-mm-dd-test-post.markdown
1
2
3
4
5
6
7
8
9

---
layout: post
title: "test_post"
date: yyyy-mm-dd 00:00:00 +0900
comments: true
categories:
---

テスト投稿です

静的ページを生成します。

1

rake generate

サーバを立ち上げます。

1

rake preview

ブラウザでhttp://localhost:4000(localhostの部分はローカル環境のIPアドレスに置き換えてください)にアクセスします。

OctopressをGithub Pagesで表示させる

今までローカル環境で編集してきたOctopressコードを新規作成した記事と共にGitHubにpushします。

GitHubレポジトリ作成

GitHubの新規レポジトリ作成ページにアクセスします。

https://github.com/new

Repository nameにusername.github.io(usernameは自分のGitHubアカウント名)を指定し、Create repositoryボタンをクリックします。

ローカル環境にてgitレポジトリの作成

OctopressでGitHub Pagesを利用する場合のgitレポジトリ作成にはsetup_github_pagesという専用のrakeタスクが用意されています。

rake setup_github_pagesコマンドを作成したレポジトリのURLと共に実行します。

  • レポジトリのURL例
    • git@github.com:your_username/your_username.github.io.git
    • https://github.com/your_username/your_username.github.io
1

rake setup_github_pages[git@github.com:username/username.github.io.git]

GitHub Pagesへ反映

Octopressで記事などをGitHubへpushする時にはdeployタスクを利用します。

1

rake deploy

GitHubにpush後10分程度待つと、http://username.github.ioで先ほどまでローカル環境で表示できていたOctopressページを表示させることに成功しました。

ソースをBitbucketで管理

rake deployコマンドでは、GitHub上に作成されたレポジトリのmasterブランチにmojombo/jekyllの静的コンテンツのみがpushされます。そしてGemfile,Rakefile,sassディレクトリ,sourceディレクトリがレポジトリ管理になっていません。

Deploying to Github Pagesでは、同一レポジトリにsourceブランチを作成してソースをcommit、pushするように説明していますが、ソースは公開する必要はないのでBitbucketで管理します。

Bitbucketに新規レポジトリを作成

Bitbucketの新規レポジトリ作成ページにアクセスします。

https://bitbucket.org/repo/create

今回はoctopressという名前のレポジトリ`を作成しています。

ソースをコミット

Gemfile,Rakefile,sassディレクトリ,sourceディレクトリなどをレポジトリにコミットします。

1
2

git add -A
git commit -m 'Modify config. Add source and sass'

Bitbucketに作成したレポジトリへpush

1
2

git remote add bitbucket git@bitbucket.org:username/octopress.git
git push -u bitbucket source

まとめ

Octopressのインストール

  1. https://github.com/imathis/octopress からソースコードをclone
  2. rake installを実行して初期セットアップ
  3. rake new_post['blog_title']で新規記事を投稿
  4. rake generateで静的ページを生成
  5. rake previewでlocalhostの4000番ポートでWebサーバを起動

GtiHub PagesでOctopressで生成した静的ページを表示

  1. https://github.com/new で新規レポジトリを作成
    • Repository nameはusername.github.io(usernameは自分のGitHubアカウント名)
  2. rake setup_github_pagesでGitHub pagesを利用するための初期セットアップ
  3. rake deployでGitHubレポジトリへpush

Bitbucketでソースコード管理

  1. https://bitbucket.org/repo/create で新規レポジトリを作成
  2. git add -Aとgit commitでソースコードをコミット
  3. git remote addでBitbucketレポジトリをremote先として追加
  4. git pushでBitbucketレポジトリにpush