54
Dev Week 2016, London With Static Site Generators @chrischinch

Back to the future with static site generators

Embed Size (px)

Citation preview

Page 1: Back to the future with static site generators

Dev Week 2016, London

With Static Site Generators

@chrischinch

Page 2: Back to the future with static site generators

[{

Page 3: Back to the future with static site generators
Page 4: Back to the future with static site generators
Page 5: Back to the future with static site generators
Page 6: Back to the future with static site generators

1998

Page 7: Back to the future with static site generators
Page 8: Back to the future with static site generators
Page 9: Back to the future with static site generators
Page 10: Back to the future with static site generators
Page 11: Back to the future with static site generators

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
Page 13: Back to the future with static site generators
Page 14: Back to the future with static site generators
Page 15: Back to the future with static site generators
Page 16: Back to the future with static site generators

[}

Page 17: Back to the future with static site generators
Page 18: Back to the future with static site generators
Page 19: Back to the future with static site generators
Page 20: Back to the future with static site generators
Page 21: Back to the future with static site generators
Page 22: Back to the future with static site generators
Page 23: Back to the future with static site generators
Page 24: Back to the future with static site generators

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
Page 26: Back to the future with static site generators

[|

Page 27: Back to the future with static site generators
Page 28: Back to the future with static site generators
Page 29: Back to the future with static site generators
Page 30: Back to the future with static site generators
Page 31: Back to the future with static site generators
Page 32: Back to the future with static site generators
Page 33: Back to the future with static site generators

But… What is a Static Site Generator?

Content + Repeatable Elements → Static Website

Page 34: Back to the future with static site generators

Positives

❖ Collaboration & Workflow

❖ Super Fast

❖ Pre-build Irrelevant

❖ Flexible

❖ Minimal Infrastructure

Page 35: Back to the future with static site generators

Negatives

❖ Not Dynamic

❖ New

❖ Technical Knowledge

Page 36: Back to the future with static site generators
Page 37: Back to the future with static site generators

Why These Options?

❖ Stars / Downloads

❖ Community

❖ Simplicity

❖ Activity

❖ 1 per Language

Page 38: Back to the future with static site generators

Example Site

❖ Installation

❖ Configuration

❖ Creating Blog posts

❖ Creating Custom Event type

❖ Templates

❖ Extending

Page 39: Back to the future with static site generators

Jekyll / Octopress

❖ History❖ Ruby❖ Templates: Liquid❖ jekyllrb.com

gem install jekyll

jekyll new devweekjk

Page 40: Back to the future with static site generators

Middleman

❖ History❖ Ruby❖ Templates: ERB❖ middlemanapp.com

gem install middleman

middleman init devweekmi

Page 41: Back to the future with static site generators

Hugo❖ History❖ Go❖ Templates: Go Templates❖ gohugo.io

Pre-built binarieshugo new site devweekhg

Page 42: Back to the future with static site generators

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

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

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

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

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

Cryogen

❖ History❖ Clojure❖ Templates: Selmer❖ cryogenweb.org

lein new cryogen devweekcr

cd devweekcr

Page 48: Back to the future with static site generators

Luapress

❖ History❖ Lua❖ Templates: Mustache❖ luapress.org

luarocks install luapress

luapress init devweeklp

Page 49: Back to the future with static site generators

JBake❖ History❖ Java❖ Templates: Freemarker❖ jbake.org

brew install jbake

mkdir devweekjb

bake -i

Page 50: Back to the future with static site generators

Deployment

❖ FTP / SCP

❖ Rsync

❖ GitHub Pages / Hooks

❖ Language Build Systems / CIs

❖ Netlify, Surge etc…

Page 51: Back to the future with static site generators

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

Extending

❖ Sculpin: Symfony bundles

❖ Assemble: Plugins, Helpers

❖ Luapress: Basic docs

Page 53: Back to the future with static site generators

What’s Possible?

Page 54: Back to the future with static site generators

Thanks!

Chris Ward (aka Chinchilla)

Technical Writer & Developer Relationsgregariousmammal.com@chrischinch

staticgen.com