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/

Transcript

1. A NETLIFY SHOW & TELL
   PHIL HAWKSWORTH
   

   View Slide

2. View Slide

3. 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    (LINKING A GIT REPO)
    ELEVENTYONE
    

    View Slide

12. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide