jubilee

Programing, Books and more...

Start Octopress OctopressとGitHub・Bitbucket

OctopressでBolg開設。GitHub・Bitbucket・localの環境構築とブログの表示まで。

なぜOctopressを選んだか？

  • ポストファイルを静的ファイルとして管理したかった
  • Markdownで記述→generate→deploy→pushの手軽さ
  • Git・GitHub・Markdownのスキルを身につけたい
  • A blogging framework for hackers.

環境

  • 2013.12.25作成
  • OS X 10.9.12
  • GitHub：アカウント作成済み・SSH確立済み
  • Bitbucket：アカウント作成済み・SSH確立済み
  • Git：インストール済み（1.8.1）
  • Ruby：インストール済み（1.9.3p194）
  • ~/mzgk.github.ioでローカル側作業を想定（ここにOctopress一式＆Bitbucketで管理）

GitHub

  • GitHub Pagesを使用するので、USERNAME.github.ioでリポジトリを作成
  • USERNAMEはGitHubのログインユーザ：ここではmzgk.github.ioで作成
  • Public
  • READMEは生成しない

GitHub

Local（Mac）

OctopressをGitHubからcloneする。

  • Terminalを起動
  • ホームディレクトリに移動（~/mzgk.github.ioで管理したいため）
  • $ git clone git://github.com/imathis/octopress.git mzgk.github.io
  • 最後をmzgk.github.ioとするこことで、ホームディレクトリ直下にmzgk.github.ioディレクトリが作成される
  • 公式ではoctopressを指定

clone octopress

Octopress Setup

公式：http://octopress.org/docs/setup/

  • Terminal作業
  • $ cd ~/mzgk.github.io　→　Octopress一式をcloneしたディレクトリに移動
  • $ gem install bundler
  • $ rbenv rehash　→　自分の環境がrbenvを使用しているから必要だった？
  • $ bundle install
  • $ rake install　→　公式テーマのインストール

rake install

GitHub Pagesとの接続

  • Terminal作業（作業ディレクトリは引き続き~/mzgk.github.io）
  • $ rake setup_github_pages
  • URLの入力を求められるので、ブラウザでGitHubのリポジトリにアクセス
  • HTTP / SSHの対応している方をクリックし、テキストボックスに表示されるアドレスをコピー（右端のアイコン）
  • Terminal（Repository url: ）に貼付けてreturnキー

setup_github_pages

サイトの生成と確認

  • Terminal作業（作業ディレクトリは引き続き~/mzgk.github.io）
  • $ rake generate　→　HTMLファイルを生成
  • $ rake deploy　→　GitHubにデプロイ
    • _deployディレクトリがGitHubのリポジトリにpushされている模様

rake_deploy_local rake_deploy_github

  • 10分程度してからブラウザでhttp://mzgk.github.ioにアクセス
    • 標準テーマで、記事のない「My Octopress Blog」が表示される
    • 時間が早いと404ページが表示される

my_octopress_blog

  • いつまで経っても表示されない場合はTerminalを確認。途中でエラーの可能性あり。
  • 自分は$ rake deployでGitHubへのpushがrejectされていた（GitHubでREADMEを作成し編集していたため）

Bitbucketでソース管理

ブログに関するすべてをプライベートなリポジトリで管理したかったので選択。
~/mzgk.github.io以下をBitbucketに作成したプライベート用リポジトリで管理

  • ブラウザでBitbucketにアクセスし、ログイン
  • プリベートリポジトリを作成（名前はmzgk.github.io） bitbucket
  • Terminal作業（作業ディレクトリは引き続き~/mzgk.github.io）
  • ~/mzgk.github.io/sassとsourceをステージング
    • $ git add .
  • リモートリポジトリを追加
    • $ git remote add bitbucket git@bitbucket.org:mzgk/mzgk.github.io.git
  • Bitbucketにプッシュ
    • $ git push -u bitbucket source
    • 以降はgit pushだけで、Bitbucketにpushされる（-uオプション）
  • ~/mzgk.github.io/_deployとpublicは.gitignoreで除外されていた

bitbucket_push

ハマった点

  • GitHubでリポジトリ作成時にREADMEを自動生成したため、$ rake_deployでローカルと不整合が発生
  • ローカルで作業・管理するディレクトリの構成をどうするかで悩む
    • Blogに関わるすべてを１つのディレクトリで管理したかった
  • そもそもGit・GitHub・Rubyに関する知識が不足していた（使用経験は限りなくゼロ）
    • けど、知らなくてもなんとかなる手軽さ