They’re fast, they’re easy to use, and they fit on your tool belt.
They’re Back! Modern Tools for Static Site Development
Transcript of They’re Back! Modern Tools for Static Site Development
![Page 1: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/1.jpg)
They’re Back!
Modern tools for developing static sites.Brian Rinaldi - @remotesynth
![Page 2: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/2.jpg)
Who Am I?
I’m a Content & Community Manager at Telerik
![Page 3: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/3.jpg)
Background
![Page 4: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/4.jpg)
The Early Days
![Page 5: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/5.jpg)
The Early Days
![Page 6: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/6.jpg)
Content Manage All the Things!
![Page 7: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/7.jpg)
Content Manage All the Things!
![Page 8: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/8.jpg)
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
![Page 9: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/9.jpg)
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/
![Page 10: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/10.jpg)
Benefits of Static Sites
• Performance• Ease of Hosting• Security• Content Versioning
![Page 11: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/11.jpg)
These Tools are Built for Developers
![Page 12: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/12.jpg)
399 Existing Static Site Engines*
Source: https://staticsitegenerators.net/
![Page 13: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/13.jpg)
Let’s Get Started
![Page 14: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/14.jpg)
How I’m Evaluating
• Documentation• Getting Started/Setup• Language Support• Templating (using defaults)• Creating Content• Dynamic/custom data• Extensibility• Project Health
![Page 15: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/15.jpg)
Our Sample Project
Available on GitHub at:https://github.com/remotesynth/Static-Site-Samples
![Page 16: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/16.jpg)
Which Engines We’ll Review
![Page 17: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/17.jpg)
Getting Started
![Page 18: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/18.jpg)
Getting Started
• CoffeeScript-based> sudo npm install -g wintersmith
![Page 19: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/19.jpg)
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
![Page 20: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/20.jpg)
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
![Page 21: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/21.jpg)
My Feelings About Jade
![Page 22: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/22.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 23: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/23.jpg)
Which Engines We’ll Review
![Page 24: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/24.jpg)
Getting Started
![Page 25: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/25.jpg)
Getting Started
• Go-based• Download executable (and update $PATH)• On OSX use Homebrew
> brew install hugo
![Page 26: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/26.jpg)
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)
![Page 27: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/27.jpg)
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
![Page 28: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/28.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 29: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/29.jpg)
Which Engines We’ll Review
![Page 30: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/30.jpg)
Getting Started
![Page 31: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/31.jpg)
Getting Started
• JavaScript-based> sudo npm install hexo-cli -g
![Page 32: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/32.jpg)
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
![Page 33: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/33.jpg)
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
![Page 34: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/34.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 35: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/35.jpg)
Which Engines We’ll Review
![Page 36: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/36.jpg)
Getting Started
![Page 37: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/37.jpg)
Getting Started
• JavaScript-based> sudo npm install -g harp
![Page 38: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/38.jpg)
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
![Page 39: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/39.jpg)
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
![Page 40: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/40.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 41: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/41.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
(with EJS)
![Page 42: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/42.jpg)
Which Engines We’ll Review
![Page 43: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/43.jpg)
Getting Started
![Page 44: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/44.jpg)
Getting Started
• Ruby-based
• Works on Windows with RubyInstaller> sudo gem install middleman
![Page 45: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/45.jpg)
The Good News
• Good documentation• Highly configurable and customizable• Large community and a lot of
extensions/templates
![Page 46: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/46.jpg)
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
![Page 47: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/47.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 48: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/48.jpg)
Which Engines We’ll Review
![Page 49: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/49.jpg)
Getting Started
![Page 50: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/50.jpg)
Getting Started
• Ruby-based
• No official Windows support(but a workaround is available)
> sudo gem install jekyll
![Page 51: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/51.jpg)
The Good News
• A large and growing community• A very strong ecosystem of plugins and tools• Good documentation
![Page 52: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/52.jpg)
The Bad News
• Windows install is “unofficial”• Does not reached beyond the hardcore
developers!• Tooling stinks for writers.
![Page 53: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/53.jpg)
Overview
Overall:
Getting Started
Templating & Content
Custom Data
Documentation
Extensibility
Language Support
![Page 54: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/54.jpg)
Which Engine Should I Choose?
CHOOSE THE FORM OF YOUR DESCTRUCTOR!
![Page 55: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/55.jpg)
Deployment
• As static pages to any web server• GitHub pages, Surge• Google Cloud Storage, Azure, Heroku, Amazon
S3• CloudCannon, Netlify, Harp Platform
![Page 56: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/56.jpg)
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/
![Page 57: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/57.jpg)
Repo, Article & Resources
• Samples– https://github.com/remotesynth/Static-Site-
Samples• Useful Lists– https://staticsitegenerators.net/– http://www.staticgen.com/
![Page 58: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/58.jpg)
Contact Info
Look for a free report on static sites from
Expected release August 17
![Page 59: They’re Back! Modern Tools for Static Site Development](https://reader036.fdocuments.us/reader036/viewer/2022070509/58a7037d1a28ab4c438b5257/html5/thumbnails/59.jpg)
Questions?