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

Gerald Bauer

Thursday, March 03, 2016

Usage:
Use space to browse slides.
Use the key t (for toggle) to toggle between presentation and overview mode.

Agenda

Hello, Middleman

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

Static Site Spotlight:

ROSSConfEuRuKo 2016Sass LanguageStay StaticMany 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.rbVienna.htmlTravis FoundationHyde PressFacebook ReactBootstrapStack Overflow BlogPHP: The Right WayOpen Data Handbook v2Stay StaticMany 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)

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: