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

Stealthy git - solving CMS woes with git, on the quiet

Stealthy git - solving CMS woes with git, on the quiet

Content management systems are rarely fun to use. Not for developers, not for authors. They hamper effective development and they invent confusing processes for content authors.

What if we could build a CMS on top of git? What if instead of trying to invent new ways to solve things like version control, publishing approval, previews, and accountability, we used git which already has mechanisms to cope with these things and more?

Although developers might welcome this, content authors might not. Especially if we asked them to learn git so that they could do their work. Let’s not tell them. Let’s do it all behind the scenes and give them the benefits without exposing them to the underlying technology.

This talk will look at how Netlify CMS (an increasingly popular open source project) is marrying powerful git workflows with static site generators, continuous integration tools, and a flexible admin interface to make building and maintaining a CMS powered site a joy for all.

Phil Hawksworth

February 22, 2018
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. STEALTHY GIT
    PHIL HAWKSWORTH
    SOLVING CMS WOES WITH GIT, ON THE QUIET

    View Slide

  2. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    HELLO

    View Slide

  3. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    PHILHAWKSWORTH

    View Slide

  4. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    PHILHAWKSWORTH
    @

    View Slide

  5. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify

    View Slide

  6. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    STATIC SITES
    GO ALL HOLLYWOOD
    7
    7
    @PHILHAWKSWORTH
    FRONTEERS, AMSTERDAM, 2015
    ~
    I
    C
    CAN SMELL YOUR
    MS

    View Slide

  7. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify

    View Slide

  8. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    killer insight

    View Slide

  9. netlify Stealthy Git Front End London, February 2018 @philhawksworth
    BUILDING SITES TO WORK
    WITH A CMS IS A
    MASSIVE PAIN IN THE ARSE
    PHIL'S KILLER INSIGHT

    View Slide

  10. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THIS EVENING
    / THE TROUBLE WITH CMS
    / WHAT A GOOD CMS WOULD LOOK LIKE
    / THE NEXT WAVE
    / GIT BY STEALTH

    View Slide

  11. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THIS EVENING
    / THE TROUBLE WITH CMS
    / WHAT A GOOD CMS WOULD LOOK LIKE
    / THE NEXT WAVE
    / GIT BY STEALTH

    View Slide

  12. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    MONOLITHIC

    View Slide

  13. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    VISITORS & AUTHORS
    SERVED FROM
    THE SAME PLACE

    View Slide

  14. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CONTENT & CODE

    View Slide

  15. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    SCALING IS HARD

    View Slide

  16. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    PERFORMANCE IS HARD

    View Slide

  17. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    SECURITY IS HARD

    View Slide

  18. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    STABILITY IS HARD

    View Slide

  19. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    PROCESSES ARE HARD

    View Slide

  20. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    MANY DIFFERENT
    TYPES OF USERS

    View Slide

  21. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    MANY DIFFERENT
    TYPES OF SKILLS

    View Slide

  22. netlify Stealthy Git Front End London, February 2018 @philhawksworth
    BUILDING SITES TO WORK
    WITH A CMS IS A MASSIVE
    PAIN IN THE ARSE
    PHIL'S KILLER INSIGHT

    View Slide

  23. netlify Stealthy Git Front End London, February 2018 @philhawksworth
    BUILDING SITES TO WORK
    WITH A CMS IS HARD
    A MORE REASONABLE OBSERVATION

    View Slide

  24. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CMS ARE EXPENSIVE
    AND DEPEND ON A
    COMPLEX STACK
    MYTH

    View Slide

  25. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CONTENT & CODE

    View Slide

  26. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CONTENT & CODE
    ARE TREATED THE SAME
    ...AS CONTENT ...IN A DATABASE

    View Slide

  27. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    VERSION CONTROL
    PROCESSES ARE
    INTRODUCED

    View Slide

  28. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    EVERYTHING
    VERSION CONTROLFor

    View Slide

  29. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    VERSION CONTROL
    PROCESSES ARE
    INTRODUCED

    View Slide

  30. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    VERSION CONTROL
    PROCESSES ARE
    REINVENTED

    View Slide

  31. netlify Stealthy Git Front End London, February 2018 @philhawksworth
    LAUNCH DAY

    View Slide

  32. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THIS EVENING
    / THE TROUBLE WITH CMS
    / WHAT A GOOD CMS WOULD LOOK LIKE
    / THE NEXT WAVE
    / GIT BY STEALTH

    View Slide

  33. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    FREEDOM TO CREATE
    AND MANAGE CONTENT
    for authors

    View Slide

  34. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    A SENSIBLE AND LOGICAL
    PUBLISHING WORKFLOW
    for authors

    View Slide

  35. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    FREEDOM TO BUILD AND
    PROTECT THE EXPERIENCE
    for developers

    View Slide

  36. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CONFIDENCE THAT THE
    DESIGN WILL STAY INTACT
    for designers

    View Slide

  37. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    A SAFE, SECURE AND
    RAPID EXPERIENCE
    for users

    View Slide

  38. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THIS EVENING
    / THE TROUBLE WITH CMS
    / WHAT A GOOD CMS WOULD LOOK LIKE
    / THE NEXT WAVE
    / GIT BY STEALTH

    View Slide

  39. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    APPROACH?
    a new

    View Slide

  40. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    HEADLESS CMS

    View Slide

  41. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  42. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  43. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  44. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  45. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  46. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  47. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  48. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    LOTS & LOTS

    View Slide

  49. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  50. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    DECOUPLED

    View Slide

  51. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    API-BASED HEADLESS CMS

    View Slide

  52. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    BEST FRIENDS WITH SSG

    View Slide

  53. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CI & HOSTING
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT
    CONTENT APIS

    View Slide

  54. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    GIT-BASED HEADLESS CMS

    View Slide

  55. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CI & HOSTING
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT
    CONTENT APIS

    View Slide

  56. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CI & HOSTING
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT
    CONTENT
    CMS

    View Slide

  57. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THIS EVENING
    / THE TROUBLE WITH CMS
    / WHAT A GOOD CMS WOULD LOOK LIKE
    / THE NEXT WAVE
    / GIT BY STEALTH

    View Slide

  58. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify

    View Slide

  59. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  60. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    THE LOGIC

    View Slide

  61. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    TRADITIONAL CMS HEADLESS CMS NETLIFY CMS
    SITE
    CMS SERVER
    CMS ADMIN UI
    CONTENT DATABASE
    SITE GENRERATION
    SITE
    SITE SOUIRCE
    SITE CONTENT
    CMS ADMIN UI
    GIT REPO
    SITE GENRERATION
    CD SERVER
    SITE
    CMS SERVER
    CMS ADMIN UI
    CONTENT DATABASE
    GIT REPO
    SITE SOURCE
    CD SERVER
    SITE GENRERATION

    View Slide

  62. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    GIT FROM TOP
    TO BOTTOM
    give developers

    View Slide

  63. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    A UI THAT NEVER EVER
    EVER EVER EVER EVER
    MENTIONS GIT
    give authors

    View Slide

  64. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    A SITE YOU CAN EXPERIMENT WITH

    View Slide

  65. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    DEMO - FASTEST NEW DEPLOY (DTN)

    View Slide

  66. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    ADDING THE CMS
    TO YOUR SITE

    View Slide

  67. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    /DIST
    YOUR LOVELY SITE FILES
    /ADMIN
    INDEX.HTML
    CONFIG.YML

    View Slide

  68. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    /DIST
    YOUR LOVELY SITE FILES
    /ADMIN
    INDEX.HTML
    CONFIG.YML

    View Slide

  69. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify





    Content Manager








    View Slide

  70. View Slide

  71. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    CI & HOSTING
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT
    CONTENT
    CMS

    View Slide

  72. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    NETLIFY
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT
    CONTENT
    CMS

    View Slide

  73. netlify Stealthy Git Front End London, February 2018 @philhawksworth

    View Slide

  74. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    ADDING WORKFLOW

    View Slide

  75. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    /DIST
    YOUR LOVELY SITE FILES
    /ADMIN
    INDEX.HTML
    CONFIG.YML

    View Slide

  76. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify

    media_folder: "site/static/img
    public_folder: "img"
    publish_mode: editorial_workflow

    View Slide

  77. View Slide

  78. View Slide

  79. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    GET GIT WORKFLOWS
    WITHOUT KNOWING
    ABOUT GIT
    authors

    View Slide

  80. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    DON'T EVEN NEED
    A GITHUB ACCOUNT
    authors

    View Slide

  81. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    RETAIN CONTROL OF
    DEVELOPMENT AND
    PROPER WORKFLOWS
    developers

    View Slide

  82. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    EVERYTHING
    VERSION CONTROLFor

    View Slide

  83. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    HEADLESSCMS.ORG

    NETLIFYCMS.ORG
    STATICGEN.COM
    NETLIFY.COM

    THENEWDYNAMIC.ORG
    HAWKSWORX.COM

    View Slide

  84. Stealthy Git Front End London, February 2018 @philhawksworth
    netlify
    JAMSTACK.ORG / COMMUNITY

    View Slide

  85. THANK YOU
    PHIL HAWKSWORTH
    HAWKSWORX.COM / TALKS / STEALTH

    View Slide