Agenda

The World’s Greatest (Free) Static Site Builders / Generators

And the Winner is…

Part I. - Ruby, Ruby, Ruby

Hello, Middleman

by Thomas Reynolds et al (★4 756 / 870 043 Downloads) - web: middlemanapp.com, github: middleman/middleman, gem: middleman

Static Site Spotlight:

ROSSConf • Sass Language • Adventure Time! Middleman Sample • Many More

Hello, Jekyll

by Tom Preston-Werner, Nick Quaranto, Parker Moore, Jordon Bedwell, Matt Rogers et al (★22 380 / 1 756 295 Downloads) - web: jekyllrb.com, github: jekyll/jekyll, gem: jekyll

Static Site Spotlight:

Vienna.rb • Vienna.html • Facebook React • Bootstrap • Stack Overflow Blog • PHP: The Right Way • Open Data Handbook v2 • Adventure Time! Jekyll Sample • 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 id="main-wrapper">
      <div class="container">
      <%= yield %>
      </div>
    </div>
    <%= partial "partials/footer" %>
  </body>
</html>

(Source: layouts/layout.erb)

Middleman or Jekyll? - HTML Templates (Cont.)

Jekyll - Liquid Template Language

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

(Source: _layouts/default.html)

Middleman or Jekyll? - Post with Front Matter (Categories, etc.)

Middleman - YAML + Markdown

---
layout: post
title:  "Food Chain (Season 6)"
date:   2014-06-12 10:33:56
categories: season6 episodes
shortdesc: Finn and Jake learn about the food chain by becoming the food chain.
banner: /images/foodchain.jpg
---

The episode begins with candy children that have bodies resembling different
shapes sliding down a slide, shouting with excitement. The kids are viewed
from an horizontal angle in the next scene as they go through a playground-like structure.

<!--more-->

Finn and Jake are examining the 'Catapilla Family'.
After watching Princess Bubblegum teach the children about the Food Chain
...

(Source: posts/2014-06-12-season-6-food-chain.md)

Middleman or Jekyll? - Post with Front Matter (Categories, etc.)

Jekyll - YAML + Markdown

---
layout: post
title:  "Food Chain (Season 6)"
date:   2014-06-12 10:33:56
categories: season6 episodes
shortdesc: Finn and Jake learn about the food chain by becoming the food chain.
banner: /images/foodchain.jpg
---

The episode begins with candy children that have bodies resembling different
shapes sliding down a slide, shouting with excitement. The kids are viewed
from an horizontal angle in the next scene as they go through a playground-like structure.

<!--more-->

Finn and Jake are examining the 'Catapilla Family'.
After watching Princess Bubblegum teach the children about the Food Chain
...

(Source: _posts/2014-06-12-season-6-food-chain.md)

Middleman or Jekyll? - Configuration / Settings

Middleman - Ruby

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

set :site_title, 'Adventure Time!'
set :banner, '/images/about.jpg'
set :description, 'Adventure Time is an American animated television series...'

activate :blog do |blog|
  blog.sources           = "posts/{year}-{month}-{day}-{title}.html"
  blog.summary_separator = "<!--more-->"
  blog.tag_template      = "tag.html"
  blog.calendar_template = "calendar.html"
end

page "/feed.xml", layout: false

(Source: config.rb)

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

Jekyll - YAML

title: Adventure Time!
email: brian.rinaldi@example.com
banner: "/images/about.jpg"
description: > Adventure Time is an American animated television series...
  The series follows the adventures of Finn, a human boy, and his best friend...
  a dog with magical powers to change shape and grow and shrink at will...

baseurl: "" 
url:     "http://yourdomain.com" 

excerpt_separator: "<!--more-->"

(Source: _config.yml)

Middleman or Jekyll? - Summary

- Middleman Jekyll
GitHub Stars (+1s) ★4 756 ★22 380
Gem Downloads 870 043 1 756 295
Settings / Configuration Ruby YAML
HTML Templates Ruby (ERB) Liquid
. Layouts Yes Yes
. Includes Yes Yes
Front Matter / Meta Data YAML YAML
CSS Preprocessing Sass Sass
HTML “Shortcodes” Markdown Markdown

Middleman or Jekyll? More Static Site Builders (in Ruby)

Note: Sorted by GitHub Stars (+1s)

Part II. - Python, Python, Python

Hello, Pelican

by Alexis Metaireau et al (★5 231 / 14 749 Downloads Last Month) - web: getpelican.com, github: getpelican/pelican, pypi: pelican

