また Middleman blog のテンプレートができたので宣伝にきました

  • 21
    Like
  • 0
    Comment
More than 1 year has passed since last update.

Drops という middleman-blog 用のテンプレートを作ったので宣伝にきました。

https://github.com/5t111111/middleman-blog-drops-template

画面

こんな見た目です。

screenshot.jpg

主な特徴

  • 黒い水滴くんみたいなキャラがかわいいです
  • Heroku へのデプロイ準備OKです (New Relic アドオンもすぐ追加できます)
  • サイトマップと Atom のフィードが自動的に作られます
  • Breakpoint を使って割とレスポンシブになってます
  • シンタックスハイライトが効きます (middleman-syntaxrouge を使ってます)
  • アセット管理に Rails Assets 使ってます (Bower のインストール不要です)
  • Nokogiri 使いません (Oga を使ってカスタマイズしたフォーク版の middleman-blog を使います)

インストールのしかた

Middleman をインストールしてなかったらインストールしてください。

$ gem install middleman

テンプレートをローカルにクローン

$ mkdir ~/.middleman # if it doesn't exist
$ cd ~/.middleman
$ git clone https://github.com/5t111111/middleman-blog-drops-template.git blog-drops

Middleman ブログのプロジェクトを作る

$ middleman init my_blog_project --template=blog-drops

Gem をインストールする

$ cd my_blog_project
$ bundle install

Middleman サーバーを起動する

$ bundle exec middleman

起動したら http://localhost:4567 を Web ブラウザで開いてみてください。

記事を書く

一応、記事を書く準備はこれでOKです。
source/posts に Markdown 形式のファイル (拡張子: .md) を作ってそこに書いてください。
2014-11-20-this-is-an-example-article.html.md というサンプルの記事ファイルがあるのでそれを参考にすると早いです。

ブログの構成

公開の際には、config.rb の最後の方にある以下の設定を変更してください。

name description
:site_url ブログの URL
:site_title ブログのサイトのタイトル
:site_description ブログの説明 (今のところ、META タグの description でしか使われません)
:site_author ブログの著者の名前
:site_author_profile ブログの著者のプロフィール
:site_author_image ブログの著者の画像
:reverse_title true だとページのタイトルがブログのサイトのタイトルの先にくる
:social_links 著者ページのソーシャルリンク設定
:google_analytics_account Google Analytics アカウント (オプション)

Heroku へのデプロイ

静的サイト用の Rack appliction の構成が設定されいてるので、ほとんど何もしなくても Heroku にデプロイできます。

Ruby バージョンだけは手動で指定してください。

source 'https://rubygems.org'
source 'https://rails-assets.org'

ruby '2.1.5'

# middleman
gem 'middleman', '~> 3.3.5'

...

変更を全部コミットして、Heroku アプリケーションを作ります。

$ heroku create

Heroku にプッシュ。

$ git push heroku master

Web ブラウザで確認。

$ heroku open

詳細は、config.ruProcfile の中身を直接見てください。

ライセンス

コードは MIT です。
が、テンプレートに含まれている以下の画像の使用だけは、このテンプレートと一緒に使う用途に限るとし、テンプレートのフォーク以外での2次利用と再配布はだめよーだめだめとさせてください。

  • drops.png
  • favicon.png
  • profile.png