Middleman 4 の新機能を試す シリーズMiddleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
はじめに
Middleman 4 の新機能を試しながらある程度知見がたまったので、それらを詰め合わせた ブログ向けの Middleman Skeleton 「middleman-tail」を作ってみました。名前と機能は全く関係無く、気分で「ねこのしっぽ」です。ドキュメントや README が不親切なのは大目に見てください。
どんな Skeleton なのか
JavaScript や Sass のコンパイルを Sprokets から External Pipeline を使って Gulp に移行しつつ、ブログに必要な Middleman 拡張をプリインストールし、必要な設定を済ませてある「すぐにブログを作り始められる Skeleton」です。Skeleton として使うまでいかなくとも、各プラグインの使い方や External Pipeline の参考例ぐらいにはなるんじゃないかなと思っています。
- Github: middleman-tail
主な特徴
主な特徴は以下の通りです。
HTMLやCSSは最低限のものしか用意していないので、フロント側は自由に作ることができます。
- 拡張機能のプリインストールと設定
- 外部パイプライン（Gulp）
- Slim テンプレート
- 日本時間に対応 Asia/Tokyo (UTC+9)
環境
この Skeleton を使うには以下の環境が必要です。
Skeleton のインストール
Skeleton は github のリポジトリ名を指定してインストールできます（Middleman がインストールされていることが前提となります）。
$ middleman init PROJECTNAME -T nukos/middleman-tail
npm のインストール
Skeleton の インストール時に npm のインストールは行われないので手動でインストールします。
$ npm install
あとは $ bundle exec middleman server でサーバーを起動します。
画面イメージ
middleman-s3_sync について
middleman-s3_sync をプリインストールしていますが、設定自体はオフになっています。AWS のアクセスキー・シークレット ID を直書きすることもできますが、AWS SDK for Ruby の Credential を使えるようになっています。
終わりに
とりあえず、公開してみましたが荒削りなところも多いので今後はドキュメントを整えたりHTML, CSSテンプレートを追加したりと改善していこうと思います。何か問題があれば issue やコメントで指摘してもらえると幸いです。
シリーズ
- Middleman 4 をインストールしてみる
- Middleman 4 で middleman-blog をインストールしてみる
- Browserify を試してみる
- Gulp から Browserify を実行する
- Watchify を使った Browserify の 変更監視と自動バンドル
- Gulp から Watchify と Browserify を使う
- Middleman 4 の External Pipeline（外部パイプライン）を試す
- Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
- Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
- gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
- Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
- Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）