Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Which Static Site Generator is right for me? @matopher

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

What web hosting should I use? @matopher

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Netlify + Serverless Functions = ❤ @matopher

Slide 20

Slide 20 text

Netlify + Serverless Functions = ❤ @matopher

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Let's launch some fun stuff