Middleman

An in depth introduction to the static site generator.

Transcript

1. View Slide

2. That’s him
   

   View Slide

3. Thanks, bye!
   

   View Slide

4. Static site generator
   on steroids
   

   View Slide

5. Assets
   Environment
   Views
   Data
   Static
   files
   Preview
   Server
   

   View Slide

6. Assets
   Ruby
   Views
   Data
   Static
   files
   Preview
   Server
   

   View Slide

7. Assets
   Views
   Data
   Sta
   fil
   Prev
   Ser
   

   View Slide

8. Use cases
   

   View Slide

9. Static sites
   

   View Slide

10. Single page applications
    

    View Slide

11. Prototypes
    

    View Slide

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

    View Slide

13. Using Github as “Database”
    

    View Slide

14. View Slide

15. Concepts
    

    View Slide

16. Ruby on Rails
    

    View Slide

17. Convention > Configuration
    

    View Slide

18. Sass
    Haml
    CoffeeScript
    

    View Slide

19. Moar meta
    &
    templating languages?
    

    View Slide

20. 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
    

    View Slide

21. Getting started
    

    View Slide

22. View Slide

23. Installation
    

    View Slide

24. $ gem install middleman
    

    View Slide

25. $ 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]
    

    View Slide

26. Development
    

    View Slide

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

    View Slide

28. View Slide

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

    View Slide

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

    View Slide

31. 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
    

    View Slide

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

    View Slide

33. Build
    

    View Slide

34. $ 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
    

    View Slide

35. Remove orphaned files
    $ middleman build --clean
    

    View Slide

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

    View Slide

37. Bootstrapping
    

    View Slide

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

    View Slide

39. Conventions
    

    View Slide

40. Dependencies
    management
    

    View Slide

41. Views and
    layouts
    

    View Slide

42. --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
    

    View Slide

43. Project templates
    

    View Slide

44. ~/.middleman/MY_TEMPLATE
    

    View Slide

45. View Slide

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

    View Slide

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

    View Slide

48. View Slide

49. Configuration
    

    View Slide

50. Configuration
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. View Slide

55. Prerequisites
    Haml & Sass
    !
    

    View Slide

56. The Pages
    

    View Slide

57. Views
    

    View Slide

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

    View Slide

59. Dynamic pages
    

    View Slide

60. View Slide

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

    View Slide

62. ignore "/ignore-me.html"
    

    View Slide

63. YAML Frontmatter
    

    View Slide

64. ---
    layout: "custom"
    foo: "bar"
    ---
    

    View Slide

65. current_page.data.foo # => "bar"
    

    View Slide

66. View Slide

67. JSON Frontmatter
    

    View Slide

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

    View Slide

69. (Pretty) URLs
    

    View Slide

70. activate :directory_indexes
    

    View Slide

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

    View Slide

72. set :index_file, "default.html"
    

    View Slide

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

    View Slide

74. 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
    

    View Slide

75. Building blocks
    —
    Views
    

    View Slide

76. Layouts
    

    View Slide

77. Layouts
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. Partials
    

    View Slide

84. = partial 'partials/header'
    

    View Slide

85. 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
    

    View Slide

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

    View Slide

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

    View Slide

88. content_for
    

    View Slide

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

    View Slide

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

    View Slide

91. Building blocks
    —
    Assets
    

    View Slide

92. Images
    

    View Slide

93. Images
    

    View Slide

94. Sprockets
    

    View Slide

95. require for JS/CSS
    

    View Slide

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

    View Slide

97. Stylesheets
    

    View Slide

98. Stylesheets
    

    View Slide

99. //= require base
    or
    @import "base"
    

    View Slide

100. Scripts
     

     View Slide

101. Scripts
     

     View Slide

102. Compass
     

     View Slide

103. Compression and GZIP
     

     View Slide

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

     View Slide

105. Asset caching
     

     View Slide

106. activate :asset_hash
     

     View Slide

107. Building blocks
     —
     Data
     

     View Slide

108. YAML
     

     View Slide

109. PROJECT_PATH/data/friends.yml
     

     View Slide

110. friends:
     - Tom
     - Dick
     - Harry
     

     View Slide

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

     View Slide

112. PROJECT_PATH/data/products/light/saber.yml
     

     View Slide

113. data.products.light.saber
     

     View Slide

114. JSON
     

     View Slide

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

     View Slide

116. Helpers
     

     View Slide

117. Template helpers
     

     View Slide

118. stylesheet_link_tag 'layout'
     javascript_include_tag 'application'
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

123. Custom helpers
     

     View Slide

124. # 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
     

     View Slide

125. # 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
     

     View Slide

126. i18n
     

     View Slide

127. activate :i18n
     

     View Slide

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

     View Slide

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

     View Slide

130. URLs
     

     View Slide

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

     View Slide

132. Default language
     

     View Slide

133. Default language as root
     activate :i18n, :mount_at_root => :fi
     

     View Slide

134. Translate entire pages
     index.en.html.erb
     index.es.html.erb
     

     View Slide

135. Sitemap
     

     View Slide

136. View Slide

137. Extending
     Middleman
     

     View Slide

138. Rack middleware
     

     View Slide

139. Custom extensions
     

     View Slide

140. Let’s build something!
     

     View Slide