They’re Back!

Modern tools for developing static sites.Brian Rinaldi - @remotesynth

Who Am I?

I’m a Content & Community Manager at Telerik

Background

The Early Days

The Early Days

Content Manage All the Things!

Content Manage All the Things!

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

Dynamic Content

• Comments (Disqus, LiveFyre, Facebook)• Forms/Feedback (Wufoo, Google)• Search (Google, Swiftype, or AddSearch)• Calendars (Google)• Data (Parse, Kinvey, Telerik Backend Services)

http://modernweb.com/2013/12/16/moving-to-static-and-keeping-your-toys/

Benefits of Static Sites

• Performance• Ease of Hosting• Security• Content Versioning

These Tools are Built for Developers

399 Existing Static Site Engines*

Source: https://staticsitegenerators.net/

Let’s Get Started

How I’m Evaluating

• Documentation• Getting Started/Setup• Language Support• Templating (using defaults)• Creating Content• Dynamic/custom data• Extensibility• Project Health

Our Sample Project

Available on GitHub at:https://github.com/remotesynth/Static-Site-Samples

Which Engines We’ll Review

Getting Started

Getting Started

• CoffeeScript-based> sudo npm install -g wintersmith

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

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

My Feelings About Jade

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Which Engines We’ll Review

Getting Started

Getting Started

• Go-based• Download executable (and update $PATH)• On OSX use Homebrew

> brew install hugo

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)

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

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Which Engines We’ll Review

Getting Started

Getting Started

• JavaScript-based> sudo npm install hexo-cli -g

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

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

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Which Engines We’ll Review

Getting Started

Getting Started

• JavaScript-based> sudo npm install -g harp

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

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

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

(with EJS)

Which Engines We’ll Review

Getting Started

Getting Started

• Ruby-based

• Works on Windows with RubyInstaller> sudo gem install middleman

The Good News

• Good documentation• Highly configurable and customizable• Large community and a lot of

extensions/templates

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

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Which Engines We’ll Review

Getting Started

Getting Started

• Ruby-based

• No official Windows support(but a workaround is available)

> sudo gem install jekyll

The Good News

• A large and growing community• A very strong ecosystem of plugins and tools• Good documentation

The Bad News

• Windows install is “unofficial”• Does not reached beyond the hardcore

developers!• Tooling stinks for writers.

Overview

Overall:

Getting Started

Templating & Content

Custom Data

Documentation

Extensibility

Language Support

Which Engine Should I Choose?

CHOOSE THE FORM OF YOUR DESCTRUCTOR!

Deployment

• As static pages to any web server• GitHub pages, Surge• Google Cloud Storage, Azure, Heroku, Amazon

S3• CloudCannon, Netlify, Harp Platform

Repo, Article & Resources

• Articles– http://developer.telerik.com/featured/comparing-

static-site-engines/

– http://developer.telerik.com/featured/getting-started-with-jekyll/

– http://www.sitepoint.com/getting-started-wintersmith-nodejs-static-site-generator/

– http://www.sitepoint.com/creating-posts-custom-metadata-data-wintersmith/

Repo, Article & Resources

• Samples– https://github.com/remotesynth/Static-Site-

Samples• Useful Lists– https://staticsitegenerators.net/– http://www.staticgen.com/

Contact Info

@remotesynthbrian.rinaldi@telerik.com

Look for a free report on static sites from

Expected release August 17

Questions?