Getting into the JAMstack with
Static Site Generators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488477/scroll.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
Web pages as files
Simple Static Sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
request "cats.html"
Web pages as files
Simple Static Sites
- Pros: pretty fast & secure, very simple
- Cons: repetitive to build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488466/dogs-html.jpg)
Web pages as files
Simple Static Sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5977965/dogs-html-word.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458415/pets-php-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488465/db.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458404/database-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458417/plus.jpg)
Templates & Databases
Let the computer do the work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
request "cats.php"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458569/cats-php-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488465/db.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
Single-Page Apps (SPAs)
The browser as app server
- Pros: less time between pages
- Cons: slow first load; more work for client
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488457/app-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488468/gears.jpg)
Static Site Generators to the Rescue!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488478/shield.jpg)
Static Site Generators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458417/plus.jpg)
Automating in advance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458413/pets-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488461/cats-md.jpg)
(or database)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488459/build-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5978115/cats-md-word.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488474/pets-template.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458413/pets-html-word.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488459/build-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458397/batch-md.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458396/batch-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458402/cdn.jpg)
Static Site Generators
Automating in advance
Static Site Generators
Web pages are files again
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458406/file-server.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488470/laptop.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488460/cats-html.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488483/website.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5458490/cats-html-word.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488476/scales.jpg)
Primary Considerations
- Familiarity of languages & tools used
- Availability/quality of docs & resources
- Features vs complexity
- Specialization (blogs, docs, etc.)
- Speed: to develop, build, load
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488481/thinking-face.jpg)
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!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488473/line-xl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488472/line-s.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/566016/images/5488482/tools.jpg)
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,251