Fast Sites with Middleman

Josh W Lewis @joshwlewis

5/23/2013

I want to create an application to build and display my slide decks!

What could I use?

Rails?
Sinatra?
Django?
Node?

Do I really need all this?

Authentication
Admin Panel
WYSIWYG Editor
Dynamic Page Handling
Database storage
Sophisticated Caching

What about a plain HTML site?

It would be fast...

I could put it on ANY server...

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
  <title>Plain HTML Site</title>
  <meta content="I don't want to write all this HTML" name='description'>
  <meta content='width=device-width' name='viewport'>
</head>
...

....ugh! No Thanks!

Enter Middleman

Ruby based Static Site Generator

middlemanapp.com

Middleman lets you:

Write Ruby code
Use layouts, views and paritals
Use Rails-like helpers
Deploy anywhere
Build incredibly fast sites
Build sites incredibly fast

Prerequisites

Ruby (1.9+)
RubyGems
Bundler

Installation

gem install middleman

Middleman Workflow

Create project
```
middleman init sample
```
Install dependencies
```
cd sample
bundle install
```
Run development server (localhost:4567)
```
bundle exec middleman server
```
... ?
Build static files
```
bundle exec middleman build
```
Profit!

Sample Project Structure

- source
  - javascripts
    - example.coffee
  - stylesheets
    - example.sass
  - layouts
    - layout.haml
  - index.html.erb
  - about.md
- build
  - javascripts
    - example.js
  - stylesheets
    - example.css
  - index.html
  - about.html

The code in this presentation...

...built this presentation.

Source Code: github.com/joshwlewis/slides
In Production: slides.joshwlewis.com/middleman

Layouts

source/layouts/layout.haml

!!!5
%html
  %head
    %meta{charset: "utf-8"}
    %title= page_title
    %meta{name: "description", content: page_description}
    ...
    = stylesheet_link_tag "application"
  %body
    .fallback-message= partial 'fallback'
    = yield
    ...
    = javascript_include_tag "application"

Helpers

source/helpers/site_helper.rb

module SiteHelpers
  def page_title
    [data.page.title, "Josh W Lewis"].compact.join(' | ')
  end

  def page_description
    data.page.description || "Slides by Josh W Lewis"
  end

  def step(id, opts={}, &block)
    content_tag :div, id: id, class: :step, data: opts do
      capture(&block) if block_given?
    end
  end
end

Views

source/middleman/index.haml


---
title: Fast Sites with Middleman
published: true
description: Create fast sites fast with your favorite Ruby tools
---

= step "title" do
  %h1 Fast Sites with Middleman
  %h4
    Josh W Lewis
    %a{href: "//twitter.com/joshwlewis"} @joshwlewis
  %date 5/23/2013

Partials

source/_fallback.md

### Your browser doesn't support the features needed to display this presentation.

A simplified version of this presentation follows.

For the best experience, please use one of the following browsers:

- [Chrome](//www.google.com/chrome)
- [Safari](//www.apple.com/safari)
- [Firefox](//www.mozilla.org/firefox)

Stylesheets

source/stylesheets/application.sass

@import url(//fonts.googleapis.com/css?family=Droid...
@import "vendor/solarized"
$sansFontFamily: "Droid Sans", "Helvetica Neue"...
$monoFontFamily: "Droid Sans Mono", Monaco...
$baseFontSize: 26px
$baseLineHeight: 38px
@import "bootstrap"

body.impress-supported
  .fallback-message
    display: none
  .step
    width: 900px
  #title, #middleman, #demo, #meta-outside
    text-align: center

Javascripts

source/javascripts/application/tweet.coffee

jQuery ->
  $(".tweets").tweet
    avatar_size: 48
    count: 3
    query: "#memtech"

EDIT: This worked well until Twitter revised their API to require all requests to be authenticated.

Asset Minification and Hashes

source/stylesheets/application.css.sass

body.impress-supported
  .fallback-message
    display: none
  .step
    width: 900px
  #title, #middleman, #demo, #meta-outside
    text-align: center

build/stylesheets/application-ea1c367d.css

body.impress-supported .fallback-message{display:none}body.impress-supported .step{width:850px}body.impress-supported #title,body.impress-supported #middleman,body.impress-supported #demo,body.impress-supported #meta-outside{text-align:center}

Live Demo

What could go wrong?

Middleman Extensions

Blogging functionality: github.com/middleman/middleman-blog
Syntax highlighting: github.com/middleman/middleman-syntax
Deploy to Github Pages: github.com/neo/middleman-gh-pages
Deploy to most servers: github.com/tvaughan/middleman-deploy

Resources

Middleman: middlemanapp.com
impress.js (3D slides): bartaz.github.io/impress.js
This Presentation: slides.joshwlewis.com/middleman
Presentation Source: github.com/joshwlewis/slides

Your browser doesn’t support the features needed to display this presentation.