ruhohとは?

サーバ不要で運用することができる、エンジニア向けのブログプラットフォーム。下記のような特徴をもつ

  • Markdown。冗長なHTMLの記述が不要
  • Git。記事はgit push時に自動更新。履歴管理にはgithubを利用
  • Free。github等でホスティングでき、運用を含め、コストがかからない
  • Simple。Jekyll(ジキル)を更に洗練させた仕組み。アウトプットに専念できる

本ブログも、github+ruhohで動いています。この記事の生データはこんな感じ

ruhohでブログを公開する手順

詳細は、公式サイトのトップページに記載されている通り

1. ruhoh用のgithubリポジトリを作る

https://github.com/newにアクセスし、新しいリポジトリを作る。 公開リポジトリで作成する必要があることに注意 その際、リポジトリ名は、必ず「githubのユーザ名.ruhoh.com」にする

その後、webフックの設定を行う。これを行うことで、git pushのタイミングでブログの更新が自動で行われる

Webhook URLsに http://post.ruhoh.com を指定する

2. git pushして、とりあえず公開する

下記の案内に沿って、進める

自分の場合は、下記。

git clone git://github.com/ruhoh/blog.git syotaro.ruhoh.com
cd syotaro.ruhoh.com
git remote set-url origin git@github.com:syotaro/syotaro.ruhoh.com.git
git push origin master

http://syotaro.ruhoh.comにアクセスし、下記のような画面が確認できれば成功

なお、クローンされるリポジトリのディレクトリ構造の概要は下記の通り

├── README.md
├── config.ru      # rackupコマンド等の挙動変更を行う設定ファイル
├── config.yml     # テーマやパーマリンク等の指定を行う設定ファイル
├── media/         # 画像等を設置するディレクトリ
├── pages/         # ページの静的ファイル設置ディレクトリ
│   ├── about.md
│   ├── archive.html
│   ├── categories.html
│   ├── index.html
│   ├── pages.html
│   └── tags.html
├── partials/
│   ├── categories_list
│   ├── pages_list
│   ├── posts_collate
│   ├── posts_list
│   └── tags_list
├── posts/         # ブログ記事の設置ディレクトリ
├── site.yml       # サイト名などの指定を行う設定ファイル
├── themes/        # テーマの設置ディレクトリ。変更する場合、この配下にcloneする
│   └── twitter/
└── widgets/       # いろいろな機能拡張の設置ディレクトリ
    ├── analytics/
    │   └── config.yml
    ├── comments/
    │   └── config.yml
    └── google_prettify/
        └── config.yml

ruhohの為のローカル環境を整える

ruhohのツールをセットアップする

下記コマンドで、ツールをインストールする

※事前に、homebrew等で最新のrubyをインストールしておく。

$ gem install ruhoh

インストールが終わると、ruhohコマンドが使用できるようになる。このツールで記事テンプレートの生成などを行う

$ source ~/.zshrc
$ ruhoh help

Ruhoh is a nifty, modular static blog generator.
It is the Universal Static Blog API.
Visit http://www.ruhoh.com for complete usage and documentation.


Commands:

  new <directory_path>
    Create a new blog directory based on the Ruhoh specification.
  compile
    Compile to static website.
  draft <title>
    Create a new draft. Post title is optional.
  post <title>
    Create a new post. Post title is optional.
  page <path>
    Create a new page at the given path.
  titleize
    Update draft filenames to their corresponding titles.
  drafts
    List all drafts.
  posts
    List all posts.
  pages
    List all pages.
  payload
    List the full payload hash as given to the templater. 
  layout <name>
    Create a new layout for the currently active theme.
  help
    Show this menu.

rachupコマンドもインストールされる。実行すると、簡易Webサーバが立ち上がり、ローカルマシンでブログをプレビュー出来る

cd USERNAME.ruhoh.com
rackup -p 9292

  # 実行後、ブラウザでhttp://localhost:9292/にアクセスする

記事の作成

ruhohコマンドで、記事のベースとなるファイルを生成する

ruhoh post 20121006-setup-ruhoh
  New post:
  posts/20121006-setup-ruhoh.md
  View drafts at the URL: /dash

任意のエディタで生成されたファイルを開き、Markdownフォーマットで記事を書く

vim posts/20121006-setup-ruhoh.md

実際の記述フォーマットはこんな感じ

ruhohのカスタマイズ

