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

Attributions