Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Back to the future with static site generators

178 views

Published on

If you remember when web sites were all created with plain HTML pages, then you'll know that CMSs and dynamic web frameworks saved us and solved all our problems. Or did they? In fact, we instead spend a lot of time customising existing code to meet our requirements, grappling with deployments and then whacking caching on top of over-powered servers to get an ounce of speed.

Static Site Generators aim to sit somewhere in the middle and are perfect for semi-dynamic sites and with a little learning, better for content creators.

In this session, Chris will look at an overview of the principles and options for static site generators and deep dive into one or two to explain further how the work and can fit into your projects.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Back to the future with static site generators

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

×