[middleman] [s3]
Middleman * Amazon S3で低コスト、運用なしのエンジニアブログを作った話 #02
はじめに
この記事は foodison advent calendar 2015 の4日目の記事です。
前回の記事ではWordpress をやめて Middleman でブログを作ることになった経緯について話したので、今回からエンジニアブログの目的とそれに合わせた機能をMiddlemanでどのように実装するか紹介したいと思います。Middlemanの使い方についてはもう説明する必要がないほど記事があるので検索してみてください。
エンジニアブログの目的
エンジニアブログの目的は前職（クラスメソッド）で立ち上げて運用していたDevelopers.IOというブログの戦略「クラスメソッドさんのブログ戦略」がベースにあります。改めて箇条書きするとこの6つです。
- 執筆者自身の備忘録、スキルアップ
- 会社・執筆者の知名度向上
- 社内外へのノウハウ共有
- エンジニアを採用するためのアピール
- 自社運営の媒体構築
- ブランディング
執筆者自身の成長に繋がって、結果的に会社に貢献できれば文句ないですよね。
ブログを書き続けることの難しさ
アウトプットが良いことだとわかっていても日々の業務に追われたり気が乗らなくて書かなくなってしまうことは多々あります。書き続けられる環境していくのが大事です。前職で管理していたブログのことを何度も持ち出すのはいかがなものかと思いますがこんなことをしていました。
- 露出を増やす
- 検索エンジンへの最適化
- 表示パフォーマンス改善
- 勉強会などのイベント実施
- Wordpress上の執筆環境整備
- HTMLの入力補助にEmmetを導入
- Markdownに対応
- アイコンや画像等の代理作成
- 品質維持
- 公開された記事の品質チェック
- 執筆者からのQA対応
- ちょっとしたゲーミフィケーション
- SNSのカウントやPVを経験値化したランク機能
- 一定数のシェアを獲得した記事にバッジを付ける
- 月、四半期、年単位での記事ランキング
- 報奨金制度（短期的なモチベーションアップ）
色々やってきましたが、軌道に乗るまではは1年近くかかりました。きっともっと短期間でやる方法もあるのでしょうがある程度時間がかかると思っておくと気持ち的にも楽です。このブログにも良かったところは取り入れていこうと思います。
参考記事
こんなエンジニアブログにしたい
このブログを作るにあたりこのあたりを意識しています。
- 好きなエディタで書ける
- Markdownが使える
- シンタックスハイライトできる
- プレビュー・ライブリロード
- 細かな設定を気にしなくて良い
- CLIで完結、デプロイはGithubにpushするだけ
- デプロイはSlackに通知
- 余計な装飾のないシンプルなUIデザイン
- 低コスト
- 運用なし
Middleman-blogで実現できること
Middleman-blogではもちろんMarkdownが使えます。プレビュー・ライブリロードできるのも便利。ライブリロードにはChrome拡張が必要です。記事ファイルはYaml FrontMatterでメタ情報を設定できるのでGUIでポチポチ設定することもありません。OGPの設定もできるようMiddleman-OGPも使って個別に設定する労力を最小限にしています。
published: true
title: 'Middleman * Amazon S3で低コスト、運用なしのエンジニアブログを作った話 #02'
author:
date: 2015-12-04 00:00:00 UTC+9
tags:
- middleman
- s3
ogp:
og:
description:
image:
'': 'http://tech.foodison.jp/assets/images/ogp.png'
type: image/png
また、記事になるMarkdownファイルはコマンドから生成できます。予めテンプレートを設定しておけるので必要なものだけ変更すれば済みます。
$ bundle exec middleman article --blog=blog [--date=2015-12-02] <ENTRY TITLE>
シンタックスハイライト
シンタックスハイライトは拡張機能のMiddleman-Syntaxを使います。
静的ビルドしてしまうのでJavaScript不要です。CSSも複数のテーマから選択できます。 このブログのシンタックスハイライトはGithubのテーマと同じものです。
CLIで完結、デプロイはGithubにpushするだけ
デプロイはWerckerを使ってS3にデプロイします。
GithubにPushするだけなので手軽です。Werckerは今のところ無料で使えるのも嬉しい。デプロイが失敗・完了したらSlackに通知するようにもできるので状況が把握し易いです。
何かあったとき用に手動でデプロイできるようMiddleman::S3Syncも設定してあります。
安く
実際にかかっている費用はGithubのプライベートリポジトリとAWSの費用（Route 53, Amazon S3）ぐらいで月1,000円もいかないぐらいです。
余計な装飾のないシンプルなUIデザイン
文章部分はリズム感のある見出しのレベル、行間を意識しています。（好き嫌いはあると思いますが･･･）
画像について
画像のアップロードはS3のPOSTアップロード機能を使った専用の画面を用意していますが、AWS CLIを使えばCLIからアップロードも可能です。
その他に使っているもの
ファイルの圧縮
JavaScript, CSSはMiddlemanの機能で圧縮できますが、HTMLと画像は圧縮できません。HTMLの圧縮はMiddleman-Minify-HTML、画像の圧縮にはMiddleman ImageOptimを使います。
Webフォーム
WebフォームはGoogleスプレッドシートのフォームを使っても良いですがFormKeepというthoughtbotが提供しているサービスが便利です。FormKeepはフォームの送信データだけをFormKeep側に渡してメールを送ったり、Zapierを使ってSlackに通知したり、WebHookで好きなところにデータを投げたりできるとっても便利なサービスです。詳しくは別の回で紹介する予定です。
まとめ
Middlemanを使えばこんな感じのエンジニアブログが手軽？に作れます。Wordpressで消耗した人はMiddlemanでブログを一度検討してみては？とちょっと煽っている感がありますがWordpressでもしっかりとした構成で構築できればしっかりと運用していけるはずです。次回はFormKeepについて紹介したいと思います。