Skip to content

Latest commit

 

History

History
399 lines (266 loc) · 10.7 KB

jekyll_vs_middleman.md

File metadata and controls

399 lines (266 loc) · 10.7 KB
Raw

title: Stay Static - Jekyll vs Middleman - Build Static (Web) Sites w/ Ruby

Agenda

  • Hello, Middleman
  • Hello, Jekyll
  • Middleman or Jekyll? - HTML Templates
  • Middleman or Jekyll? - Pages n Posts with Front Matter
  • Middleman or Jekyll? - Datafiles
  • Middleman or Jekyll? - HTML Templates - Loops
  • Middleman or Jekyll? - Configuration / Settings
  • Middleman or Jekyll? - Summary
  • More Static Site Builders (in Ruby)
  • And the Winner is...

Hello, Middleman

by Thomas Reynolds et al (★5 026 / 974 690 Downloads) - web: middlemanapp.com, github: middleman/middleman, gem: middleman

Static Site Spotlight:

ROSSConf • EuRuKo 2016 • Sass Language • Stay Static • Many More

Hello, Jekyll

by Tom Preston-Werner, Nick Quaranto, Parker Moore, Jordon Bedwell, Matt Rogers et al (★24 142 / 2 044 522 Downloads) - web: jekyllrb.com, github: jekyll/jekyll, gem: jekyll

Static Site Spotlight:

Vienna.rb • Vienna.html • Travis Foundation • Hyde Press • Facebook React • Bootstrap • Stack Overflow Blog • PHP: The Right Way • Open Data Handbook v2 • Stay Static • Many More And More

Middleman or Jekyll? - HTML Templates

Middleman - Embedded Ruby (ERB) Template Language

<!DOCTYPE html>
<html>
  <%%= partial "partials/head" %>
  <body>
    <%%= partial "partials/header" %>
    <div class="main">
      <%%= yield %>
    </div>
    <%%= partial "partials/footer" %>
  </body>
</html>

(Source: staystatic/middleman/layouts/layout.erb)

Middleman or Jekyll? - HTML Templates (Cont.)

Jekyll - Liquid Template Language

