A Delightfully Short Guide to Static Site Generators

Need to launch a quick-and-easy site for your next side-project, blog (or just as a favor for a friend?) Before you reach for Github Pages, make sure you've considered the new generation of static site generators to streamline your development process.

We'll take a crash course through the most exciting tools that introduce API-driven content through GraphQL and even make it a snap to add smart functionality through serverless functions.

Hey! I'm Matt Woods, a growth marketer, software developer and shameless book addict. Currently, I run Growth at Tailwind, an Oklahoma City software startup that makes marketing easy for small businesses. I also co-founded OKC Indie Hackers to help scrappy creators build software that makes the world better.

Transcript

1. A Delightfully Short Guide
   to Static Site Generators
   The Best Way to Instantly Ship Free, Blazing-Fast Websites with
   Serverless Functions in 2019
   Matt Woods
   Growth, Tailwind
   @matopher
   

   View Slide

2. My first-ever site = "This is Magic"
   @matopher
   

   View Slide

3. Everyone needs a plain 'ol website (eventually)
   @matopher
   

   View Slide

4. Everyone needs a plain 'ol website (eventually)
   One of a couple things will happen:
   1. You'll need a website that just works.
   (Docs, Get your next project discovered, Blog)
   2. Someone new to development will need your help.
   (Recommend the *right* approach)
   @matopher
   

   View Slide

5. What's a JAMstack?
   ❌ Server-side CMS
   ❌ SPA that builds at runtime
   ❌ Monolithic server-run web app
   (Sadly, no.)
   It doesn't depend on a server.
   @matopher
   

   View Slide

6. What's a JAMstack?
   ✅ Javascript
   Any dynamic programming during the request/
   response cycle
   ✅ APIs
   All server-side processes or database actions
   are abstracted into reusable APIs
   ✅ Markup
   Templated markup should be prebuilt at deploy
   time
   

   View Slide

7. Pros
   Dead simple hosting
   Modern tools = A developer experience
   you'll actually love
   Everything lives in Git
   Blazing fast: A stack of files that gets to
   first byte quickly
   Thriving, open-source community
   @matopher
   

   View Slide

8. Cons
   ↪ You'll have to rebuild the site anytime you add new
   content. (So... A LOT.)
   New learning curve for handling authentication, forms,
   and dynamic content
   Generally not as user-friendly for non-developers
   unless you pair with a 3rd-party CMS on the backend
   @matopher
   

   View Slide

9. Who's developing like this?
   Airbnb Lodash Docs Figma
   @matopher
   

   View Slide

10. Why an Insanely Popular Web Dev Blog
    Switched to a Static Site
    @matopher
    

    View Slide

11. Why an Insanely Popular Web Dev Blog
    Switched to a Static Site
    ➡
    4 Separate Platforms 1 Site, No Backend
    + Algolia search
    + GoCommerce
    + Netlify CMS
    + Progressive Web App
    @matopher
    

    View Slide

12. Which Static Site Generator is right for me?
    @matopher
    

    View Slide

13. Jekyll: The Trusty Old Guard
    Simple, sturdy &
    familiar
    Easy to add
    content
    @matopher
    

    View Slide

14. Gatsby: The Speed Demon
    Blistering Fast Out of the Box
    (prefetching, code-splitting,
    progressive web app)
    Source Data with GraphQL
    Just query what you need
    @matopher
    

    View Slide

15. What web hosting should I use?
    @matopher
    

    View Slide

16. GitHub Pages: Hosting You Already Have
    I have nothing but love for GitHub Pages. It works great! But...
    @matopher
    

    View Slide

17. Netlify: Free Hosting Developers Won't Hate
    ✅ Great continuous
    deployment experience
    ✅ Easy to add
    serverless functions &
    helpers
    ✅ Generous free plan
    @matopher
    

    View Slide

18. Netlify: Free Hosting Developers Won't Hate
    A hosting platform centered around Git that makes it
    a snap to pump out fast, modern websites.
    @matopher
    

    View Slide

19. Netlify + Serverless Functions = ❤
    @matopher
    

    View Slide

20. Netlify + Serverless Functions = ❤
    @matopher
    

    View Slide

21. What can you do with Netlify's serverless
    functions + helpers?
    - Use authentication to access an admin dashboard
    - Easy form handling
    - Use a headless CMS to update your site's content
    @matopher
    

    View Slide

22. Let's launch some fun stuff
    

    View Slide