Middleman - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

That’s him

Slide 3

Slide 3 text

Thanks, bye!

Slide 4

Slide 4 text

Static site generator on steroids

Slide 5

Slide 5 text

Assets Environment Views Data Static files Preview Server

Slide 6

Slide 6 text

Assets Ruby Views Data Static files Preview Server

Slide 7

Slide 7 text

Assets Views Data Sta fil Prev Ser

Slide 8

Slide 8 text

Use cases

Slide 9

Slide 9 text

Static sites

Slide 10

Slide 10 text

Single page applications

Slide 11

Slide 11 text

Prototypes

Slide 12

Slide 12 text

Anything, which doesn’t allow the average user to persist data

Slide 13

Slide 13 text

Using Github as “Database”

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Concepts

Slide 16

Slide 16 text

Ruby on Rails

Slide 17

Slide 17 text

Convention > Configuration

Slide 18

Slide 18 text

Sass Haml CoffeeScript

Slide 19

Slide 19 text

Moar meta & templating languages?

Slide 20

Slide 20 text

Slim Erubis Less CSS Builder Liquid RDiscount Redcarpet BlueCloth Kramdown Maruku RedCloth RDoc Radius Markaby Nokogiri CoffeeScript Creole (Wiki markup) WikiCloth (Wiki markup) Yajl Stylus

Slide 21

Slide 21 text

Getting started

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Installation

Slide 24

Slide 24 text

$ gem install middleman

Slide 25

Slide 25 text

$ middleman help middleman build [options] middleman console [options] middleman extension NAME [options] middleman init NAME [options] middleman server [options] middleman upgrade middleman version Need moar information? $ middleman help [COMMAND]

Slide 26

Slide 26 text

Development

Slide 27

Slide 27 text

$ middleman or $ middleman server often also $ bundle exec middleman server

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

== The Middleman is standing watch at http://0.0.0.0:4567

Slide 30

Slide 30 text

Port number $ middleman server -p 4567 $ middleman server --port=4568 Environment $ middleman server -e development $ middleman server --environment=build

Slide 31

Slide 31 text

Port number $ middleman server -p 4567 $ middleman server --port=4568 Environment $ middleman server -e development $ middleman server --environment=build Host $ middleman server -h 0.0.0.0 $ middleman server --host=0.0.0.0

Slide 32

Slide 32 text

--verbose --instrument=INSTRUMENT --disable-watcher --profile --reload-paths=RELOAD_PATHS --force-polling --latency=N

Slide 33

Slide 33 text

Build

Slide 34

Slide 34 text

$ middleman build create build/images/middleman.png create build/images/background.png identical build/images/middleman.png identical build/images/background.png create build/javascripts/all.js create build/stylesheets/normalize.css create build/stylesheets/all.css create build/index.html

Slide 35

Slide 35 text

Remove orphaned files $ middleman build --clean

Slide 36

Slide 36 text

--glob=GLOB --verbose --instrument=INSTRUMENT --profile

Slide 37

Slide 37 text

Bootstrapping

Slide 38

Slide 38 text

$ middleman init awesome_proto or $ middleman init awesome_proto --template=html5

Slide 39

Slide 39 text

Conventions

Slide 40

Slide 40 text

Dependencies management

Slide 41

Slide 41 text

Views and layouts

Slide 42

Slide 42 text

--template=TEMPLATE (also -T) --css-dir=CSS_DIR --js-dir=JS_DIR --images-dir=IMAGES_DIR --rack --skip-gemfile --skip-bundle --skip-git # DEFAULT: default, html5, mobile, smacss

Slide 43

Slide 43 text

Project templates

Slide 44

Slide 44 text

~/.middleman/MY_TEMPLATE

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

$ git clone git://github.com/polarblau/ ↵ middleman-template.git ↵ ~/.middleman/middleman-polarblau

Slide 47

Slide 47 text

$ git clone git://github.com/polarblau/ ↵ middleman-template.git ↵ ~/.middleman/middleman-polarblau $ middleman init PATH_TO_PROJECT ↵ --template=middleman-polarblau

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Configuration

Slide 50

Slide 50 text

Configuration

Slide 51

Slide 51 text

set :js_dir, 'js' or config[:js_dir] = 'js'

Slide 52

Slide 52 text

activate :asset_hash, :exts => %w(.jpg) or activate :asset_hash do |opts| opts.exts += $(.ico) end

Slide 53

Slide 53 text

configure :development do set :debug_assets, true end configure :build do activate :minify_css end

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Prerequisites Haml & Sass !

Slide 56

Slide 56 text

The Pages

Slide 57

Slide 57 text

Views

Slide 58

Slide 58 text

PROJECT_PATH/source/foo/bar.html.haml hosted at http://localhost:4567/foo/bar.html

Slide 59

Slide 59 text

Dynamic pages

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

data.speakers.each do |speaker| proxy "/speakers/#{speaker.twitter}.html", ↵ "/speaker.html", ↵ :locals => { :speaker => speaker } end

Slide 62

Slide 62 text

ignore "/ignore-me.html"

Slide 63

Slide 63 text

YAML Frontmatter

Slide 64

Slide 64 text

--- layout: "custom" foo: "bar" ---

Slide 65

Slide 65 text

current_page.data.foo # => "bar"

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

JSON Frontmatter

Slide 68

Slide 68 text

;;; "layout": "custom", "list": [ "one", "two", "three" ] ;;;

Slide 69

Slide 69 text

(Pretty) URLs

Slide 70

Slide 70 text

activate :directory_indexes

Slide 71

Slide 71 text

PROJECT_PATH/source/foo/index.html.haml available at http://localhost:4567/foo/ Don’t try this with assets, though. Duh!

Slide 72

Slide 72 text

set :index_file, "default.html"

Slide 73

Slide 73 text

PROJECT_PATH/source/foo/default.html.haml available at http://localhost:4567/foo/

Slide 74

Slide 74 text

Override single instances page "/foo/default.html", ↵ :directory_index => false PROJECT_PATH/source/foo/default.html.haml Remains available at http://localhost:4567/foo/default.html

Slide 75

Slide 75 text

Building blocks — Views

Slide 76

Slide 76 text

Layouts

Slide 77

Slide 77 text

Layouts

Slide 78

Slide 78 text

By default: /source/layouts/layout.haml %html %head %title = current_page.data.title %body #main(role="main") = yield

Slide 79

Slide 79 text

Layout source/layouts/layout.html.haml Current page source/foo/bar.html.haml = yield

Slide 80

Slide 80 text

Overriding layouts --- layout: "admin" --- or page "/admin/*", :layout => "admin"

Slide 81

Slide 81 text

Nested layouts: - wrap_layout :layout do %article = yield

Slide 82

Slide 82 text

Disable layouts: set :layout, false page '/foo.html', :layout => false

Slide 83

Slide 83 text

Partials

Slide 84

Slide 84 text

= partial 'partials/header'

Slide 85

Slide 85 text

Layout source/layouts/layout.html.haml Current page source/foo/bar.html.haml = partial partials/_header.html.haml partials/_sidebar.html.haml partials/_footer.html.haml

Slide 86

Slide 86 text

Setting partials folder globally set :partials_dir, 'partials' And use: = partial 'header'

Slide 87

Slide 87 text

Local data = partial 'header', ↵ :locals => { :title => "Foobar" }

Slide 88

Slide 88 text

content_for

Slide 89

Slide 89 text

= content_for :sidebar do = partial "product_sidebar" And elsewhere %aside = yield_content :sidebar

Slide 90

Slide 90 text

Layout source/layouts/layout.html.haml Current page source/foo/bar.html.haml yield_content :foo content_for :foo do ...

Slide 91

Slide 91 text

Building blocks — Assets

Slide 92

Slide 92 text

Images

Slide 93

Slide 93 text

Images

Slide 94

Slide 94 text

Sprockets

Slide 95

Slide 95 text

require for JS/CSS

Slide 96

Slide 96 text

Import path sprockets.append_path '/my/shared/assets/'

Slide 97

Slide 97 text

Stylesheets

Slide 98

Slide 98 text

Stylesheets

Slide 99

Slide 99 text

//= require base or @import "base"

Slide 100

Slide 100 text

Scripts

Slide 101

Slide 101 text

Scripts

Slide 102

Slide 102 text

Compass

Slide 103

Slide 103 text

Compression and GZIP

Slide 104

Slide 104 text

configure :build do activate :minify_css activate :minify_javascript activate :gzip end

Slide 105

Slide 105 text

Asset caching

Slide 106

Slide 106 text

activate :asset_hash

Slide 107

Slide 107 text

Building blocks — Data

Slide 108

Slide 108 text

YAML

Slide 109

Slide 109 text

PROJECT_PATH/data/friends.yml

Slide 110

Slide 110 text

friends: - Tom - Dick - Harry

Slide 111

Slide 111 text

%ul - data.friends.each do |friend| %li= friend

Slide 112

Slide 112 text

PROJECT_PATH/data/products/light/saber.yml

Slide 113

Slide 113 text

data.products.light.saber

Slide 114

Slide 114 text

JSON

Slide 115

Slide 115 text

{ "friends": [ "Tom", "Dick", "Harry" ] }

Slide 116

Slide 116 text

Helpers

Slide 117

Slide 117 text

Template helpers

Slide 118

Slide 118 text

stylesheet_link_tag 'layout' javascript_include_tag 'application'

Slide 119

Slide 119 text

link_to 'Products', '/products.html' link_to '/products.html' do %strong Products set :relative_links, true

Slide 120

Slide 120 text

simple_format("hello\nworld") pluralize(2, 'person') truncate("LONG TEXT", :length => 8) and many more …

Slide 121

Slide 121 text

lorem.sentence lorem.words 5 lorem.image('300x400')

Slide 122

Slide 122 text

# projects/rockets/saturn-v.html page_classes returns projects rockets saturn-v

Slide 123

Slide 123 text

Custom helpers

Slide 124

Slide 124 text

# config.rb helpers do def title(fragment = nil, separator = " | ") @title ||= [current_page.data.title] @title << fragment @title.flatten .compact .reject(&:empty?) .join(separator) end end

Slide 125

Slide 125 text

# helpers/html_helpers.rb module HtmlHelpers def title(fragment = nil, separator = " | ") @title ||= [current_page.data.title] @title << fragment @title.flatten .compact .reject(&:empty?) .join(separator) end end

Slide 126

Slide 126 text

i18n

Slide 127

Slide 127 text

activate :i18n

Slide 128

Slide 128 text

# locales/en.yml en: hello: world: "Hello"

Slide 129

Slide 129 text

%h1= I18n.t("hello.world")

Slide 130

Slide 130 text

URLs

Slide 131

Slide 131 text

activate :i18n, :path => "/langs/:locale/" makes language versions available via /langs/en/index.html /langs/fi/index.html /langs/de/index.html