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

Static sites go all Hollywood

Static sites go all Hollywood

The popularity of building web sites with static site generators is on the rise. Their reduced complexity, easier compliance, cheaper hosting, and other benefits are getting people’s attention, but they do have limits.

This talk will explore how we can break through some of those limits with the use of a new breed of hosted tools and services. We’ll look at practical examples of how a static site generator can help deliver a modern web development workflow, support a living styleguide, and also pack the kind of dynamic punch that you’d only think possible from bigger application stacks.

Phil Hawksworth

September 22, 2015
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

Transcript

  1. STATIC SITES
    GO ALL HOLLYWOOD
    7
    7
    @PHILHAWKSWORTH
    FRONTEERS, AMSTERDAM, 2015

    View full-size slide

  2. PHILHAWKSWORTH
    @
    QUESTIONS
    SUGGESTIONS
    ARGUMENTS
    COMMENTS

    View full-size slide

  3. @philhawksworth
    PREVIOUS RANTS

    View full-size slide

  4. @philhawksworth
    I LOVE THE WEB

    View full-size slide

  5. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    http://domain.com/path?query=lovely#hash
    @philhawksworth

    View full-size slide

  6. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    @philhawksworth

    View full-size slide

  7. @philhawksworth
    http foobar.com
    http ://

    View full-size slide

  8. @philhawksworth
    http ://

    View full-size slide

  9. @philhawksworth
    KICKING UP A STINK
    CMS
    about
    7
    7

    View full-size slide

  10. @philhawksworth
    ALL FINE NOW

    View full-size slide

  11. @philhawksworth
    BUILDING
    FOR THE WEB
    CAN BE HARD
    7
    7

    View full-size slide

  12. @philhawksworth
    OMFG
    DEVICES

    View full-size slide

  13. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO QUALITY
    7
    7

    View full-size slide

  14. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO LONGEVITY
    7
    7

    View full-size slide

  15. @philhawksworth

    View full-size slide

  16. @philhawksworth
    SIMPLICITY
    7
    7

    View full-size slide

  17. BAKE,
    DON’T FRY
    @philhawksworth

    View full-size slide

  18. @philhawksworth
    BAKE,
    DON’T FRY
    – Aaron Swartz

    View full-size slide

  19. @philhawksworth
    I CARE ABOUT NOT HAVING
    TO MAINTAIN CRANKY
    AOLSERVER, POSTGRES
    AND ORACLE INSTALLS
    AARON SWARTZ, 2002

    View full-size slide

  20. @philhawksworth
    BEST FIT
    7
    7

    View full-size slide

  21. @philhawksworth
    FEW WRITES MANY READS

    View full-size slide

  22. @philhawksworth
    SIMPLICITY
    7
    7

    View full-size slide

  23. @philhawksworth
    HOLLYWOOD
    not very

    View full-size slide

  24. @philhawksworth
    DUMBING DOWN
    SIMPLIFYING
    is not
    7
    7

    View full-size slide

  25. @philhawksworth
    Empire State
    Building

    New York
    Jim Mao
    Building

    Shanghai
    Sears Tower

    Chicago
    Petronas Towers
    Huala Lumpur
    Tapei 101
    Taipei
    The size and lag
    of your
    parallax page

    View full-size slide

  26. @philhawksworth

    View full-size slide

  27. PLEASE DON'T
    TAKE MY FLASH
    AWAY FROM ME!
    – My buddy, Steve

    View full-size slide

  28. @philhawksworth
    DUMBING DOWN.
    SIMPLIFYING
    IT LET’S US FOCUS
    is not
    ON WHAT MATTERS

    View full-size slide

  29. @philhawksworth
    A MOMENT ABOUT
    THE BENEFITS
    7
    7

    View full-size slide

  30. @philhawksworth
    CHEAPER, SIMPLER HOSTING
    FEWER POINTS OF FAILURE
    FEWER VULNERABILITIES
    EASIER COMPLIANCE
    GREATER PORTABILITY
    SANDBOXED ENVIRONMENTS
    ATTRITION AVOIDANCE

    View full-size slide

  31. @philhawksworth
    CREDENCE
    7
    7

    View full-size slide

  32. @philhawksworth

    View full-size slide

  33. @philhawksworth
    BAKED WITH JEKYLL
    LARGE AUDIENCE
    RAPID ITERATIONS
    HOSTED STATICALLY

    View full-size slide

  34. @philhawksworth
    GOOGLE
    WEB FUNDAMENTALS

    View full-size slide

  35. @philhawksworth
    DEVELOPERS.GOOGLE.COM/WEB/FUNDAMENTALS

    View full-size slide

  36. @philhawksworth
    CONTENT ON GITHUB
    BAKED WITH JEKYLL
    SERVED STATIC BY GOOGLE

    View full-size slide

  37. @philhawksworth
    REDUCED RISK
    7
    7

    View full-size slide

  38. @philhawksworth
    GOOGLE
    YEAR IN SEARCH

    View full-size slide

  39. @philhawksworth

    View full-size slide

  40. @philhawksworth
    LARGE AUDIENCE
    INFREQUENTLY UPDATED
    LONG LIFE

    View full-size slide

  41. @philhawksworth
    40 STORIES
    52 LANGUAGES
    2.6B SOCIAL IMPRESSIONS

    View full-size slide

  42. @philhawksworth
    CONTENT ABSTRACTED
    BAKED WITH “GORO”
    SERVED STATIC BY GOOGLE

    View full-size slide

  43. @philhawksworth
    STATIC SITES
    7
    7
    are
    ALREADY MAINSTREAM

    View full-size slide

  44. @philhawksworth
    ENABLERS
    7
    7

    View full-size slide

  45. @philhawksworth
    FRONT END TOOLING
    7
    7

    View full-size slide

  46. @philhawksworth
    I’M A SOFTWARE
    ENGINEER
    WHAT LANGUAGE?
    JAVASCRIPT
    HA HA HA HA...!

    View full-size slide

  47. @philhawksworth
    GENERATORS AND
    TEMPLATING
    7
    7

    View full-size slide

  48. @philhawksworth
    STATICSITEGENERATORS.NET

    View full-size slide

  49. @philhawksworth
    393

    View full-size slide

  50. @philhawksworth
    TAX
    M
    HIPSTER
    the

    View full-size slide

  51. @philhawksworth
    SIDE EFFECT
    as a
    STYLEGUIDE
    7
    7

    View full-size slide

  52. @philhawksworth
    ARTEFACT
    as an
    STYLEGUIDE
    7
    7

    View full-size slide

  53. @philhawksworth
    PROCESS
    as a
    STYLEGUIDE
    7
    7

    View full-size slide

  54. @philhawksworth

    View full-size slide

  55. @philhawksworth
    STYLEGUIDE
    BUILD
    MODULES
    PRODUCTION SITE
    TEMPLATES
    CONTENT
    SSG
    OPTIMISATION
    DEPLOYMENT

    View full-size slide

  56. @philhawksworth
    UNLESS IT’S PART OF YOUR BUILD,
    YOUR STYLEGUIDE IS JUST MORE
    DOCUMENTATION TO MAINTAIN

    View full-size slide

  57. @philhawksworth
    IT’S A SYSTEM.
    A LIVING BREATHING
    LIBRARY OF COMPONENTS
    ANNA DEBENHAM

    View full-size slide

  58. @philhawksworth
    AUTOMATION
    7
    7

    View full-size slide

  59. @philhawksworth
    GRUNT
    GULP
    BRUNCH
    BELCH
    BURP
    COUGH
    SNEEZE
    M
    M
    M

    View full-size slide

  60. @philhawksworth
    DEPLOY FASTER
    DEPLOY SAFER
    7
    7

    View full-size slide

  61. @philhawksworth
    UPDATE FASTER
    7
    7

    View full-size slide

  62. @philhawksworth
    FEEL MORE DYNAMIC
    7
    7

    View full-size slide

  63. @philhawksworth
    SURGE.SH

    View full-size slide

  64. @philhawksworth
    HIT THE CEILING
    7
    7

    View full-size slide

  65. @philhawksworth
    BECAUSE WE NEED A
    DEVELOPER MINDSET

    View full-size slide

  66. @philhawksworth
    A DEVELOPER MINDSET
    IS NOT ALWAYS
    VERY HOLLYWOOD

    View full-size slide

  67. @philhawksworth
    A DEVELOPER MINDSET
    IS NOT ALWAYS
    VERY HOLLYWOOD

    View full-size slide

  68. @philhawksworth
    WE STILL WANT
    THE SHIZZLE

    View full-size slide

  69. @philhawksworth
    AND WE WANT TO
    MANAGE CONTENT
    OURSELVES

    View full-size slide

  70. @philhawksworth
    LET’S LOOK AT
    COMMON COMPLEXITY

    View full-size slide

  71. @philhawksworth
    DEV ENVIRONMENTS
    QA ENVIRONMENT
    STAGING ENVIRONMENT
    VIEWS SERVER
    LOGIC DATA
    CACHE
    VIEWS SERVER
    LOGIC
    USER
    ADMIN
    PRODUCTION ENVIRONMENT

    View full-size slide

  72. @philhawksworth
    REDUCE COMPLEXITY

    View full-size slide

  73. @philhawksworth
    OTHER PEOPLE’S
    PLUMBING

    View full-size slide

  74. @philhawksworth
    OTHER PEOPLE’S
    PLUMBING

    View full-size slide

  75. @philhawksworth
    USER STATIC
    PROD ENV
    ADMIN
    DEPLOY AAS
    SSG
    DEV ENVIRONMENTS
    BUILD
    CONTENT AAS
    REPO

    View full-size slide

  76. @philhawksworth
    BUT THAT’S NOT
    SIMPLIFYING!
    7
    7

    View full-size slide

  77. @philhawksworth
    IT’S ABOUT
    SHIFTING
    COMPLEXITY
    7
    7

    View full-size slide

  78. @philhawksworth
    OUTSOURCE COMPLEXITY
    7
    7

    View full-size slide

  79. @philhawksworth
    DISTANCE THE USER
    FROM THE COMPLEXITY
    7
    7

    View full-size slide

  80. @philhawksworth
    SOURCE CONTENT
    AT BUILD TIME
    (NOT EXECUTION TIME)

    View full-size slide

  81. @philhawksworth
    JEKYLL DATA

    View full-size slide

  82. @philhawksworth
    {{ site.data.FILENAME.object }}

    View full-size slide

  83. @philhawksworth
    CONTENTFUL.COM

    View full-size slide

  84. @philhawksworth
    DECOUPLES THE
    CONTENT ADMINISTRATION
    from
    THE PRODUCTION
    ENVIRONMENT

    View full-size slide

  85. @philhawksworth
    USER STATIC
    PROD ENV
    ADMIN
    DEPLOY AAS
    SSG
    DEV ENVIRONMENTS
    BUILD
    CONTENT AAS
    REPO
    CONTENTFUL

    View full-size slide

  86. @philhawksworth

    View full-size slide

  87. @philhawksworth
    ROOTS
    ROOTS.CX

    View full-size slide

  88. @philhawksworth
    HOSTING

    View full-size slide

  89. @philhawksworth
    “HOSTING PLUS”
    7
    7

    View full-size slide

  90. @philhawksworth
    “HOSTING WITH BENEFITS”
    7
    7

    View full-size slide

  91. @philhawksworth
    NETLIFY.COM

    View full-size slide

  92. @philhawksworth
    USER STATIC
    PROD ENV
    ADMIN
    DEPLOY AAS
    SSG
    DEV ENVIRONMENTS
    BUILD
    CONTENT AAS
    REPO
    CONTENTFUL

    View full-size slide

  93. @philhawksworth
    USER STATIC
    ADMIN
    BUILD AND HOSTING AAS
    SSG
    DEV ENVIRONMENTS
    BUILD
    CONTENT AAS
    REPO
    NETLIFY
    CONTENTFUL

    View full-size slide

  94. FORMERLY BITBALLOON
    7
    7

    View full-size slide

  95. @philhawksworth
    http://www.netlify.com

    View full-size slide

  96. COMMIT HOOKS
    AND BUILDS

    View full-size slide

  97. @philhawksworth
    http://www.netlify.com

    View full-size slide

  98. COMMAND LINE INTERFACE

    View full-size slide

  99. @philhawksworth
    WEB HOOKS
    NOTIFICATIONS
    CONTROL OF HEADERS
    BASIC AUTH

    View full-size slide

  100. @philhawksworth
    USER STATIC
    ADMIN
    BUILD AND HOSTING AAS
    SSG
    DEV ENVIRONMENTS
    BUILD
    CONTENT AAS
    REPO
    NETLIFY
    CONTENTFUL

    View full-size slide

  101. @philhawksworth
    LIMITATIONS
    7
    7

    View full-size slide

  102. @philhawksworth
    PERSONALISATION
    VERY VERY LARGE SITES
    USER GENERATED CONTENT

    View full-size slide

  103. @philhawksworth
    WHY DO WE HAVE A SITE
    AND HOW DO WE USE IT?
    LISA WELCHMAN

    View full-size slide

  104. @philhawksworth
    BEST FIT
    7
    7

    View full-size slide

  105. @philhawksworth

    View full-size slide

  106. @philhawksworth
    IT DEPENDS

    View full-size slide

  107. @philhawksworth
    WRAPPING UP
    7
    7

    View full-size slide

  108. @philhawksworth
    SIMPLIFYING PRODUCTION
    ENVIRONMENTS IS A WIN
    PUT DISTANCE BETWEEN YOUR
    USERS AND YOUR COMPLEXITY

    View full-size slide

  109. @philhawksworth
    STATIC SITE GENERATORS &
    BUILD AUTOMATION ARE MATURING
    POWERFUL HOSTED TOOLS WHICH SOLVE
    COMMON SHORTFALLS ARE AVAILABLE

    View full-size slide

  110. @philhawksworth
    JOB INTERVIEWS AT R/GA
    ARE UNLIKE THOSE IN
    SWORDFISH

    View full-size slide

  111. @philhawksworth
    LINKS
    http://www.netlify.com
    https://www.staticgen.com
    http://jekyllrb.com
    http://roots.cx
    http://surge.sh
    https://gohugo.io
    http://www.contentful.com
    https://github.com/dommmel/jekyll-contentful
    https://www.google.com/2014
    https://developers.google.com/web/fundamentals
    http://wercker.com
    http://viewportify.hawksworx.com

    View full-size slide

  112. THANKS
    @PHILHAWKSWORTH
    7
    7

    View full-size slide