Skip to content

Latest commit

 

History

History
547 lines (355 loc) · 16.6 KB

staticgen.md

File metadata and controls

547 lines (355 loc) · 16.6 KB

title: The World's Greatest (Free) Static Site Builders / Generators

Agenda

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

  • I. Ruby - Middleman or Jekyll?
  • II. Python - Pelican or Nikola?
  • III. JavaScript - Wintersmith or Metallsmith?
  • IV. Go - Hugo?
  • V. PHP, Haskell, Lisp, Rust, C, etc.

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: [email protected]
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)

  • Nanoc by Denis Defreyne et al (★1 225)
  • Ruhoh by Jade Dominguez et al (★611)
  • Bonsai by Ben Schwarz et al (★269)
  • Awestruct by Bob McWhirter et al (★208)
  • WebGen by Thomas Leitner et al (★77)
  • ZenWeb by Ryan Davis et al (★50)
  • and many more

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)

  • Cactus by Koen Bok et al (★2 450)
  • Hyde by Lakshmi et al (★1 234)
  • Letterpress by Ling Wang et al (★513)
  • and many more

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)

  • Hexo by Tommy Chen et al (★7 346)
  • Harp by Brock Whitten et al (★3 417)
  • Blacksmith by et al (★571)
  • and many more

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

    1. Use a data format: YAML • TOML • JSON
    1. Use a (scripting) language: Ruby • Python • JavaScript

HTML Templates

    1. Use a "classic" template language: Liquid • Jinja • Handlebars (HBS) • Go Templates
    1. Use a (scripting) language: Embedded Ruby (ERB) • Embedded JavaScript (EJS)
    1. Use a "compact" template language: Jade • Haml

CSS Preprocessing

    1. No, thanks
    1. Sass • LESS • Stylus

HTML "Shortcodes"

    1. No, thanks
    1. Markdown • ReStructuredText (ReST)

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: