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