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
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