In the beginning...

Static Web Sites

Generating HTML

Web Applications

Database

Datastore

Scaling is Hard

Generate Static Content

Database

Deploy to the Cloud

What is Middleman?

• Static site generator...
• Built on top of Padrino...
• Built on top of Sinatra...
• Which is a Rack application.

That last bit is important...

View Layer

• Templates
• Layouts
• Partials
• View Helpers

Templating Options

• ERb
• HAML
• Markdown
• Others

Templating Systems are Composable

index.markdown.erb

Reads from right to left

Data Layer

Configuration Driven

config.rb
    

Front matter

Front Matter

• Attached to the current page
• Available through the current_page.data method
• Great for page specific metadata

YAML

---
title: A Sample Team Page
---
    

JSON

;;;
"title": "A Sample Team Page"
;;;
    

<%= current_page.data.title %>
    

A Sample Team Page
    

Local Data

Local Data

• JSON or YAML
• Stored under data
• Available via the data helper

data/team.yml

---
-
  slug: fred
  name: Frederic Jean
  title: Senior Bit Twiddler
  bio: Something really clever goes here...
    

Using local data in a page

<% data.team.each do |member| %>
   <%= image_tag "team/#{member.slug}.png", width: '25%', height: '25%' %>
  
<%= link_to member.name, "/team/" + member.slug %>
<% end %>
    

Dynamic Pages

data.team.each do |member|
  proxy "/team/#{member.slug}.html", "team/team.html",
        locals: { member: member }, ignore: true
end
    

Dynamic Pages

team/fred.html
team/peter.html
team/anthony.html
    

Data in Proxy Page

  
<%= member.name %> — <%= member.title %>
  <%= image_tag "team/#{member.slug}.png" %>
  
<%= member.bio %>
  

    

Data in Proxy Page

  
Fred Jean — Bit Twiddler
  
  
Something really clever goes here...
  

    

Building Static Content

$ middleman build
    

Extensions

Page Load Optimisation

• minify_css
• minify_javascript
• smusher
• minify_html
• gzip

Assets Management

• relative_assets
• asset_hash

$$$

Publishing

middleman-s3_sync

The gem that tries really hard not to push files to S3

Configure S3 Sync

activate :s3_sync do |sync|
  sync.bucket = 'go-static.fredjean.net'
  sync.region = 'us-west-1'
end
    

Setup AWS Credentials

• Store in config.rb
• Store in environment
• Store in .s3_sync

Push

$  middleman s3_sync
     s3_sync  Gathering the paths to evaluate.
     s3_sync  Ready to apply updates to go-static-my-friend.fredjean.net.
     s3_sync  Creating lib/css/fullscreen-img.css
     s3_sync  Creating lib/js/fullscreen-img.js
     s3_sync  Updating css/main.css
     s3_sync  Updating css/reveal.css
    

Configure S3 for Website Hosting

Configure S3 for Website Hosting

Setup DNS

• ALIAS for "naked domains"
• CNAME is sufficient for sub-domains
• Amazon Route 53 works best
• DNSimple works pretty good though

Wrapping Up