はじめに

相変わらずブログ環境に悩んでいます。

前にも書きましたけど、私もブログを新しく作るにあたって流行りに乗ってMiddleman+Github Pagesでやろうかなあと思ったんです。
でも、めんどくさいんですよ。
エディタで書いて、git add、git commit、git push、Travis CIでビルドを自動化、middleman-deployとかもあるけど。。。いや、俺ブログにこんなに手を掛けたくない。。。ていうかブログ書くのに黒い画面使いたくない。

APIドキュメントとか会社サイトなら更新多いしGitで管理するのもいいけど、ブログはね。あんま編集しないし。

そういう人は静的サイトジェネレータ使うなとか言われそうですけど、

• コンテンツが完全に自分のものになる（いつでも好きなところに引っ越せる）
• デザインは黒い画面でできて、どんなCSSもJavaScriptも書ける

っていいやん。だから使いたい気持ちもあるんです。
既存のブログプラットフォームってデザイン自由にいじれないじゃないですか。デザインはアプリ開発と一緒だから黒い画面の方がやりやすいです。ブログ投稿は嫌だけど。
あとMarkdownで書けるのもいいけど、Markdownははてなブログでも書けるから。だから、はてなブログにしたんですけど。

というわけで黒い画面を使わずにWebから投稿できるようになれば、めんどくさがり屋な私でも静的サイトジェネレータでブログできるんじゃないかなといろいろ調べていました。そしたら、このProse.ioを見つけました。
MiddlemanじゃなくてJekyllだけど。

Prose.ioって？

Prose.ioはGithubリポジトリ上のファイルを直接編集できるWebベースのかっこいいコンテンツエディタです。特にJekyllサイトを管理するために作られており、以下のような機能を持っています。

• タグ・レイアウトなどのメタデータのデフォルト設定・入力フォーム作成
• 1クリックでの下書き・公開設定
• Markdownエディタ・プレビュー
• 画像アップロード（でも！後述）

探していたものにぴったりじゃないですか。

Prose.ioの使い方

ということでProse.ioを使ってみましょう。

Github Pagesのリポジトリを作る

「my-first-prose」という名前のリポジトリを作ります。
ユーザのGithub Pagesを使いたい場合は、USERNAME.github.ioというリポジトリ名で作ってください。

Jekyllのサイトをセットアップ

楽なのでjekyll-bootstrapを使います。

$ git clone https://github.com/plusjade/jekyll-bootstrap.git my-first-prose$ cd my-first-prose$ git remote set-url origin git@github.com:[USERNAME]/my-first-prose.git

今回はプロジェクトのGithub Pagesを使うので、gh-pagesブランチに変更します。
ユーザのGithub Pagesを使う場合は、masterのままでよいです。

$ git branch -m gh-pages

とりあえずそのままpush

$ git push origin gh-pages

Prose.ioにログイン

このシンプルなページからGithubアカウントでログインします。性格上ものすごく権限を要求してきますので、嫌な方は使うのをやめましょう。

Prose.ioの初期設定をする

http://prose.io にログインすると以下のように自分のプロジェクト一覧が表示された画面になります。

Prose.ioの初期設定をするのですが、せっかくだからprose.ioを使って設定してみましょう。
my-first-proseプロジェクトを開いて、_config.ymlの末尾に以下のような設定を追加します。
rooturlを設定するとそのディレクトリ内以外はProse.ioで編集できなくなります。嫌な人はコメントアウトしてください。
詳しくはWikiのGetting StartedとProse Configurationを見てください。

prose:rooturl:'_posts'siteurl:'http://USERNAME.github.io/my-first-prose/'media:'media'metadata:_posts:-name:"layout"field:element:"hidden"value:"blog"-name:"title"field:element:"text"value:""

それからプロジェクトのGithub Pagesなので、BASE_PATHを変更します。
その他のJekyll Bootstrapの設定は公式サイトを見てください。

  BASE_PATH : /my-first-prose

アクセスしてみる

たぶんそろそろサイトができているはずです。
http://USERNAME.github.io/my-first-prose でアクセスすると以下のようなページが表示されます。

投稿する

_postsディレクトリに移動して、「NEW FILE」をクリックします。

適当に書いて、保存します。
キャプチャ撮ってないけど、コミットコメントも書けます。

まず下書き状態になるので、公開します。
なぜか公開ボタンはリロードしないと出てきません。そして、プレビューもなぜか崩れる。

投稿された！
http://atskimura.github.io/my-first-prose/2014/02/11/-prose/

ちなみに編集するとコミット前に差分も確認できます。

モバイル

ちなみにモバイルからも一応使えます。

まとめ

惜しい。とても惜しい。。。
バグっているようで画像がアップできない。。。それができればかなりいいのに。
プルリク送るか？でも、どうも開発者一人だけでここ2ヶ月開発止まって、マージもされていないみたいなんだよなあ。

I'm aware of the issue, but haven't had much time to spend working on Prose recently. A pull request fixing this bug would be very welcome though.

Img Upload & Linking not working · Issue #613 · prose/prose

最後にちょっと中身について

Backbone.jsのフロントエンドアプリから直接GitHub API v3を呼ぶというなかなか楽しい作りです。browserifyでビルドしていて、ソースコードも参考になりますよ。

prose/prose

forkしてHerokuで動かせということか。。。プレビューをリアルタイムにしたいしな。。。

よかったら他の記事もお読みください。

• Markdownの書けるシンプルできれいな無料ブログRoon.ioを試してみた - atskimura-memo
• CI（継続的インテグレーション）サービスまとめ・14個！ - atskimura-memo
• ChefでUbuntuのPPAリポジトリを追加するレシピの書き方３つ - atskimura-memo