<!DOCTYPE html>
<html>
  {%% include head.html %}
  </head>
  <body>
    {%% include header.html %}
    <div class="main">
      {{{ content }}
    </div>   
    {%% include footer.html %}
  </body>
</html>

(Source: staystatic/jekyll/_layouts/default.html)

Middleman or Jekyll? - Pages n Posts with Front Matter

Middleman - YAML + Markdown

---
layout: post
title:  beer.db - New Repo /maps - Free Interactive Beer Maps w/ Brewery Listings
---

The beer.db project - offering free public domain beer, brewery
and brewpubs data - added a new repo, that is, `/maps` 
for hosting 'full-screen' interactive beer maps with brewery listings.

See an example [beer map for Austria](http://openbeer.github.io/maps/at)
(~200 breweries n brewpubs) live or
[check the source](https://github.com/openbeer/maps) using the mapbox.js mapping library.

...

(Source: staystatic/middleman/source/posts/2014-11-11-new-repo-maps.html.md)

Middleman or Jekyll? - Pages n Posts with Front Matter

Jekyll - YAML + Markdown

---
layout: post
title:  beer.db - New Repo /maps - Free Interactive Beer Maps w/ Brewery Listings
---

The beer.db project - offering free public domain beer, brewery
and brewpubs data - added a new repo, that is, `/maps` 
for hosting 'full-screen' interactive beer maps with brewery listings.

See an example [beer map for Austria](http://openbeer.github.io/maps/at)
(~200 breweries n brewpubs) live or
[check the source](https://github.com/openbeer/maps) using the mapbox.js mapping library.

...

(Source: staystatic/jekyll/_posts/2014-11-11-new-repo-maps.md)

Middleman or Jekyll? - Datafiles

Middleman - YAML

#############################
#  Links 'n' Bookmarks

- title: football.db - Open Football Data
  url:   https://github.com/openfootball

- title: beer.db - Open Beer, Brewery 'n' Brewpub Data
  url:   https://github.com/openbeer

- title: world.db - Open World Data
  url:   https://github.com/openmundi

(Source: staystatic/middleman/data/links.yml)

Middleman or Jekyll? - Datafiles

Jekyll - YAML

#############################
#  Links 'n' Bookmarks

- title: football.db - Open Football Data
  url:   https://github.com/openfootball

- title: beer.db - Open Beer, Brewery 'n' Brewpub Data
  url:   https://github.com/openbeer

- title: world.db - Open World Data
  url:   https://github.com/openmundi

(Source: staystatic/jekyll/_data/links.yml)

Middleman or Jekyll? - HTML Templates - Loops

Middleman - Embedded Ruby (ERB) Template Language

<div>
  <b>Links 'n' Bookmarks</b>
  <ul>
    <%% data.links.each do |link| %>
      <li><%%= link_to link.title, link.url %></li>
    <%% end %>           
  </ul> 
</div>

<div>
  <b>News 'n' Updates</b>
  <ul>
    <%% blog.articles.each do |article| %>
      <li><%%= link_to article.title, article.url %></li>
    <%% end %>
  </ul>
</div>

(Source: staystatic/middleman/source/index.html.erb)

Middleman or Jekyll? - HTML Templates - Loops (Cont.)

Jekyll - Liquid Template Language

<div>
  <b>Links 'n' Bookmarks</b>
  <ul class="links">
    {%% for link in site.data.links %}
      <li><a href="{{{link.url}}">{{{ link.title }}</a></li>
    {%% endfor %}
  </ul>
</div>

<div>
  <b>News 'n' Updates</b>
  <ul class="news">
   {%% for post in site.posts %}
    <li><a href="{{{site.path}}{{{post.url}}">{{{ post.title }}</a></li>
   {%% endfor %}
  </ul>
</div>

(Source: staystatic/jekyll/index.html)

Middleman or Jekyll? - Configuration / Settings

Middleman - Ruby

source 'https://rubygems.org'

# Middleman Gems
gem 'middleman',      '>= 4.0.0'
gem 'middleman-blog'

(Source: staystatic/middleman/Gemfile)

activate :blog do |blog|
  blog.permalink = '/news/{title}.html'
  blog.sources = 'posts/{year}-{month}-{day}-{title}.html'
end

helpers do
  def site_title
    'Middleman Stay Static Sample Site'
  end

  def page_title
    current_page.data.title ? current_page.data.title : nil
  end
end

configure :build do
  set :http_prefix, '/sites/middleman'
end

(Source: staystatic/middleman/config.rb)

Middleman or Jekyll? - Configuration / Settings (Cont.)

Jekyll - YAML

title: 'Jekyll Stay Static Sample Site'

path:  '/sites/jekyll'
url:   'http://staystatic.github.io/sites/jekyll'

markdown: kramdown

exclude:
- README.md

(Source: staystatic/jekyll/_config.yml)

Middleman or Jekyll? - Summary

- Middleman Jekyll
GitHub Stars (+1s) ★5 026 ★24 142
Gem Downloads 974 690 2 044 522
- - -
Settings / Configuration Ruby YAML
HTML Templates Ruby (ERB) Liquid
. Layouts Yes Yes
. Includes Yes Yes
Front Matter / Meta Data YAML YAML
Datafiles YAML YAML
CSS Preprocessing Sass Sass
HTML "Shortcodes" Markdown Markdown

More Static Site Builders (in Ruby)

  • Nanoc by Denis Defreyne et al (★1 283 / 223 529 Downloads)
  • Awestruct by Bob McWhirter et al (★221 / 132 949 Downloads)
  • webgen by Thomas Leitner et al (★90 / 88 059 Downloads)
  • Bonsai by Ben Schwarz et al (★275 / 54 502 Downloads)
  • Ruhoh by Jade Dominguez et al (★623 / 24 891 Downloads) - uses Mustache templates
  • ZenWeb by Ryan Davis et al (★52 / 18 083 Downloads)
  • and many more

Note: Sorted by Downloads

And the Winner is...

Use what works for you.

Links, Links, Links - Static Site News, Events 'n' More

Stay Static Sample Sites (Showcase)

Articles

News

Events

Bonus: Many More Static Site Builder / Generators

Q: What about JavaScript, Python, PHP, Hugo, Haskell, Rust, C, Swift, Lisp, Bash, [Your Language Here], etc.?

A: See the Static Site Builder / Generator Directories: