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

A Delightfully Short Guide to Static Site Generators

Matt Woods
November 22, 2019

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.

Matt Woods

November 22, 2019
Tweet

More Decks by Matt Woods

Other Decks in Programming

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