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

Back to the future with static site generators

Feb 11, 2017

Download

Technology

Chris Ward
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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