必須の設定ファイルを修正する

  • config.yml

    • Global(ブログ全体の挙動に関わる) 設定
    • テーマ、本番URL、パーマリンク(URLの生成ルール)の指定など
  • site.yml

    • サイト固有の設定
    • ブログのタイトル、メールアドレスやTwitter等のアカウントの指定など
  • widgets/analytics/config.yml

    • アクセス解析が可能になる
    • デフォルトで、Google Analyticsが利用可能。トラッキングIDを入力するだけ
  • widgets/comments/config.yml

    • 投稿記事のコメントシステムの指定
    • デフォルトでDISQUSが利用可能。
  • widgets/google_prettify/config.yml

    • デフォルトのシンタックスハイライト機能であるgoogle prettifyの設定
  • themes/

    • 追加のテーマを設置(git clone)する
    • デフォルトの「Twitter」以外にも、公式に、「dinky」や「hooligan」がある。特にレスポンシブWebデザインとして完成度の高いhooliganがオススメ(本ブログもカスタムしたhooliganを利用している。レスポンシブWebデザインって何?って人は、ここを参考にしつつ、ブラウザのウインドウサイズを変更してみたりするといい

独自ドメインをひもづける

syotaro.ruhoh.comのようなドメインは覚えづらいので、別途取得したドメイン名(このブログならioblog.jp)とひもづける

1.valuedomainでドメインを取得し、ひもづける

valuedomainにアクセスし、下記の流れで好みのドメインを取得する

cnameレコードで、www.ioblog.jpとsyotaro.ruhoh.comをひもづける設定(cname www syotaro.ruhoh.com)を追加

しばらくすると、http://www.ioblog.jpでアクセスできるようになる。

2.DNSサーバを、Amazon Route53に変更する(option)

せっかくなので、DNSサーバを信頼性の高い、Amazon Route53に変更する

まずは、新規Hosted Zoneを作成する

割り当てられたDNSサーバのドメイン名を控える

www.ioblog.jpとsyotaro.ruhoh.com をひもづける設定を入力

ValueDomainにて、ネームサーバの指定をAmazonに切り替える(先ほどコピーしたものを入力する)

nslookupやdigコマンドで、DNSレコードの変更がインターネットに反映されたかどうか、確認できる。


$ nslookup www.ioblog.jp 

Server:     126.240.64.132
Address:    126.240.64.132#53

Non-authoritative answer:
www.ioblog.jp   canonical name = syotaro.ruhoh.com.
Name:   syotaro.ruhoh.com
Address: 50.116.20.239

$ dig ioblog.jp 
; <<>> DiG 9.8.3-P1 <<>> ioblog.jp
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 44186
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 4, ADDITIONAL: 4

;; QUESTION SECTION:
;ioblog.jp.         IN  A

;; ANSWER SECTION:
ioblog.jp.      159 IN  A   50.116.20.239

;; AUTHORITY SECTION:
ioblog.jp.      86325   IN  NS  ns-1762.awsdns-28.co.uk.
ioblog.jp.      86325   IN  NS  ns-418.awsdns-52.com.
ioblog.jp.      86325   IN  NS  ns-526.awsdns-01.net.
ioblog.jp.      86325   IN  NS  ns-1291.awsdns-33.org.

;; ADDITIONAL SECTION:
ns-418.awsdns-52.com.   140778  IN  A   205.251.193.162
ns-526.awsdns-01.net.   160332  IN  A   205.251.194.14
ns-1291.awsdns-33.org.  153595  IN  A   205.251.197.11
ns-1762.awsdns-28.co.uk. 147301 IN  A   205.251.198.226

;; Query time: 37 msec
;; SERVER: 126.240.64.132#53(126.240.64.132)
;; WHEN: Sun Oct  7 14:19:47 2012
;; MSG SIZE  rcvd: 247

その後、http://post.ruhoh.com/にアクセスしてドメインのヒモ付を登録

ありがちトラブル

  • git pushしても本番サイトが更新されない
    • リポジトリはPublicでない場合は反映されない
  • リポジトリがPulicにもかかわらず、git pushしてもサイトが更新されない

そのほか

  • favicon
    • mediaディレクトリの直下に設置する
  • 画像の設置
    • mediaディレクトリ直下に設置した画像は、記事の中で下記構文で呼び出すことができる
    • {{urls.media}}は、デフォルトで用意されているruhoh独自のテンプレート。mediaディレクトリへのpathに置換される
![example]({{urls.media}}/example.png)
  • まるみえ
    • 更新履歴など、全てがこのように公開されてしまうことを理解したうえで運用する必要がある


blog comments powered by Disqus

Categories

Tags

iPhone Sales

Books

Pinboard