A Delightfully Short Guide to Static Site Generators

54e37ff620b00a8597e698039d58134f?s=47 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.

54e37ff620b00a8597e698039d58134f?s=128

Matt Woods

November 22, 2019
Tweet

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
  2. My first-ever site = "This is Magic" @matopher

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

  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
  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
  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
  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
  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
  9. Who's developing like this? Airbnb Lodash Docs Figma @matopher

  10. Why an Insanely Popular Web Dev Blog Switched to a

    Static Site @matopher
  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
  12. Which Static Site Generator is right for me? @matopher

  13. Jekyll: The Trusty Old Guard Simple, sturdy & familiar Easy

    to add content @matopher
  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
  15. What web hosting should I use? @matopher

  16. GitHub Pages: Hosting You Already Have I have nothing but

    love for GitHub Pages. It works great! But... @matopher
  17. Netlify: Free Hosting Developers Won't Hate ✅ Great continuous deployment

    experience ✅ Easy to add serverless functions & helpers ✅ Generous free plan @matopher
  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
  19. Netlify + Serverless Functions = ❤ @matopher

  20. Netlify + Serverless Functions = ❤ @matopher

  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
  22. Let's launch some fun stuff