Octopress + github.ioの設定

ブログ的なものをまた少しやってみようかといろいろあさってみた結果、なんとなくgithub.ioを使ってみようと思い、Octopressも含めてセットアップしてみました。 github.io + Octopressを使ってみようと思った理由は、

  • ローカルにデータを持てるので可搬性が高そう(な気がする)
  • Markdown記法で記述でき、編集に自分の好きなエディタを使うことができる
  • ソースをいじろうと思えばいじれるので、いざというときの自由度は高そう
  • なんか意識高い人っぽい

以下、Hello world的にgithub.ioとOctopressを使ってblog的なページを作成する手順をまとめてみました。

事前にやっておくこと

おそらく日頃からRubyをヘビーに使っている人には不要な作業なのだが、結構ほかのサイトだとしれっと書かれていたりするので、一応メモ。

インストール

  1. <user-name>.github.io という名前でレポジトリを作る
  2. Octopressを自分のローカル環境にcloneする

     % git clone git@github.com:m-mizutani/octopress.git octopress
     % cd octopress
     % bundle install
     % rake install
    

これで終わり。とりあえずローカルでプレビューを立ち上げるには、

% rake preview

と実行すると、ローカルでポート4000でサーバが立ち上がる。 http://localhost:4000/ で確認できる。

編集

_config.yml をいじる

タイトルなど、ページ全体に関連するメタ情報の設定。とりあえず先頭10行程度をいじれば動く。以下設定例。

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

url: http://m-mizutani.github.io
title: ある研究者の手記
subtitle: Notebook Found in a Deserted Field
author: Masayoshi Mizutani
simple_search: http://google.com/search
description:

ページを作成する

静的なページを作成するには以下のコマンド。

% rake new_page['hoge']

zshで作業している場合、[] はパス名解決に使おうとしてしまうので、

zsh: no matches found: new_page[hoge]

のようなエラーになってしまう。その場合は、

% rake new_page\['hoge'\]

のようにして、エスケープする。

ページは source + 指定したページ名が作成されるので、この場合は source/hoge/index.markdown を編集することで、ページに反映される。アクセスは http://localhost:4000/hoge/ で参照できる。

テーマ変更

% git clone https://github.com/macjasp/cleanpress.git .themes/cleanpress
% rake install['cleanpress']
A theme is already installed, proceeding will overwrite existing files. Are you sure? [y/n] y

デプロイする

% rake setup_github_pages

repositoryのURLを入れろと言ってくるので、git@github... のURLを入力

Repository url: git@github.com:m-mizutani/m-mizutani.github.io.git

そのあと

% rake gen_deploy

とすると、コンテンツ作成&デプロイを一括してやってくれる

To git@github.com:m-mizutani/m-mizutani.github.io.git
 ! [rejected]        master -> master (non-fast-forward)

と怒られる場合があるので、Rakefile 内の、

system "git push origin #{deploy_branch}"

system "git push origin +#{deploy_branch}"    

に変更する。このあと、数秒〜数分後に自分のgithub.ioサイト(自分の場合は http://m-mizutani.github.io/ )に変更が適用されるはずなので、プレビューと同じ内容が見えていたら成功。

Comments