Middleman

An in depth introduction to the static site generator.

Transcript

2. That’s him
3. Thanks, bye!
4. Static site generator on steroids
5. Assets Environment Views Data Static files Preview Server
6. Assets Ruby Views Data Static files Preview Server
7. Assets Views Data Sta fil Prev Ser
8. Use cases
9. Static sites
10. Single page applications
11. Prototypes
12. Anything, which doesn’t allow the average user to persist data
13. Using Github as “Database”
15. Concepts
16. Ruby on Rails
17. Convention > Configuration
18. Sass Haml CoffeeScript
19. Moar meta & templating languages?
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
21. Getting started
23. Installation
24. $ gem install middleman
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]
26. Development
27. $ middleman or $ middleman server often also $ bundle exec middleman server
29. == The Middleman is standing watch at http://0.0.0.0:4567
30. Port number $ middleman server -p 4567 $ middleman server --port=4568 Environment $ middleman server -e development $ middleman server --environment=build
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
32. --verbose --instrument=INSTRUMENT --disable-watcher --profile --reload-paths=RELOAD_PATHS --force-polling --latency=N
33. Build
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
35. Remove orphaned files $ middleman build --clean
36. --glob=GLOB --verbose --instrument=INSTRUMENT --profile
37. Bootstrapping
38. $ middleman init awesome_proto or $ middleman init awesome_proto --template=html5
39. Conventions
40. Dependencies management
41. Views and layouts
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
43. Project templates
44. ~/.middleman/MY_TEMPLATE
46. $ git clone git://github.com/polarblau/ ↵ middleman-template.git ↵ ~/.middleman/middleman-polarblau
47. $ git clone git://github.com/polarblau/ ↵ middleman-template.git ↵ ~/.middleman/middleman-polarblau $ middleman init PATH_TO_PROJECT ↵ --template=middleman-polarblau
49. Configuration
50. Configuration
51. set :js_dir, 'js' or config[:js_dir] = 'js'
52. activate :asset_hash, :exts => %w(.jpg) or activate :asset_hash do |opts| opts.exts += $(.ico) end
53. configure :development do set :debug_assets, true end configure :build do activate :minify_css end
55. Prerequisites Haml & Sass !
56. The Pages
57. Views
58. PROJECT_PATH/source/foo/bar.html.haml hosted at http://localhost:4567/foo/bar.html
59. Dynamic pages
61. data.speakers.each do |speaker| proxy "/speakers/#{speaker.twitter}.html", ↵ "/speaker.html", ↵ :locals => { :speaker => speaker } end
62. ignore "/ignore-me.html"
63. YAML Frontmatter
64. --- layout: "custom" foo: "bar" ---
65. current_page.data.foo # => "bar"
67. JSON Frontmatter
68. ;;; "layout": "custom", "list": [ "one", "two", "three" ] ;;;
69. (Pretty) URLs
70. activate :directory_indexes
71. PROJECT_PATH/source/foo/index.html.haml available at http://localhost:4567/foo/ Don’t try this with assets, though. Duh!
72. set :index_file, "default.html"
73. PROJECT_PATH/source/foo/default.html.haml available at http://localhost:4567/foo/
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
75. Building blocks — Views
76. Layouts
77. Layouts
78. By default: /source/layouts/layout.haml %html %head %title = current_page.data.title %body #main(role="main") = yield
79. Layout source/layouts/layout.html.haml Current page source/foo/bar.html.haml = yield
80. Overriding layouts --- layout: "admin" --- or page "/admin/*", :layout => "admin"
81. Nested layouts: - wrap_layout :layout do %article = yield
82. Disable layouts: set :layout, false page '/foo.html', :layout => false
83. Partials
84. = partial 'partials/header'
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
86. Setting partials folder globally set :partials_dir, 'partials' And use: = partial 'header'
87. Local data = partial 'header', ↵ :locals => { :title => "Foobar" }
88. content_for
89. = content_for :sidebar do = partial "product_sidebar" And elsewhere %aside = yield_content :sidebar
90. Layout source/layouts/layout.html.haml Current page source/foo/bar.html.haml yield_content :foo content_for :foo do ...
91. Building blocks — Assets
92. Images
93. Images
94. Sprockets
95. require for JS/CSS
96. Import path sprockets.append_path '/my/shared/assets/'
97. Stylesheets
98. Stylesheets
99. //= require base or @import "base"
100. Scripts
101. Scripts
102. Compass
103. Compression and GZIP
104. configure :build do activate :minify_css activate :minify_javascript activate :gzip end
105. Asset caching
106. activate :asset_hash
107. Building blocks — Data
108. YAML
109. PROJECT_PATH/data/friends.yml
110. friends: - Tom - Dick - Harry
111. %ul - data.friends.each do |friend| %li= friend
112. PROJECT_PATH/data/products/light/saber.yml
113. data.products.light.saber
114. JSON
115. { "friends": [ "Tom", "Dick", "Harry" ] }
116. Helpers
117. Template helpers
118. stylesheet_link_tag 'layout' javascript_include_tag 'application'
119. link_to 'Products', '/products.html' link_to '/products.html' do %strong Products set :relative_links, true
120. simple_format("hello\nworld") pluralize(2, 'person') truncate("LONG TEXT", :length => 8) and many more …
121. lorem.sentence lorem.words 5 lorem.image('300x400')
122. # projects/rockets/saturn-v.html page_classes returns projects rockets saturn-v
123. Custom helpers
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
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
126. i18n
127. activate :i18n
128. # locales/en.yml en: hello: world: "Hello"
129. %h1= I18n.t("hello.world")
130. URLs
131. activate :i18n, :path => "/langs/:locale/" makes language versions available via /langs/en/index.html /langs/fi/index.html /langs/de/index.html
132. Default language
133. Default language as root activate :i18n, :mount_at_root => :fi
134. Translate entire pages index.en.html.erb index.es.html.erb
135. Sitemap
137. Extending Middleman
138. Rack middleware
139. Custom extensions
140. Let’s build something!