狠狠撸

狠狠撸Share a Scribd company logo
Tumblr構築について
MJ
自己紹介
MJ : 森淳(もり?じゅん)
所属 : ユニバ株式会社
役職 : フロントエンドエンジニア?
!
東京にでて速攻で会社を辞め、無職突入
そこをユニバさまに拾っていただき
現在東京生活2年目に突入し、生きていることに感謝
Middleman で tumblr 構築する話
かなり自己流の体験談
LT middleman で tumblr テーマ が開発してみた件
tumblr の凄いところ
基本無料!
好きなドメインも取れる!
テンプレート弄り放題!
ユーザ数1億人以上!?
APIも充実…うん充実!
gzip化もしてくれてる最高!
tumblr のクソなところ
テンプレート管理が難しい。
サイト上で弄ろうものなら修羅場?
基本的に1ファイル完結
LT middleman で tumblr テーマ が開発してみた件
スマートに構築していきたい!?
というか運用できない
構築の流れ
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 とかで出来ないか今後検討予定
ありがとうございました

More Related Content

LT middleman で tumblr テーマ が開発してみた件