Tumblr構築についてMJ

自己紹介MJ : 森淳（もり　じゅん）

所属 : ユニバ株式会社

役職 : フロントエンドエンジニア?

!

東京にでて速攻で会社を辞め、無職突入

そこをユニバさまに拾っていただき

現在東京生活2年目に突入し、生きていることに感謝

Middleman で tumblr 構築する話 かなり自己流の体験談

tumblr の凄いところ

基本無料！

好きなドメインも取れる！

テンプレート弄り放題！

ユーザ数１億人以上！

APIも充実…うん充実！

gzip化もしてくれてる最高！

tumblr のクソなところ

テンプレート管理が難しい。

サイト上で弄ろうものなら修羅場

基本的に1ファイル完結

スマートに構築していきたい！

というか運用できない

構築の流れ

Middleman で構築

build しまして コピペだけ

構築の前に…tumblarghを入れましょうhttps://github.com/jasonwebster/tumblargh

API経由で記事を生成してくれる。 ローカル環境でも開発できるようになるよ。 (でもmoreタグとか完全再現は×) ブログにパスワドがかかっているとエラーする(残念) ビルドするときに、tumblr固有の記述をしても エラーしなくなるよ！(私はビルドの時だけ有効にします)

※ 確認はtumblr 上でしよう！(javascript あたりが危険)

partialを使おう

before after

環境変数を使おう

static な 画像はbase64に

テンプレートも別ファイル化

tumblr と相性が いいのは ejs 系 !

外部ファイル化 するならなんでも ok

.css, .js 上げ直すの嫌！

inline 化しよう！ 僕は、gulp で、、、 https://www.npmjs.org/package/gulp-inline !

基本的にビルドした時点でガッチャンこしてます。 build するときにminifyしておくと、 コピペの際に見やすくなるよ。 !

※jsライブラリはスタティックに上げておくのがオススメ

後はビルドしてコピペ

そこも自動化したい。。。というのは置いといて これで、 !

ローカルでの構築の資産が流用しやすく ソースコードの修正を容易に インライン化していれば、上げ直す手間も省ける !

ようになった！

build前 build後123行 342行

実際にどんなもんか

まとめ

これで普段通りのコーディングしつつ tumblr 作れて嬉しいと思いました。 !

ただ、tumblr に middleman とか少し重いのでは… なので、assemble とかで出来ないか今後検討予定

ありがとうございました