酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

OctopressでGitHub無料ブログ構築。sourceをBitbucket管理。簡単ガイド!

OctopressとGitHubホスティングで無料でブログを作る手順です。また、ソース情報はBitbucketで管理します。このスタイルのメリットは次の2つです。

* GitHubドメインはSEOでも優遇されている(気がするw)
* 自分の好きなエディタとGitコマンドだけで運用できる
* git管理なのでチームでブログを運用しやすい(と思う)

ということで、「なう」で「やんぐ」なギーク・ブログにレッツ・トライ!

(12-30 18:05) 最新版に合わせて全面改訂!


目次

OctopressをGitHubにホスティング、BitBucketを使ったソースコード管理までを構築する手順の目次は次の通りです。

(1) GitHubでのリポジトリ作成
(2) Octopressのソース取得
(3) GitHubへのdeploy設定
(4) Octopressのブログ初期設定
(5) Bitbucketでのリポジトリ作成/設定
(6) Octopressの記事作成
(7) Octopressのテーマ変更
(8) 独自ドメインの設定
(9) GitPageへの記事のアップ(deploy)
(10) BitbucketへのsourceのPush
おまけ:チームでブログを管理する方法

(1) GitHubでのリポジトリ作成

GitHubにログインして、GitHubリポジトリを作成。 リポジトリ名は 「username.github.io」。
usernameのところには自分のユーザー名を入れてください。

Create GitHub Repository

(2) Octopressのソース取得

GitHubのOctopressリポジトリから、最新のOctopressのソースコードを取得。
(usernameのところには自分のユーザー名を入れてください)

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

(3) GitHubへのdeploy設定

bundlerとGemfile内のgemのインストール。

1
2
3
4
5
6
7
8
9
10
11
12
cd username.github.io

# bundlerが入っていない人向け、bundlerのインストール
gem install bundler

# Gemfileに書かれたgemをインストール
bundle install --path vendor/bundle --jobs=4

# GitHub Pagesに表示するための設定
bundle exec rake setup_github_pages
Enter the read/write url for your repository: git@github.com: username/username.github.com.git
Repository url: #<= GitHubのリポジトリを登録

(4) Octopressのブログ初期設定

英語の記事ですが、公式サイトのConfiguring OctopressにOctopressの各種設定についての説明があります。 この記事を参考にしつつ、Octopressのブログ初期設定をしてください。

ここでは、ブログのメイン設定を担当する_config.ymlの設定項目の説明を翻訳しておきます。

1
2
3
4
5
6
7
8
9
10
11
url:                # RSSに記載するためのブログURL
title:              # HTMLのヘッダとタイトルタグに使うブログのタイトル
subtitle:           # HTMLのヘッダ部分に表示するブログのサブタイトル
author:             # コピーライトやメタタグなどに使うブログの著者情報
simple_search:      # ブログ内の検索機能におけるサーチエンジン
description:        # デフォルトのメタタグ内descriptionの内容
date_format:        # 日付のフォーマット(Ruby's date strftime syntax)
subscribe_rss:      # ブログのRSSのURL(デフォルトは /atom.xml)
subscribe_email:    # e-mailを使ったブログの購読のためのURL
category_feeds:     # カテゴリ単位でのRSSを許可するか? (デフォルトはfalse)
email:              # RSSのためのメールアドレス(必要な場合のみ)

(5) Bitbucketでのリポジトリ作成/設定

BitBucketにログインして、ページ上部の「作成」からリポジトリを作成。

Bitbucket create new repository

1
git remote add bitbucket git@bitbucket.org:username/username.github.io.git

(6) Octopressの記事作成

以下のコマンドを実行。ここでのtitleはパーマネントリンクにも使われるので英語で。
(記事の中では日本語のタイトルをつける事ができます)

1
2
bundle exec rake new_post
Enter a title for your post: #<= postのタイトルを聞かれるので入力

source/_post/YYYY-MM-DD-title.markdownというファイルが出来上がります。

下は、作成されたファイルの初期状態です。

1
2
3
4
5
6
7
8
9
---
layout: post
title: "post title"
date: YYYY-MM-DD hh:mm
comments: true
categories: [category1, ...]
---

body....

日本とのタイトルを付けたい場合はここで、titleのところに日本語を入力してください。 あとは、Markdownなり、htmlなりで記事を作成。

以下の命令を実行して、ブラウザでhttp://localhost:4000/にアクセスすると、ローカルのプレビューを見ることができます。

1
rake preview

(7) Octopressのテーマ変更

次にOctopressのテーマをサードパーティ製のテーマを使って変更します。 テーマは下記サイトが見やすいのでオススメです!

3rd Party Octopress Themes · imathis/octopress Wiki

今回は例として、テーマ名「oct2」を適用する手順を書いていきます。

1
2
3
4
5
6
git clone git@github.com:bijumon/oct2.git .themes/oct2
bundle exec rake install['oct2']
# => 失敗する場合は、bundle exec rake install\['oct2'\]
A theme is already installed, proceeding will overwrite existing files. Are you sure? [y/n]

bundle exec rake preview

(8) 独自ドメインの設定

こちらは任意の設定で、独自ドメインを設定したい場合の手順です。 設定方法の説明は、公式の手順がやはり一番わかりやすいです。 一応今回はサブドメインでの設定方法を書いておきます。

まずは、DNS側(お名前.comやムームードメインなど)に以下のコードを設定。

次に、ローカル側で以下のコマンドを実行してCNAMEファイルを作成。
(example.comの部分は自分のドメイン名にして下さい)

1
echo 'example.com' >> source/CNAME

(9) GitPageへの記事のアップ

GitHub Pagesに記事をアップするために、deploy。

1
rake gen_deploy

(10) BitbucketへのソースコードのPush

最後にBitbucket側にソースコード管理のためにPush。

1
2
3
git add -A
git commit "add post"
git push -u bitbucket source

おまけ:チームでブログを管理する方法

あるブログをチームで管理する事になったので、その手順も合わせて記載します。

1
2
3
4
5
6
(1) GitHubでリポジトリを開き、Settings => Collaborators に共同管理者を追加
(2) Bitbucketのリポジトリのadmin(設定マーク) => アクセス管理 => 共同管理者を追加
(3) Bitbucketのリポジトリのデータを取得(git clone)
(4) bundle exec rake generate && rake preview => ブラウザでhttp://0.0.0.0:4000/を開く
(5) source/_post内のxxx.markdownファイルがブログ記事なので編集 => ブラウザで表示確認
(6) 編集が完了したらターミナルで git add . && git commit -m "set article" && rake gen_deploy && git push -u bitbucket source でデプロイ完了

ちなみにマークダウンの書き方はこちらがオススメ
Markdown - Wikipedia

Special Thanks

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

Octopressのインストールから運用管理まで

GitHub Pagesホスティングサービス(ほぼ)完全活用ガイド

変更来歴

(2012-11/07 15:00) 新規作成
(2013-08/18 17:15) 全面的に書き直し
(2013-11-06) 独自ドメインの設定方法と、チームでのブログ管理を追加
(12-30 18:05) 最新版に合わせて全面改訂!

おすすめの書籍