Let’s JAMstack!
Data-Driven Static Sites
Who?
Do you :
- Have a laptop?
- Know HTML?
- Have a Github account?
Who?
Carl M. Johnson
@carlmjohnson
Tech Director
Spotlight PA
Who?
A murderer!
Who?
A murderer (of a funky old website)
KMOS
When?
When?
2016
When
2019
When?
1996!
‘Space Jam’ Forever: The Website That Wouldn’t Die
Why Batman Forever is so Important for the Web
What?
What sucked?
- One guy was the gatekeeper
- No consistency of pages
- No revision history
What rocked?
- One person can do it all
- Total flexibility of pages
- Simple deploy process
What is a Static Site?
A website made of a static group of uploaded files as opposed to pages dynamically generated by a database, just like in 1996.
What is a Static Site Generator?
Software that creates a static site by combining templates and content files, typically Markdown with front-matter.
What?
StaticGen.com
What are the major generators?
What is LAMP stack?
- Linux
- Apache
- MySQL
- PHP
What is JAMstack?
- JavaScript
- APIs
- Markup
Why?
Why?
- Simple to archive
- Cheap or free hosting
- No security worries
Thomas Wilburn
Why?
- Easy to run locally
- Easy backup with Git
- Markdown support
Why not?
It’s static:
- Same content for everyone
- Need to use JavaScript for dynamic content
Why not?
- Intimidating for non-coders
- Can be tricky to collaborate (but try using Github or NetlifyCMS)
Where?
Examples
This slideshow
Where?
Free or low cost hosting on Amazon S3, Netlify, Github pages, Gitlab pages and more.
Where?
Glitch.com is live code collaboration site, not a static site host, but it will let us work on projects together.
How?
How?
Static site generators are great at creating blogs, but they can also make general purpose websites.
“Bad programmers worry about the code. Good programmers worry about data structures and their relationships.”
Linus Torvalds, 2006
“Bad programmers worry about the code. Good programmers worry about data structures and their relationships.”
Linus Torvalds, 2006
Items in data folder can drive site-wide content. Front-matter can drive page content.
Examples
Examples
- Moving blog off of Tumblr
Examples
- Using JSON for election guide
Examples
Hands on
How-to
- Fork this talk on Github
- Sign into Glitch.com with Github
- Clone your fork on Glitch
How-to
Make something radical to share with the group. See gohugo.io for Hugo documentation.