Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Comparing static site generators and how to onboard from a dynamic workflow

Comparing static site generators and how to onboard from a dynamic workflow

Mathias gave this talk at the first editing of the Static Web-Tech Meetup in San Francisco, at the Netlify office.

It cover how to move from a dynamic approach to building websites, to a modern approach based on static site generation, and maps out the landscape of static site generators.

A731bc19c3b04919610fcee6d0589914?s=128

Mathias Biilmann

May 27, 2015
Tweet

Transcript

  1. Dynamic to Static Onboarding to static site generation from a

    dynamic workflow @biilmann www.netlify.com
  2. None
  3. From Wordpress
 to Static

  4. What does Wordpress Do?

  5. Powers 24% of the Internet Not Wordpress 76% Wordpress 24%

  6. Blows up all the time! Vulnerable Installs 79% Secure Installs

    21%
  7. When you upgrade a plugin

  8. wp-admin wp-content PHP crap… Wordpress

  9. WP-admin

  10. WP-Includes

  11. PHP Crap

  12. A Static Approach What if we reengineered Wordpress as a

    Static Site Generator?
  13. What is Static? It’s not about: Dynamic content vs static

    brochure Database vs Flat Files Writing HTML by hand
  14. What is Static? No dynamic programming on the server A

    Caching Contract
  15. Static Wordpress: WP-admin

  16. Static Wordpress: WP-Includes

  17. Static Wordpress: PHP Crap

  18. Replacing The PHP Crap :) Picking a static site generator

  19. Typical Static Site Generator Flow Lets look at netlify.com -

    currently a Jekyll based site
  20. netlify.com admin

  21. netlify.com “includes”

  22. netlify.com the whole flow netlify CDN

  23. Picking Your Static Site Generator What you should look for…

  24. None
  25. The Modern Static Site Generator Templating Asset Pipeline Content Metadata

    Filtering & Sorting Plugins
  26. Mapping out the STG landscape Build Tools Build Tools/STG Full

    Fledged STG Specialized STG
  27. What to look for: Asset Pipeline Sass/CoffeeScript/Babel.js/Less/Stylus/etc,etc,etc Composable? Extensible? vs

    Simple? No configuration? Bower? NPM?
  28. What to look for: Content Typically Markdown ReStructuredText External APIs?

    Contentful, Prismic, Google Docs
  29. What to look for: Metadata Frontmatter? YAML? JSON? TOML? Separate

    Data Document
  30. What to look for: Filter & Sort Code in templates?

    Built-in Sort and Filter features? Easy helper methods?
  31. What to look for: Plugins Can you write plugins? Plugin

    ecosystem? What’s possible with a plugin? Plugin Hooks?
  32. Q/A What else do you want from a static site

    generator?
  33. Thank You! mathias@netlify.com @biilmann www.netlify.com