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

1. They’re Back!
Modern tools for developing static sites.
Brian Rinaldi - @remotesynth

2. Who Am I?
I’m a Content & Community Manager at Telerik

3. Background

4. The Early Days

5. The Early Days

6. Content Manage All the Things!

7. Content Manage All the Things!

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

9. 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/

10. Benefits of Static Sites
• Performance
• Ease of Hosting
• Security
• Content Versioning

11. These Tools are Built for Developers

12. 399 Existing Static Site Engines*
Source: https://staticsitegenerators.net/

13. Let’s Get Started

14. How I’m Evaluating
• Documentation
• Getting Started/Setup
• Language Support
• Templating (using defaults)
• Creating Content
• Dynamic/custom data
• Extensibility
• Project Health

15. Our Sample Project
Available on GitHub at:
https://github.com/remotesynth/Static-Site-Samples

16. Which Engines We’ll Review

17. Getting Started

18. Getting Started
• CoffeeScript-based
> sudo npm install -g wintersmith

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

21. My Feelings About Jade

22. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

23. Which Engines We’ll Review

24. Getting Started

25. Getting Started
• Go-based
• Download executable (and update $PATH)
• On OSX use Homebrew
> brew install hugo

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

28. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

29. Which Engines We’ll Review

30. Getting Started

31. Getting Started
• JavaScript-based
> sudo npm install hexo-cli -g

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

34. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

35. Which Engines We’ll Review

36. Getting Started

37. Getting Started
• JavaScript-based
> sudo npm install -g harp

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

40. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

41. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
(with EJS)

42. Which Engines We’ll Review

43. Getting Started

44. Getting Started
• Ruby-based
• Works on Windows with RubyInstaller
> sudo gem install middleman

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

47. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

48. Which Engines We’ll Review

49. Getting Started

50. Getting Started
• Ruby-based
• No official Windows support
(but a workaround is available)
> sudo gem install jekyll

51. The Good News
• A large and growing community
• A very strong ecosystem of plugins and tools
• Good documentation

52. The Bad News
• Windows install is “unofficial”
• Does not reached beyond the hardcore
developers!
• Tooling stinks for writers.

53. Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support

54. Which Engine Should I Choose?
CHOOSE THE FORM OF YOUR DESCTRUCTOR!

55. Deployment
• As static pages to any web server
• GitHub pages, Surge
• Google Cloud Storage, Azure, Heroku, Amazon
S3
• CloudCannon, Netlify, Harp Platform

56. 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/

57. Repo, Article & Resources
• Samples
– https://github.com/remotesynth/Static-Site-
Samples
• Useful Lists
– https://staticsitegenerators.net/
– http://www.staticgen.com/

58. Contact Info
@remotesynth
brian.rinaldi@telerik.com
Look for a free report on static sites from
Expected release August 17

59. Questions?