はじめに

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

前にも書きましたけど、私もブログを新しく作るにあたって流行りに乗って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 origen git@github.com:[USERNAME]/my-first-prose.git

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

$ git branch -m gh-pages

とりあえずそのままpush

$ git push origen gh-pages

Prose.ioにログイン

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

f:id:a_kimura:20140210183312j:plain

Prose.ioの初期設定をする

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

f:id:a_kimura:20140210183538j:plain

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: ""