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.

Transcript

1. Dynamic to Static
   Onboarding to static site generation from a dynamic workflow
   @biilmann
   www.netlify.com
   

   View Slide

2. View Slide

3. From Wordpress

   to Static
   

   View Slide

4. What does Wordpress
   Do?
   

   View Slide

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

   View Slide

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

   View Slide

7. When you upgrade a plugin
   

   View Slide

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

   View Slide

9. WP-admin
   

   View Slide

10. WP-Includes
    

    View Slide

11. PHP Crap
    

    View Slide

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

    View Slide

13. What is Static?
    It’s not about:
    Dynamic content vs static brochure
    Database vs Flat Files
    Writing HTML by hand
    

    View Slide

14. What is Static?
    No dynamic programming on the server
    A Caching Contract
    

    View Slide

15. Static Wordpress: WP-admin
    

    View Slide

16. Static Wordpress: WP-Includes
    

    View Slide

17. Static Wordpress: PHP Crap
    

    View Slide

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

    View Slide

19. Typical Static Site
    Generator Flow
    Lets look at netlify.com - currently a Jekyll based site
    

    View Slide

20. netlify.com admin
    

    View Slide

21. netlify.com “includes”
    

    View Slide

22. netlify.com the whole flow
    netlify CDN
    

    View Slide

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

    View Slide

24. View Slide

25. The Modern Static Site Generator
    Templating
    Asset Pipeline
    Content
    Metadata
    Filtering & Sorting
    Plugins
    

    View Slide

26. Mapping out the STG
    landscape
    Build Tools Build Tools/STG Full Fledged STG Specialized STG
    

    View Slide

27. What to look for: Asset Pipeline
    Sass/CoffeeScript/Babel.js/Less/Stylus/etc,etc,etc
    Composable? Extensible? vs Simple? No configuration?
    Bower? NPM?
    

    View Slide

28. What to look for: Content
    Typically Markdown
    ReStructuredText
    External APIs? Contentful, Prismic, Google Docs
    

    View Slide

29. What to look for: Metadata
    Frontmatter?
    YAML? JSON? TOML?
    Separate Data Document
    

    View Slide

30. What to look for: Filter & Sort
    Code in templates?
    Built-in Sort and Filter features?
    Easy helper methods?
    

    View Slide

31. What to look for: Plugins
    Can you write plugins?
    Plugin ecosystem?
    What’s possible with a plugin?
    Plugin Hooks?
    

    View Slide

32. Q/A
    What else do you want from a static site generator?
    

    View Slide

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

    View Slide