【何番煎じ】OctopressとGitHub Pagesを使用したブログの構築手順

April 28, 2013 by Yudai Suzuki

UT Startup Gymの第3期成果発表会も終わった事ですし、
前からやろうと思ってた技術ブログを立ち上げました。

日本のエンジニアのブログといえばはてなブログが多い印象ですが、
最近はOctopressGitHub Pagesを使った運用がナウいらしいので
流行に乗っかってみます。

参考(というか、ほぼ同じ内容)

GithubとOctopressでモダンな技術系ブログを作ってみる

環境

前提として、gitとrubyがインストールされてる必要があります。

  • OS X Lion
  • ruby 1.9.3p392(rbenv)
  • git 1.8.2.1

導入

Octopressのリポジトリをクローン

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

bundle install

bundle install --path vendor/bundle
rbenv: version `1.9.3-p194' is not installed

うん?rubyのバージョンがこれじゃないとインストールできないの?
いやいやそんなことはないでしょう。と思い、ファイル一覧を見てみると
.rbenv-versionというファイルがあることに気付きました。

中を見ると、1.9.3-p194とだけ書いてあります。
これを1.9.3-p392に修正すると動くかな?

bundle install --path vendor/bundle
Fetching gem metadata from http://rubygems.org/.......

お、いった。大した問題じゃなくてよかった。
gemがインストールできたら、テーマをインストールします。
インストールすると、プレビューできるようになります。

bundle exec rake install
bundle exec rake preview

でもデフォルトは嫌なのでサードパーティー制のテーマを導入します。
今回は、Whitespaceというのを導入しました。
インストールの際に、既にインストールしたファイルを上書くか聞かれるのでyを入力します。

zshを使っててzsh: no matches foundが出てしまう方は[をエスケープするか
.zshrcにsetopt nonomatchを記述しておきましょう。

git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
bundle exec rake install['whitespace']
A theme is already installed, proceeding will overwrite existing files. Are you sure? [y/n]

bundle exec rake preview

ブログタイトルなどは_config.ymlの中で設定できます。
titleやauthor等を編集すると、ヘッダーやフッターが自動的に変わってくれます。
SNSのURLも設定できるようですが、Whitespaceはデフォルトだと何も出ません。
他のテーマだとリンクがアイコンで表示されたりするんでしょうね。

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


title: My Octopress Blog
subtitle: A blogging framework for hackers.
author: Your Name
simple_search: http://google.com/search
description:

...

GitHub Pagesの設定

Githubにusername.github.comというリポジトリを作成します。 例えば僕の場合、onigraというusernameなのでonigra.github.comとなります。

デプロイ

OctopressをGithub Pagesにデプロイするための設定をします。

bundle exec rake setup_github_pages

コマンドを叩くと、Github PagesのリポジトリのURLを入力しろと出ますので、
先程作ったリポジトリのURLを入力しましょう。

Enter the read/write url for your repository:
git@github.com:onigra/onigra.github.com.git

入力したら、下記コマンドを入力するとデプロイできます。
しばらくすると、http://onigra.github.io/にブログができあがります。

bundle exec rake generate
bundle exec rake deploy

自己紹介の追加

自己紹介ページが無い事に気付いたので、追加してみます。
rakeタスクを確認すると、new_pageというタスクがあるのでこれを使います。

自己紹介のページは、aboutという名前にします。

bundle exec rake new_page['about']

すると、source/about/index.markdownというディレクトリができるので
これを編集します。編集したら、ナビゲーションにリンクを追記します。
Whitespaceの場合は、 source/_includes/custom/navigation.htmlを編集すればOKでした。

感想

簡単でした。rubyで何か作ったことある人でしたら1時間もあれば立てれるでしょう。markdownで書けるのも楽で良いです。
よくわからない管理ツール使わずに、コマンドラインで全部完結するのもいいですね。エンジニアっぽくて。

© 2017 | Onigra | Powerd by Hucore theme & Hugo