back to the future with static site generators
TRANSCRIPT
![Page 1: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/1.jpg)
Dev Week 2016, London
With Static Site Generators
@chrischinch
![Page 2: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/2.jpg)
[{
![Page 3: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/3.jpg)
![Page 4: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/4.jpg)
![Page 5: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/5.jpg)
![Page 6: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/6.jpg)
1998
![Page 7: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/7.jpg)
![Page 8: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/8.jpg)
![Page 9: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/9.jpg)
![Page 10: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/10.jpg)
![Page 11: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/11.jpg)
Anyone Remember?
<frameset cols="50%,50%">
<frame src=“page.html" />
<frame src=“page2.html" />
</frameset>
![Page 12: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/12.jpg)
![Page 13: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/13.jpg)
![Page 14: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/14.jpg)
![Page 15: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/15.jpg)
![Page 16: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/16.jpg)
[}
![Page 17: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/17.jpg)
![Page 18: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/18.jpg)
![Page 19: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/19.jpg)
![Page 20: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/20.jpg)
![Page 21: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/21.jpg)
![Page 22: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/22.jpg)
![Page 23: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/23.jpg)
![Page 24: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/24.jpg)
Not Alone (Or Just PHP)
❖ Wordpress: 647,518
❖ Joomla: 536,085
❖ Ruby on Rails: 330,059
![Page 25: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/25.jpg)
![Page 26: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/26.jpg)
[|
![Page 27: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/27.jpg)
![Page 28: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/28.jpg)
![Page 29: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/29.jpg)
![Page 30: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/30.jpg)
![Page 31: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/31.jpg)
![Page 32: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/32.jpg)
![Page 33: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/33.jpg)
But… What is a Static Site Generator?
Content + Repeatable Elements → Static Website
![Page 34: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/34.jpg)
Positives
❖ Collaboration & Workflow
❖ Super Fast
❖ Pre-build Irrelevant
❖ Flexible
❖ Minimal Infrastructure
![Page 35: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/35.jpg)
Negatives
❖ Not Dynamic
❖ New
❖ Technical Knowledge
![Page 36: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/36.jpg)
![Page 37: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/37.jpg)
Why These Options?
❖ Stars / Downloads
❖ Community
❖ Simplicity
❖ Activity
❖ 1 per Language
![Page 38: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/38.jpg)
Example Site
❖ Installation
❖ Configuration
❖ Creating Blog posts
❖ Creating Custom Event type
❖ Templates
❖ Extending
![Page 39: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/39.jpg)
Jekyll / Octopress
❖ History❖ Ruby❖ Templates: Liquid❖ jekyllrb.com
gem install jekyll
jekyll new devweekjk
![Page 40: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/40.jpg)
Middleman
❖ History❖ Ruby❖ Templates: ERB❖ middlemanapp.com
gem install middleman
middleman init devweekmi
![Page 41: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/41.jpg)
Hugo❖ History❖ Go❖ Templates: Go Templates❖ gohugo.io
Pre-built binarieshugo new site devweekhg
![Page 42: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/42.jpg)
Hexo❖ History❖ JavaScript❖ Templates: EJS / Swig❖ hexo.io
npm install hexo-cli -g
hexo init <folder>
npm install
![Page 43: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/43.jpg)
Pelican❖ History❖ Python❖ Templates: Jinja2❖ getpelican.com
pip install pelican markdown
mkdir -p devweekpe
pelican-quickstart
![Page 44: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/44.jpg)
Sculpin❖ History❖ PHP❖ Templates: Twig❖ sculpin.io
curl -O https://download.sculpin.io/sculpin.phar
chmod +x sculpin.phar
??
sculpin install
![Page 45: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/45.jpg)
Assemble❖ History❖ node.js❖ Templates: Jade❖ assemble.io
mkdir devweekas
grunt-init assemble
npm install && bower install
![Page 46: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/46.jpg)
Hakyll❖ History❖ Haskell❖ Templates: Pandoc❖ jaspervdj.be/hakyll
cabal install hakyll
wait………
hakyll-init devweekhk
![Page 47: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/47.jpg)
Cryogen
❖ History❖ Clojure❖ Templates: Selmer❖ cryogenweb.org
lein new cryogen devweekcr
cd devweekcr
![Page 48: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/48.jpg)
Luapress
❖ History❖ Lua❖ Templates: Mustache❖ luapress.org
luarocks install luapress
luapress init devweeklp
![Page 49: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/49.jpg)
JBake❖ History❖ Java❖ Templates: Freemarker❖ jbake.org
brew install jbake
mkdir devweekjb
bake -i
![Page 50: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/50.jpg)
Deployment
❖ FTP / SCP
❖ Rsync
❖ GitHub Pages / Hooks
❖ Language Build Systems / CIs
❖ Netlify, Surge etc…
![Page 51: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/51.jpg)
Extending
❖ Jekyll: Generators, Converters, Commands, Tags, Hooks
❖ Middleman: New Features, Helpers, Manipulate Content, Hooks
❖ Hexo: Utilities available
❖ Pelican: Signals (Hooks)
![Page 52: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/52.jpg)
Extending
❖ Sculpin: Symfony bundles
❖ Assemble: Plugins, Helpers
❖ Luapress: Basic docs
![Page 53: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/53.jpg)
What’s Possible?
![Page 54: Back to the future with static site generators](https://reader034.vdocuments.mx/reader034/viewer/2022042618/589f19641a28ab7b208b4e8b/html5/thumbnails/54.jpg)
Thanks!
Chris Ward (aka Chinchilla)
Technical Writer & Developer Relationsgregariousmammal.com@chrischinch
staticgen.com