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:

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?

Do I really need all this?

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:

Prerequisites

Installation

gem install middleman

Middleman Workflow

  1. Create project
    middleman init sample
    
  2. Install dependencies
    cd sample
    bundle install
    
  3. Run development server (localhost:4567)
    bundle exec middleman server
    
  4. ... ?
  5. Build static files
    bundle exec middleman build
    
  6. 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"

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