LoginSignup
24

More than 5 years have passed since last update.

Middleman Blog を Bourbon, Neat, and Bitters で styling したテンプレートを作りました

Last updated at Posted at 2014-09-16

middleman-blog-bourbon-template

Thoughtbot の Styling a Middleman Blog with Bourbon, Neat, and Bitters という記事を読んでみて試しに作ったものです。

公開してみたものの、ぶっちゃけ自分ではブログを書かないので、優しいどなたかが試してくれることに淡い期待を抱いております。

スクリーンショット

screenshot.jpg

ふぃーちゃー

  • テンプレートエンジンは Slim
  • middleman-syntax を使ったシンタックスハイライト (ハイライトは rouge による)
  • Neat のグリッドシステムを使ったレスポンジブデザイン

など。

インストール

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

$ gem install middleman

テンプレートをローカルマシンにclone

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

Middleman ブログを作成

$ middleman init my-fantastic-blog --template=blog-bourbon

Bitters をインストール

$ cd my-fantastic-blog/source/stylesheets
$ bundle exec bitters install

Bitters で Neat のグリッドシステム設定を有効化

source/stylesheets/base/_base.scss の以下の @import 行のコメントを外す。

// Neat Settings -- uncomment if using Neat -- must be imported before Neat$
// @import 'grid-settings';$

起動

$ bundle exec middleman

Webブラウザで http://localhost:4567 にアクセスして見てみる。

サイトの設定

config.rb で、最低以下の箇所を設定する。

  • :site_url - Your blog URL
  • :site_author - Author name of your blog
  • :site_title - Your blog title

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24