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 Slide

  2. PHILHAWKSWORTH
    @
    QUESTIONS
    SUGGESTIONS
    ARGUMENTS
    COMMENTS

    View Slide

  3. @philhawksworth
    PREVIOUS RANTS

    View Slide

  4. @philhawksworth
    I LOVE THE WEB

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. @philhawksworth
    http ://

    View Slide

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

    View Slide

  10. @philhawksworth
    ALL FINE NOW

    View Slide

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

    View Slide

  12. @philhawksworth
    OMFG
    DEVICES

    View Slide

  13. View Slide

  14. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO QUALITY
    7
    7

    View Slide

  15. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO LONGEVITY
    7
    7

    View Slide

  16. @philhawksworth

    View Slide

  17. @philhawksworth
    SIMPLICITY
    7
    7

    View Slide

  18. BAKE,
    DON’T FRY
    @philhawksworth

    View Slide

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

    View Slide

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

    View Slide

  21. @philhawksworth
    BEST FIT
    7
    7

    View Slide

  22. @philhawksworth
    FEW WRITES MANY READS

    View Slide

  23. @philhawksworth
    SIMPLICITY
    7
    7

    View Slide

  24. @philhawksworth
    HOLLYWOOD
    not very

    View Slide

  25. @philhawksworth
    DUMBING DOWN
    SIMPLIFYING
    is not
    7
    7

    View Slide

  26. @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 Slide

  27. @philhawksworth

    View Slide

  28. View Slide

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

    View Slide

  30. View Slide

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

    View Slide

  32. @philhawksworth
    A MOMENT ABOUT
    THE BENEFITS
    7
    7

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. @philhawksworth
    CREDENCE
    7
    7

    View Slide

  37. @philhawksworth

    View Slide

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

    View Slide

  39. @philhawksworth
    GOOGLE
    WEB FUNDAMENTALS

    View Slide

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

    View Slide

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

    View Slide

  42. @philhawksworth
    REDUCED RISK
    7
    7

    View Slide

  43. @philhawksworth
    GOOGLE
    YEAR IN SEARCH

    View Slide

  44. @philhawksworth

    View Slide

  45. @philhawksworth
    LARGE AUDIENCE
    INFREQUENTLY UPDATED
    LONG LIFE

    View Slide

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

    View Slide

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

    View Slide

  48. @philhawksworth
    STATIC SITES
    7
    7
    are
    ALREADY MAINSTREAM

    View Slide

  49. @philhawksworth
    ENABLERS
    7
    7

    View Slide

  50. @philhawksworth
    FRONT END TOOLING
    7
    7

    View Slide

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

    View Slide

  52. @philhawksworth
    GENERATORS AND
    TEMPLATING
    7
    7

    View Slide

  53. @philhawksworth
    STATICSITEGENERATORS.NET

    View Slide

  54. @philhawksworth
    393

    View Slide

  55. @philhawksworth
    TAX
    M
    HIPSTER
    the

    View Slide

  56. @philhawksworth
    SIDE EFFECT
    as a
    STYLEGUIDE
    7
    7

    View Slide

  57. @philhawksworth
    ARTEFACT
    as an
    STYLEGUIDE
    7
    7

    View Slide

  58. @philhawksworth
    PROCESS
    as a
    STYLEGUIDE
    7
    7

    View Slide

  59. @philhawksworth

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. @philhawksworth
    AUTOMATION
    7
    7

    View Slide

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

    View Slide

  65. @philhawksworth
    DEPLOY FASTER
    DEPLOY SAFER
    7
    7

    View Slide

  66. @philhawksworth
    UPDATE FASTER
    7
    7

    View Slide

  67. @philhawksworth
    FEEL MORE DYNAMIC
    7
    7

    View Slide

  68. @philhawksworth
    SURGE.SH

    View Slide

  69. @philhawksworth
    HIT THE CEILING
    7
    7

    View Slide

  70. @philhawksworth
    BECAUSE WE NEED A
    DEVELOPER MINDSET

    View Slide

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

    View Slide

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

    View Slide

  73. @philhawksworth
    WE STILL WANT
    THE SHIZZLE

    View Slide

  74. @philhawksworth
    AND WE WANT TO
    MANAGE CONTENT
    OURSELVES

    View Slide

  75. @philhawksworth
    LET’S LOOK AT
    COMMON COMPLEXITY

    View Slide

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

    View Slide

  77. @philhawksworth
    REDUCE COMPLEXITY

    View Slide

  78. @philhawksworth
    OTHER PEOPLE’S
    PLUMBING

    View Slide

  79. @philhawksworth
    OTHER PEOPLE’S
    PLUMBING

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. @philhawksworth
    OUTSOURCE COMPLEXITY
    7
    7

    View Slide

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

    View Slide

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

    View Slide

  86. @philhawksworth
    JEKYLL DATA

    View Slide

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

    View Slide

  88. @philhawksworth
    CONTENTFUL.COM

    View Slide

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

    View Slide

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

    View Slide

  91. @philhawksworth

    View Slide

  92. @philhawksworth
    ROOTS
    ROOTS.CX

    View Slide

  93. @philhawksworth
    HOSTING

    View Slide

  94. @philhawksworth
    “HOSTING PLUS”
    7
    7

    View Slide

  95. @philhawksworth
    “HOSTING WITH BENEFITS”
    7
    7

    View Slide

  96. @philhawksworth
    NETLIFY.COM

    View Slide

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

    View Slide

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

    View Slide

  99. FORMERLY BITBALLOON
    7
    7

    View Slide

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

    View Slide

  101. COMMIT HOOKS
    AND BUILDS

    View Slide

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

    View Slide

  103. COMMAND LINE INTERFACE

    View Slide

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

    View Slide

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

    View Slide

  106. @philhawksworth
    LIMITATIONS
    7
    7

    View Slide

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

    View Slide

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

    View Slide

  109. @philhawksworth
    BEST FIT
    7
    7

    View Slide

  110. @philhawksworth

    View Slide

  111. @philhawksworth
    IT DEPENDS

    View Slide

  112. @philhawksworth
    WRAPPING UP
    7
    7

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  116. @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 Slide

  117. THANKS
    @PHILHAWKSWORTH
    7
    7

    View Slide