Skip to content

Commit c813e85

Browse files
geraldbgeraldb
committed
Create jekyll_vs_middleman.md
1 parent 2855159 commit c813e85

File tree

1 file changed

+399
-0
lines changed

1 file changed

+399
-0
lines changed

‎jekyll_vs_middleman.md

Lines changed: 399 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,399 @@
1+
title: Stay Static - Jekyll vs Middleman - Build Static (Web) Sites w/ Ruby
2+
3+
4+
# Agenda
5+
6+
- Hello, Middleman
7+
- Hello, Jekyll
8+
- Middleman or Jekyll? - HTML Templates
9+
- Middleman or Jekyll? - Pages n Posts with Front Matter
10+
- Middleman or Jekyll? - Datafiles
11+
- Middleman or Jekyll? - HTML Templates - Loops
12+
- Middleman or Jekyll? - Configuration / Settings
13+
- Middleman or Jekyll? - Summary
14+
- More Static Site Builders (in Ruby)
15+
- And the Winner is...
16+
17+
18+
19+
# Hello, Middleman
20+
21+
by Thomas Reynolds et al (★5 026 / 974 690 Downloads) -
22+
web: [`middlemanapp.com`](https://middlemanapp.com),
23+
github: [`middleman/middleman`](https://github.com/middleman/middleman),
24+
gem: [`middleman`](https://rubygems.org/gems/middleman)
25+
26+
![](i/staticgen-middleman.png)
27+
28+
Static Site Spotlight:
29+
30+
[ROSSConf](https://github.com/rossconf/rossconf.io) •
31+
[EuRuKo 2016](https://github.com/euruko/euruko2016.github.io) •
32+
[Sass Language](https://github.com/sass/sass-site) •
33+
[Stay Static](https://github.com/staystatic/middleman) •
34+
[Many More](https://middlemanapp.com/community/built_using_middleman)
35+
36+
37+
38+
# Hello, Jekyll
39+
40+
by Tom Preston-Werner, Nick Quaranto,
41+
Parker Moore, Jordon Bedwell, Matt Rogers et al (★24 142 / 2 044 522 Downloads) -
42+
web: [`jekyllrb.com`](http://jekyllrb.com),
43+
github: [`jekyll/jekyll`](https://github.com/jekyll/jekyll),
44+
gem: [`jekyll`](https://rubygems.org/gems/jekyll)
45+
46+
![](i/staticgen-jekyll.png)
47+
48+
Static Site Spotlight:
49+
50+
[Vienna.rb](https://github.com/vienna-rb/vienna-rb.github.com) •
51+
[Vienna.html](https://github.com/viennahtml/viennahtml.github.io) •
52+
[Travis Foundation](https://github.com/travis-ci/travis-foundation) •
53+
[Hyde Press](https://github.com/hydepress/hydepress.github.io) •
54+
[Facebook React](https://github.com/facebook/react/tree/master/docs) •
55+
[Bootstrap](https://github.com/twbs/bootstrap/tree/master/docs) •
56+
[Stack Overflow Blog](https://github.com/StackExchange/stack-blog) •
57+
[PHP: The Right Way](https://github.com/codeguy/php-the-right-way) •
58+
[Open Data Handbook v2](https://github.com/okfn/opendatahandbook) •
59+
[Stay Static](https://github.com/staystatic/jekyll) •
60+
[Many More](https://github.com/jekyll/jekyll/wiki/Sites)
61+
[And More](http://planetjekyll.github.io/showcase)
62+
63+
64+
65+
# Middleman or Jekyll? - HTML Templates
66+
67+
**Middleman** - Embedded Ruby (ERB) Template Language
68+
69+
~~~
70+
<!DOCTYPE html>
71+
<html>
72+
<%%= partial "partials/head" %>
73+
<body>
74+
<%%= partial "partials/header" %>
75+
<div class="main">
76+
<%%= yield %>
77+
</div>
78+
<%%= partial "partials/footer" %>
79+
</body>
80+
</html>
81+
~~~
82+
83+
(Source: [`staystatic/middleman/layouts/layout.erb`](https://github.com/staystatic/middleman/blob/master/source/layouts/layout.erb))
84+
85+
86+
# Middleman or Jekyll? - HTML Templates (Cont.)
87+
88+
**Jekyll** - Liquid Template Language
89+
90+
~~~
91+
<!DOCTYPE html>
92+
<html>
93+
{%% include head.html %}
94+
</head>
95+
<body>
96+
{%% include header.html %}
97+
<div class="main">
98+
{{{ content }}
99+
</div>
100+
{%% include footer.html %}
101+
</body>
102+
</html>
103+
~~~
104+
105+
(Source: [`staystatic/jekyll/_layouts/default.html`](https://github.com/staystatic/jekyll/blob/master/_layouts/default.html))
106+
107+
108+
109+
# Middleman or Jekyll? - Pages n Posts with Front Matter
110+
111+
112+
**Middleman** - YAML + Markdown
113+
114+
~~~
115+
---
116+
layout: post
117+
title: beer.db - New Repo /maps - Free Interactive Beer Maps w/ Brewery Listings
118+
---
119+
120+
The beer.db project - offering free public domain beer, brewery
121+
and brewpubs data - added a new repo, that is, `/maps`
122+
for hosting 'full-screen' interactive beer maps with brewery listings.
123+
124+
See an example [beer map for Austria](http://openbeer.github.io/maps/at)
125+
(~200 breweries n brewpubs) live or
126+
[check the source](https://github.com/openbeer/maps) using the mapbox.js mapping library.
127+
128+
...
129+
~~~
130+
131+
(Source: [`staystatic/middleman/source/posts/2014-11-11-new-repo-maps.html.md`](https://github.com/staystatic/middleman/blob/master/source/posts/2014-11-11-new-repo-maps.html.md))
132+
133+
134+
135+
# Middleman or Jekyll? - Pages n Posts with Front Matter
136+
137+
**Jekyll** - YAML + Markdown
138+
139+
~~~
140+
---
141+
layout: post
142+
title: beer.db - New Repo /maps - Free Interactive Beer Maps w/ Brewery Listings
143+
---
144+
145+
The beer.db project - offering free public domain beer, brewery
146+
and brewpubs data - added a new repo, that is, `/maps`
147+
for hosting 'full-screen' interactive beer maps with brewery listings.
148+
149+
See an example [beer map for Austria](http://openbeer.github.io/maps/at)
150+
(~200 breweries n brewpubs) live or
151+
[check the source](https://github.com/openbeer/maps) using the mapbox.js mapping library.
152+
153+
...
154+
~~~
155+
156+
(Source: [`staystatic/jekyll/_posts/2014-11-11-new-repo-maps.md`](https://github.com/staystatic/jekyll/blob/master/_posts/2014-11-11-new-repo-maps.md))
157+
158+
159+
160+
# Middleman or Jekyll? - Datafiles
161+
162+
**Middleman** - YAML
163+
164+
~~~
165+
#############################
166+
# Links 'n' Bookmarks
167+
168+
- title: football.db - Open Football Data
169+
url: https://github.com/openfootball
170+
171+
- title: beer.db - Open Beer, Brewery 'n' Brewpub Data
172+
url: https://github.com/openbeer
173+
174+
- title: world.db - Open World Data
175+
url: https://github.com/openmundi
176+
~~~
177+
178+
(Source: [`staystatic/middleman/data/links.yml`](https://github.com/staystatic/middleman/blob/master/data/links.yml))
179+
180+
181+
182+
# Middleman or Jekyll? - Datafiles
183+
184+
**Jekyll** - YAML
185+
186+
~~~
187+
#############################
188+
# Links 'n' Bookmarks
189+
190+
- title: football.db - Open Football Data
191+
url: https://github.com/openfootball
192+
193+
- title: beer.db - Open Beer, Brewery 'n' Brewpub Data
194+
url: https://github.com/openbeer
195+
196+
- title: world.db - Open World Data
197+
url: https://github.com/openmundi
198+
~~~
199+
200+
(Source: [`staystatic/jekyll/_data/links.yml`](https://github.com/staystatic/jekyll/blob/master/_data/links.yml))
201+
202+
203+
# Middleman or Jekyll? - HTML Templates - Loops
204+
205+
**Middleman** - Embedded Ruby (ERB) Template Language
206+
207+
~~~
208+
<div>
209+
<b>Links 'n' Bookmarks</b>
210+
<ul>
211+
<%% data.links.each do |link| %>
212+
<li><%%= link_to link.title, link.url %></li>
213+
<%% end %>
214+
</ul>
215+
</div>
216+
~~~
217+
218+
~~~
219+
<div>
220+
<b>News 'n' Updates</b>
221+
<ul>
222+
<%% blog.articles.each do |article| %>
223+
<li><%%= link_to article.title, article.url %></li>
224+
<%% end %>
225+
</ul>
226+
</div>
227+
~~~
228+
229+
(Source: [`staystatic/middleman/source/index.html.erb`](https://github.com/staystatic/middleman/blob/master/source/index.html.erb))
230+
231+
232+
233+
# Middleman or Jekyll? - HTML Templates - Loops (Cont.)
234+
235+
**Jekyll** - Liquid Template Language
236+
237+
~~~
238+
<div>
239+
<b>Links 'n' Bookmarks</b>
240+
<ul class="links">
241+
{%% for link in site.data.links %}
242+
<li><a href="{{{link.url}}">{{{ link.title }}</a></li>
243+
{%% endfor %}
244+
</ul>
245+
</div>
246+
~~~
247+
248+
~~~
249+
<div>
250+
<b>News 'n' Updates</b>
251+
<ul class="news">
252+
{%% for post in site.posts %}
253+
<li><a href="{{{site.path}}{{{post.url}}">{{{ post.title }}</a></li>
254+
{%% endfor %}
255+
</ul>
256+
</div>
257+
~~~
258+
259+
(Source: [`staystatic/jekyll/index.html`](https://github.com/staystatic/jekyll/blob/master/index.html))
260+
261+
262+
263+
# Middleman or Jekyll? - Configuration / Settings
264+
265+
**Middleman** - Ruby
266+
267+
~~~
268+
source 'https://rubygems.org'
269+
270+
# Middleman Gems
271+
gem 'middleman', '>= 4.0.0'
272+
gem 'middleman-blog'
273+
~~~
274+
275+
(Source: [`staystatic/middleman/Gemfile`](https://github.com/staystatic/middleman/blob/master/Gemfile))
276+
277+
~~~
278+
activate :blog do |blog|
279+
blog.permalink = '/news/{title}.html'
280+
blog.sources = 'posts/{year}-{month}-{day}-{title}.html'
281+
end
282+
283+
helpers do
284+
def site_title
285+
'Middleman Stay Static Sample Site'
286+
end
287+
288+
def page_title
289+
current_page.data.title ? current_page.data.title : nil
290+
end
291+
end
292+
293+
configure :build do
294+
set :http_prefix, '/sites/middleman'
295+
end
296+
~~~
297+
298+
(Source: [`staystatic/middleman/config.rb`](https://github.com/staystatic/middleman/blob/master/config.rb))
299+
300+
301+
302+
# Middleman or Jekyll? - Configuration / Settings (Cont.)
303+
304+
**Jekyll** - YAML
305+
306+
~~~
307+
title: 'Jekyll Stay Static Sample Site'
308+
309+
path: '/sites/jekyll'
310+
url: 'http://staystatic.github.io/sites/jekyll'
311+
312+
markdown: kramdown
313+
314+
exclude:
315+
- README.md
316+
~~~
317+
318+
(Source: [`staystatic/jekyll/_config.yml`](https://github.com/staystatic/jekyll/blob/master/_config.yml))
319+
320+
321+
322+
# Middleman or Jekyll? - Summary
323+
324+
| - | Middleman | Jekyll |
325+
| ------------------------ | ---------- | --------- |
326+
| GitHub Stars (+1s) | ★5 026 | ★24 142 |
327+
| Gem Downloads | 974 690 | 2 044 522 |
328+
| - | - | - |
329+
| Settings / Configuration | Ruby | YAML |
330+
| HTML Templates | Ruby (ERB) | Liquid |
331+
| . Layouts | Yes | Yes |
332+
| . Includes | Yes | Yes |
333+
| Front Matter / Meta Data | YAML | YAML |
334+
| Datafiles | YAML | YAML |
335+
| CSS Preprocessing | Sass | Sass |
336+
| HTML "Shortcodes" | Markdown | Markdown |
337+
338+
339+
340+
# More Static Site Builders (in Ruby)
341+
342+
- [**Nanoc**](https://github.com/nanoc/nanoc) by Denis Defreyne et al (★1 283 / 223 529 Downloads)
343+
- [**Awestruct**](https://github.com/awestruct/awestruct) by Bob McWhirter et al (★221 / 132 949 Downloads)
344+
- [**webgen**](https://github.com/gettalong/webgen) by Thomas Leitner et al (★90 / 88 059 Downloads)
345+
- [**Bonsai**](https://github.com/benschwarz/bonsai) by Ben Schwarz et al (★275 / 54 502 Downloads)
346+
- [**Ruhoh**](https://github.com/ruhoh/ruhoh.rb) by Jade Dominguez et al (★623 / 24 891 Downloads) - _uses Mustache templates_
347+
- [**ZenWeb**](https://github.com/seattlerb/zenweb) by Ryan Davis et al (★52 / 18 083 Downloads)
348+
- and many more
349+
350+
Note: Sorted by Downloads
351+
352+
353+
354+
355+
# And the Winner is...
356+
357+
Use what works for you.
358+
359+
360+
361+
362+
# Links, Links, Links - Static Site News, Events 'n' More
363+
364+
**Stay Static Sample Sites (Showcase)**
365+
366+
- [Stay Static](http://staystatic.github.io)
367+
- [`/middleman`](https://github.com/staystatic/middleman)
368+
- [`/jekyll`](https://github.com/staystatic/jekyll)
369+
370+
**Articles**
371+
372+
- [Static Blogging Tool Face-Off: Middleman vs Jekyll](http://www.sitepoint.com/static-blogging-g-face-middleman-vs-jekyll) by David Turnbull; November 2015; SitePoint
373+
374+
**News**
375+
376+
- [Static Times News @ Twitter](https://twitter.com/statictimes)
377+
- [{static is} The New Dynamic](http://www.thenewdynamic.org)
378+
- [Middleman](http://www.thenewdynamic.org/tool/middleman)
379+
- [Jekyll](http://www.thenewdynamic.org/tool/jekyll)
380+
381+
**Events**
382+
383+
- [Vienna.html Meetup](http://viennahtml.github.io) - Next Meetup April 2016 @ sektor5 - Vienna, Austria
384+
- [Static Web Tech Meetup](http://www.staticwebtech.com) - @ San Francisco, California
385+
- [{static is} The New Dynamic Meetup](http://www.meetup.com/The-New-Dynamic) - @ New York City, New York
386+
387+
388+
389+
# Bonus: Many More Static Site Builder / Generators
390+
391+
**Q**: What about JavaScript, Python, PHP, Hugo, Haskell, Rust, C, Swift, Lisp, Bash, _[Your Language Here]_, etc.?
392+
393+
**A**: See the Static Site Builder / Generator Directories:
394+
395+
- [`staticgen.com`](http://www.staticgen.com)
396+
- [`staticsitegenerators.net`](https://staticsitegenerators.net)
397+
- [Static Site Generators @ `static-revival.com`](https://www.static-revival.com/static-site-generators)
398+
399+

0 commit comments

Comments
 (0)