atskimura-memo

あまり仕事とは関係なく適当に書きます。開発ネタが多いかもしれません。

Jekyll+Github PagesなブログをWebで管理できるProse.ioが便利…

はじめに

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

前にも書きましたけど、私もブログを新しく作るにあたって流行りに乗って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アカウントでログインします。性格上ものすごく権限を要求してきますので、嫌な方は使うのをやめましょう。

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 StartedProse 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 でアクセスすると以下のようなページが表示されます。

f:id:a_kimura:20140210183236j:plain

投稿する

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

f:id:a_kimura:20140211133640j:plain

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

f:id:a_kimura:20140211140304j:plain

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

f:id:a_kimura:20140211140418j:plain

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

f:id:a_kimura:20140211140515j:plain

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

モバイル

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

f:id:a_kimura:20140211143604p:plain

まとめ

惜しい。とても惜しい。。。
バグっているようで画像がアップできない。。。それができればかなりいいのに。
プルリク送るか?でも、どうも開発者一人だけでここ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で動かせということか。。。プレビューをリアルタイムにしたいしな。。。


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