ボクココ

個人開発に関するテックブログ

プログラマでもオススメ! Prose で Jekyll の記事を管理する

Jekyll は "Transform your plain text into static websites and blogs."(単なるテキストを静的ウェブサイトやブログに変換するもの)。Jekyll の詳細は以前の記事を参照。

さて、Jekyllでセットアップが完了し、実際にブログなどを運営していこうと思うと以下のような課題に直面するだろう。

画像アップロードが面倒

画像アップロードに関しては構築した自分ですら面倒なので、他人にそれをやらせるのは気がひける。

ローカルで作っているなら、imagesディレクトリかなんかに画像を放り込んで、そのパスを記事内に書くことになるだろう。

Github Web上で編集するならGithub Issue でIssueを作ってそこに画像をドラッグアンドドロップしたのち、その画像 URLコピーをして貼り付けといった流れになるだろう。

こんなんではWordPressの方がいいと言われるに決まっている。

他の記事書く人がGithubに慣れていない

Jekyll は Github Pages の元で動くため、実際に運用で他の人に記事を書かせるときにGithubのUIに慣れてもらわなければならない。英語オンリーでブランチやコミットなどよくわからない単語の羅列を無視しつつ、記事を書いてもらう必要がある。初見だと気が引けてしまうだろう。

Jekyll のメタデータの書き方など、それも手取り足取り教えないとブログ記事を公開することができない。

Prose で解決!

Prose という Github をクライアントサイドで操れるOSSがある。裏でGithub API を叩きまくっている作りだ。

Proseを使えば、画像は記事編集のテキストエリアにドラッグアンドドロップするだけでアップロードできる!アップロード先はそのリポジトリ内の画像ディレクトリ内に自動でコミットされる。

さらにJekyllでわかりにくいメタデータもHTMLフォームとしてカスタマイズすることが可能なので、Jekyllを全く知らない人がJekyllでブログを運用していくことが可能だ。 Prose.io を使わせるってのは一つの手だけども、これだと英語しか使えない問題があるので、日本語訳をここに載せておく。

ja.json · GitHub

ただ、これでもデフォルトは英語のままなので、デフォルトを英語にするにはコードをいじる必要がある。これはgrep検索して置換していくしかない。Prose.io は Backbone.js で書かれていて、ビルドにはGulpを用いている。このProseもForkしてGithub Pages で自分で公開すれば、カスタマイズしたProse.ioを外に出すことができる。その手順は以下が参考になる。

prose/CONTRIBUTING.md at master · prose/prose · GitHub

注意点: 画像アップロードに関して

proseの設定でmediaを指定しないと画像アップロードに失敗してしまう。これに対応するためには、Jekyll で運用しようとしているブログのGithubリポジトリ_prose.ymlを作成し、以下のように記述する。決してProseの方に_prose.ymlを作らないように注意していただきたい。これでハマった。。

prose:
  media: "assets"
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "blog"
      - name: "published"
        field:
          label: "記事を公開"
          element: "checkbox"
          value: "true"
      - name: "summary"
        field:
          element: "text"
          help: "記事概要"
      - name: "image"
        field:
          element: "text"
          help: "画像URL"
      - name: "link"
        field:
          element: "text"
          help: "外部URL"
      - name: "category"
        field:
          element: "hidden"
          value: "blog"

こんな感じのをプッシュすればいい感じに記事編集ができるようになるだろう。

Prose で 素敵なJekyllライフを。