Getting into the JAMstack with
Static Site Generators
Welcome!
Be sure you have:
- A terminal program with Git (Windows users, install Git for Windows)
-
Node version 10+ (Run node -v in your terminal to check.)
Meet your neighbor and find out:
- What tools/processes they use to build websites now
- What they would like to learn today
What we'll cover
-
How we got here, and why "here" is good!
-
How to choose a site generator
-
How to make your own generated site
-
How to manage content with a CMS
- How to add dynamic features like forms, comments, and internationalization
A Little History
Web pages as files
Simple Static Sites
request "cats.html"
Web pages as files
Simple Static Sites
- Pros: pretty fast & secure, very simple
- Cons: repetitive to build
Web pages as files
Simple Static Sites
Templates & Databases
Let the computer do the work
request "cats.php"
get template
query database
fill content
Templates & Databases
Let the computer do the work
- Pros: quicker to build and change
- Cons: slower, less secure, more complex
Templates & Databases
Let the computer do the work
Single-Page Apps (SPAs)
The browser as app server
- Pros: less time between pages
- Cons: slow first load; more work for client
Static Site Generators to the Rescue!
Static Site Generators
Automating in advance
(or database)
Static Site Generators
Automating in advance
Static Site Generators
Web pages are files again
request "cats.html"
Static Site Generators
The best of both worlds
(in many cases)
Pros:
- fast, secure, scalable on CDN (often for free)
- computer still does the repetitive work
- can still use JavaScript for between-page loads
Cons:
- JAMstack ecosystem not as mature (yet)
Weighing
the Options
Primary Considerations
- Familiarity of languages & tools used
- Availability/quality of docs & resources
- Features vs complexity
- Specialization (blogs, docs, etc.)
- Speed: to develop, build, load
Traditional Builders
- 👍 Very mature: lots of resources
- 👍 Simpler syntax and organization
- 👎 Managing Ruby versions can be a hassle
- 👎 Builds can be slow
- 👍 Fast builds
- 👍 Dependency-free installation
- 👍 Broad ecosystem and features
- 👎 Unusual template syntax
- 👎 Can be complex, and docs can be limited
Traditional Builders
Honorable mentions:
-
Hexo: Built with Node; very popular in China
-
Metalsmith: Plugin architecture for maximum flexibility
-
Middleman: Built for Rubyists
- Sculpin: A PHP Symfony
Framework Friends
- 👍 SPA capabilities out of the box
- 👎 Client-side JS can add unnecessary weight
- 👍👎 Framework-dependent architecture
The Reactors:
part-time generator
venture-backed JAMstack
built for simplicity
Framework Friends
- 👍 SPA capabilities out of the box
- 👎 Client-side JS can add unnecessary weight
- 👍👎 Framework-dependent architecture
The Vueties:
more like Gatsby
more like Next
Docs Specialists
Plug and play:
More flexible
React on Rails
- 👍 Focused capabilities reduce complexity
- 👎 Can be less flexible
Docs Specialists
- 👍 Focused capabilities reduce complexity
- 👎 Can be less flexible
Powerful markup:
Asciidoc
reStructuredText
And so many more...
How to evaluate
- Browse the docs
- Search for tutorials and reviews
- Search for themes or starters
- Explore the files in a sample project
- Try it out!
Our Choice Today
- 👍 Low risk of tech failure
- 👍 Simple, flexible templating
- 👍 Lightweight
- 👍 Popular for personal projects
- 👎 Limited docs with no search
- 👎 Minimal built-in tooling
- 👎 Not really used "at scale"
(aka Eleventy)
Let's get started!
Getting into the JAMstack with Static Site Generators Jessica Parsons @verythorough slides.com/verythorough/jamstack-ssg Shared notepad on Dropbox
Getting into the JAMstack with Static Site Generators
By Jessica Parsons
Getting into the JAMstack with Static Site Generators
An all-day workshop presented at JAMstack_conf_london
- 2,542
