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

Netlify Show and Tell

Netlify Show and Tell

The slides from a lunchtime workshop at Smashing Conference San Francisco. Mostly useful for those who attended.

Many of the jumping off points explored one project, which you can clone and play with here:

https://jamstack-comments.netlify.com/about/

Phil Hawksworth

April 18, 2018
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. A NETLIFY SHOW & TELL
    PHIL HAWKSWORTH

    View full-size slide

  2. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    A LOOSE AGENDA
    1. NETLIFY IN A NUTSHELL
    2. THE EASIEST DEPLOY (DRAG AND DROP)
    3. THE MOST POWERFUL DEPLOY (LINKING A GIT REPO)
    4. A QUICK TOUR - OVERVIEW & SETTINGS
    5. USING FORMS
    6. SERVERLESS WITH NETLIFY FUNCTIONS
    7. PUTTING THINGS TOGETHER
    8. A/B TESTING

    View full-size slide

  3. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    1. NETLIFY IN A NUTSHELL

    View full-size slide

  4. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    GET
    TO
    THE
    CDN

    View full-size slide

  5. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    jamstack
    JAVASCRIPT / API / MARKUP

    View full-size slide

  6. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    APIs SITE
    (JAVASCRIPT)
    JAVASCRIPT
    MARKUP

    View full-size slide

  7. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    NETLIFY
    BUILD
    CDN
    LOCAL
    BUILD
    STATIC SERVER
    GIT

    View full-size slide

  8. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    2. THE EASIEST DEPLOY

    View full-size slide

  9. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify

    View full-size slide

  10. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    3. THE MOST POWERFUL DEPLOY

    (LINKING A GIT REPO)
    ELEVENTYONE

    View full-size slide

  11. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    4. A QUICK TOUR
    GIT CONNECTION
    BUILD COMMAND
    BRANCHES
    ENVIRONMENT VARIABLES
    BUILD HOOKS
    NOTIFICATIONS
    HTTPS
    DEPLOY LOGS
    PUBLISHING VERSIONS

    View full-size slide

  12. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    BRANCH BUILDS
    JAMSTACK COMMENTS - TINT
    cheeky bonus

    View full-size slide

  13. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    PREVIEW BUILDS
    JAMSTACK COMMENTS - SMASHING COMMENTS
    cheeky bonus

    View full-size slide

  14. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    5. USING FORMS
    JAMSTACK COMMENT
    FORM HTML / ADMIN UI / API / GULP

    View full-size slide

  15. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    6. SERVERLESS WITH NETLIFY FUNCTIONS
    TWAVATAR

    View full-size slide

  16. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    7. PUTTING THINGS TOGETHER
    COMMENTS WALKTHROUGH

    View full-size slide

  17. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    8. A/B TESTING
    TEST THE COMMENTS TINT

    View full-size slide

  18. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    DEPLOY BUTTONS
    cheeky bonus

    View full-size slide

  19. Netlify show and tell Smashing Conf SF @philhawksworth
    netlify
    THANKS
    QUESTIONS?
    @PHILHAWKSWORTH

    View full-size slide