Static Site Spotlight:

Pelican Blog • Linux Kernel Archives • Many More

Hello, Nikola

by Roberto Alsina et al (★874 / 6 038 Downloads Last Month) - web: getnikola.com, github: getnikola/nikola, pypi: Nikola

Static Site Spotlight:

Nikola

Pelican or Nikola? - Summary

- Pelican Nikola
GitHub Stars (+1s) ★5 231 ★874
Downloads Last Month 14 749 6 038
Settings / Configuration Python Python
HTML Templates Jinja2 Jinja2
. Layouts Yes Yes
. Includes Yes Yes
Front Matter / Meta Data reStructuredText reStructuredText
CSS Preprocessing - -
HTML “Shortcodes” reStructuredText reStructuredText

Note: CSS Preprocessing - LESS or Sass supported with plugins

Pelican or Nikola? - More Static Site Builders (in Python)

Note: Sorted by GitHub Stars (+1s)

Part III. - JavaScript, JavaScript, JavaScript

Hello, Wintersmith

by Johan Nordberg et al (★2 578 / 3 113 Downloads Last Month) - web: wintersmith.io, github: jnordberg/wintersmith, npm: wintersmith

Static Site Spotlight:

Wintersmith Examples • Adventure Time! Wintersmith Sample • Many More

Hello, Metalsmith

by Ian Storm Taylor et al (★4 070 / 40 213 Downloads Last Month) - web: metalsmith.io, github: segmentio/metalsmith, npm: metalsmith

Static Site Spotlight:

Metalsmith • Metalsmith Examples

Wintersmith or Metalsmith? - HTML Templates

Wintersmith - Jade Template Language

doctype html
html(lang="en")
    include ./partials/head
  body
    include ./partials/header

    div(id="main-wrapper")
        div(class="container")
            include ./partials/homepagemiddle

    include ./partials/footer

(Source: templates/index.jade)

Wintersmith or Metalsmith? - Summary

- Wintersmith Metalsmith
GitHub Stars (+1s) ★2 578 ★4 070
Downloads Last Month 3 113 40 213
Settings / Configuration JSON JavaScript
HTML Templates Jade Handlebars (HBS)
. Layouts Yes Yes
. Includes Yes Yes
Front Matter / Meta Data YAML YAML
CSS Preprocessing - Plugins
HTML “Shortcodes” Markdown Markdown

Wintersmith or Metalsmith? - More Static Site Builders (in JavaScript)

Note: Sorted by GitHub Stars (+1s)

Part IV. - Go, Go, Go

by Steve Francia et al (★6 701) - web: gohugo.io, github: spf13/hugo

Static Site Spotlight:

Balsamiq Documentation • Adventure Time! Hugo Sample • Many More

Hugo - HTML Templates

Hugo - Go Temmplate Language

<!DOCTYPE html>
<html>
  {{ partial "head.html" . }}
  <body>
    {{ partial "header.html" . }}
    <div id="main-wrapper">
        <div class="container">
            <article class="box post">
                <div class="image featured" style="background-image: url('{{ .Site.BaseUrl }}{{ .Params.banner }}');"></div>
                <header>
                  <h2>{{ .Title }}</h2>
                  <p>{{ .Params.shortdesc }}</p>
                </header>
                {{ .Content }}
            </article>
        </div>
    </div>
    {{ partial "footer.html" . }}
  </body>
</html>

(Source: layouts/_default/single.html)

Hugo - Summary

- Hugo
GitHub Stars (+1s) ★6 701
Settings / Configuration TOML
HTML Templates Go Templates
. Layouts Yes
. Includes Yes
Front Matter / Meta Data TOML
CSS Preprocessing -
HTML “Shortcodes” Markdown

Part V. - Conclusions

GitHub Stars

Site Builder GitHub Stars
Jekyll ★22 380
Hugo ★6 701
Pelican ★5 231
Middleman ★4 756
Metallsmith ★4 070
Wintersmith ★2 578
Nicola ★874

Building Blocks

Configuration / Settings

HTML Templates

CSS Preprocessing

HTML “Shortcodes”

And the Winner is…

WordPress (Static Site) Exporter Plugin

by Ben Balter et al (★561), wordpress: plugins/jekyll-exporter, github: benbalter/wordpress-to-jekyll-exporter

Links, Links, Links

Articles / Booklets

News

Events

Bonus: Many More Static Site Builder / Generators

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

A: See the Static Site Builder / Generator Directories: