Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
They’re Back! Modern Tools for Static Site Development
with Brian Rinaldi
OVERVIEW
Once upon a time, static sites were new and cool, even if very limiting. Changing them was tedious and required a lot of hand-coding or [cough] Dreamweaver design view. Eventually we gave up on static sites and went fully dynamic. Static sites were old and uncool.
Today, however, static sites are cool again and don’t have all the limitations of the static sites of old. There are hundreds of tools available for generating static sites, the most well-known being Jekyll. In this session, we’ll look at how to use and compare Jekyll with several alternative generators built on Ruby (like Jekyll) and Node.js. We’ll examine what types of sites static site generators are useful for and see how each handles things like templating, custom metadata, custom data and more.
OBJECTIVE
Compare several popular static site engine options to understand what types of sites they are useful for and which solution may best fit your needs.
TARGET AUDIENCE
Any web developer or designer.
ASSUMED AUDIENCE KNOWLEDGE
HTML, CSS, JavaScript. Must be comfortable on the command line.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What problems static site engines solve
What types of sites can benefit from a static site engine
The pros/cons of the Jekyll engine
The pros/cons of Middleman engine
The pros/cons of Wintersmith engine
8. How are Static Site Engines Different?
• No server-side language
• No database (file-based content)
• Customizable via templating
• Extensible via plugins
• Authoring via Markdown or HTML
• Build and deployment processes
19. The Good News
• A good amount of plugins exist
• A lot of open-source, “real-world” site
examples exist
• Easy integration with npm modules (ex.
Moment.js for dates)
• Easy to install/cross platform via npm
20. The Bad News
• Documentation is just a quick start guide
(you’ll have to rely on reading the source)
• Jade
• Data had to be separated into individual JSON
files
26. The Good News
• So fast I thought it failed
• Command-line generate new pages/post
• Respects your content organization (place
posts/pages where you’d like them to appear
on the generated site)
27. The Bad News
• Go can be very different…and you’ll need to
understand Go to some degree
– You’ll likely need to check the Go language
reference to build your template
• Docs are missing really important details
• Hard to find help if you get stuck
32. The Good News
• Asset folders are a simple place to store post
assets
• Decent number of plugins available (and most
Octopress plugins work)
• Built-in, one-command deployment to a good
number of options
• Easy install/cross platform via npm
33. The Bad News
• Documentation looks good but is lacking in
important details (ex. data files)
• Limited pre-built themes available
• Kept trying to render my JS files
38. The Good News
• Supports Jade, Markdown, EJS, CoffeeScript,
Sass, LESS and Stylus out-of-the-box
• Functions as a static server with built-in
preprocessing
• Easy deployment option in Harp Platform
(commercial)
• Easy install/cross platform via npm
39. The Bad News
• Documentation is very limited
• No plugins or extensions beyond themes
• Post metadata is separate from post
• Posts are returned in the order they are in the
JSON metadata
45. The Good News
• Good documentation
• Highly configurable and customizable
• Large community and a lot of
extensions/templates
46. The Bad News
• Setup and configuration is complex
• Requires some Ruby knowledge (if you aren’t
a Ruby developer)
• V4 (coming soon) has major, potentially
breaking changes
55. Deployment
• As static pages to any web server
• GitHub pages, Surge
• Google Cloud Storage, Azure, Heroku, Amazon
S3
• CloudCannon, Netlify, Harp Platform
Before we look at what static site generators are, it’s good to understand where they came from and what problems they solve
Maintaining large sites with static pages was time consuming and tedious. Templates were difficult to create and use.
To solve these problems we hooked everything up to enterprise CMS systems
Which in many cases led to overly complex, one size fits all solutions for a simple problem.
Jade templates, YAML front matter, JSON data
Also has an API if you want to build tools around it
Support for a number of other template formats exist as plugins
Go templates and data in TOML (though YAML is available if specified)
Getting started is knocked down for more complicated install and the lack of any default theme. Templates are powerful but can be difficult to build unless you.
EJS and Swig templates out of the box (though generated starter uses EJS). Data in YAML.
Jade and EJS templating out of the box (though default generated files use Jade)
Erb templating.
Basic things like livereload are missing from the base setup and require install and setup.