index
A
active class 34
add-to-cart functionality, in Jam Store 112 – 114
admin, editing content as 85 – 88
allWpPost query 224
Amazon S3 125 – 131
API-based headless CMSs 208
architecture Jamstack, benefits of 7 – 9
cost 8 – 9
performance 7
security 7 – 8
Azure Static Web Apps 133 – 138
B
Blogging Like a Hacker (Preston-Werner) 4
brochureware website 15
buckets 126
building basic Jamstack site 40
Camden Grounds coffee shop fictional site 32 – 39
using Eleventy 16 – 32
collections 24 – 28
creating first site 18 – 19
data 28 – 32
going further with 39 – 40
layouts and includes 21 – 24
template languages 20 – 21
C
Camden Grounds coffee shop fictional site 32 – 39, 193 – 196
card format 36
cloud file storage providers 125 – 132
Amazon S3 125 – 131
other options 131 – 132
CMSs (content management systems) 233
connecting using site builder 228 – 232
Stackbit 230 – 232
Strattic 229 – 230
WeWeb 228 – 229
headless 209 – 217
Contentful 209 – 212
options for 68 – 70
overview 67 – 68
picking up front when migrating to Jamstack 244
Sanity 213 – 217
types of 206 – 208
WordPress 217 – 227
consuming WordPress content in Gatsby 224 – 227
exploring Gatsby’s data layer 223 – 224
installing Gatsby plug-ins for 218 – 220
installing locally with Local 217
next steps using 227
setting up Gatsby 221 – 222
collections
in Eleventy static site generator 24 – 28
in Netlify CMS 78 – 79
Commerce object 106
Commerce.js 98
loading Commerce.js SDK 106
reasons for using 98 – 99
setting up 103 – 105
commerce.products.list() method 109
Comparing Static Site Generator Build Times (Davis) 237
config.toml file 83
content field 182
content variable 34
content-after.html template 90
content-heavy sites, migrating to Jamstack 235
Contentful 209 – 212
context object 192
cost 8 – 9
D
dangerouslySetInnerHTML method 111
data
in Eleventy static site generator 28 – 32
in Jekyll 55 – 56
data property 27
data-netlify attribute 151
Davis, Sean C. 237
deployment 152
Azure Static Web Apps 133 – 138
cloud file storage providers 125 – 132
Amazon S3 125 – 131
other options 131 – 132
on web servers 124 – 125
with Netlify 81 – 83, 143 – 152
with Vercel 138 – 142
Digital.gov 12
distributed persistent rendering (DPR) 236, 239 – 240
docs content type 88
document type 216
documentation site, building 92
building example site 72 – 90
configuring GitHub for authentication 84 – 85
configuring Netlify for authentication 85
creating new Hugo site 73 – 75
deploying to Netlify 81 – 83
editing content as admin 85 – 88
installing Hugo 72 – 73
installing Netlify CMS 76 – 77
modeling content in Netlify CMS 78 – 81
open authoring workflow 88 – 89
setting up Hugo Book theme 75 – 76
simplifying open authoring workflow 89 – 90
choosing right tools 67 – 72
headless CMS 67 – 70
Hugo 72
static site generator options 71 – 72
requirements of site 65 – 66
'dot.env' package 30
DPR (distributed persistent rendering) 236, 239 – 240
dynamic elements 184
forms 154 – 168
Formcake 163 – 168
Google Forms 154 – 162
other options 168
other dynamic options 184
search 168 – 183
Lunr 174 – 183
other options 183
dynamic routes 109
E
e-commerce site, building 123
choosing right tools 95 – 100
Commerce.js 98 – 99
headless e-commerce 95 – 98
Next.js 100
SSG (static site generator) options 99
Jam Store 106 – 122
add-to-cart functionality 112 – 114
Markdown content 120 – 122
product detail page 109 – 112
product listing 108 – 109
product listing component 107 – 108
shopping cart 114 – 119
requirements of 94 – 95
setting up 100 – 106
Commerce.js 103 – 106
Next.js 100 – 103, 105 – 106
Eleventy static site generator 16 – 32
adding Lunr to Eleventy site 176 – 183
collections 24 – 28
creating first site 18 – 19
data 28 – 32
going further with 39 – 40
layouts and includes 21 – 24
template languages 20 – 21
environment variables, in Next.js 105 – 106
F
FaaS (function as a service) 186
fetch API 182, 190
fetch command 200
fields, in Netlify CMS 79 – 81
file-based configuration 188
filters 38
Forestry 68
forms 154 – 168
Formcake 164 – 169
Google Forms 154 – 162
other options 168
function as a service (FaaS) 186
G
Gatsby
consuming WordPress content in 224 – 227
data layer 223 – 224
installing Gatsby plug-ins for WordPress 218 – 220
setting up 221 – 222
gatsby-plugin-sharp plug-in 205
gatsby-transformer-sharp plug-in 222
getStaticPaths() method 111
getStaticProps() method 109
Git-based headless CMSs 207
GitHub, configuring for authentication 84 – 85
.gitignore file 201
Google Forms 154 – 162
gray-matter library 121
H
headers value 192
headless CMSs (content management systems) 209 – 217
Contentful 209 – 212
options for 68 – 70
Forestry 68
Netlify CMS 70
Prose 69
Publii 68 – 69
overview 67 – 68
picking up front when migrating to Jamstack 244
Sanity 213 – 217
types of 206 – 208
API-based 208
Git-based 207
headless e-commerce
options 96 – 98
overview 95 – 96
hint field 79
history of Jamstack 3 – 6
hot reloading 17
How to Choose a Headless CMS (Tissera) 232
Hugo
creating new Hugo site 73 – 75
installing 72 – 73
confirming installation 73
on MacOS or Linux 73
on Windows 73
reasons for using 72
setting up Hugo Book theme 75 – 76
hugo command-line command 72
hugo new command 74
I
image widget 79
Impossible Foods website 11
includes
in Eleventy static site generator 21 – 24
in Jekyll 53 – 54
incremental builds 238
installing
Hugo 72 – 73
confirming installation 73
on MacOS or Linux 73
on Windows 73
Netlify CMS 76 – 77
ISR (incremental static regeneration) 236, 238 – 239
J
Jam Store 106 – 122
add-to-cart functionality 112 – 114
Markdown content 120 – 122
product detail page 109 – 112
product listing 108 – 109
product listing component 107 – 108
shopping cart 114 – 119
Jamstack 14
architecture, benefits of 7 – 9
cost 8 – 9
performance 7
security 7 – 8
history of 3 – 6
overview 2 – 3
sites built with 10 – 12
Digital.gov 12
Impossible Foods 11
Nike 11
Restaurant Brands International (RBI) 12
Smashing Magazine 10
when not right choice 9
jekyll new command 45
jekyll new sitename command 43
Jekyll, building blog with 63
configuring blog 56
creating additional files 54
data, working with 55 – 56
first site 43 – 46
generating site 57
going further with Jekyll 62 – 63
includes 53 – 54
layouts 52
overview 41 – 43
writing posts 47 – 50
json filter 179
L
large sites, migrating to Jamstack 237 – 240
deciphering terminology 240
distributed persistent rendering 239 – 240
incremental builds 238
incremental static regeneration 238 – 239
layouts
in Eleventy static site generator 21 – 24
in Jekyll 52
Linux, installing Hugo on 73
Local 217
Lunr 174 – 183
M
MacOS, installing Hugo on 73
map() function 101
Markdown content, in Jam Store 120 – 122
migrating to Jamstack 247
functionality needed to migrate 241 – 242
process considerations 243 – 246
building templates from scratch rather than porting 244 – 245
don’t move everything at once 243 – 244
keep as much as possible 245 – 246
pick headless CMS up front 244
type of site being migrated 235 – 240
content-heavy sites 235
large sites 237 – 240
web applications 236
modeling content, in Netlify CMS 78 – 81
collections 78 – 79
fields 79 – 81
N
Netlify
building serverless functions with 187 – 196
deployment with 143 – 152
Netlify CMS 70
configuring for authentication 85
deploying to 81 – 83
installing 76 – 77
modeling content in 78 – 81
collections 78 – 79
fields 79 – 81
reasons for using 70
netlify command 193
netlify function 187
netlify.toml file 188
new command 45
new site command 73
Next.js
environment variables 105 – 106
overview 100
setting up 100 – 103
Nike website 11
npx command 100
O
open authoring workflow 88 – 90
P
package.json file 201
page variable 33
pattern field 79
performance 7
permalink property 108
permalink variable 112
posts, blog 47 – 50
pre-rendered assests 7
Preston-Werner, Tom 4
product detail page, in Jam Store 109 – 112
product listing, in Jam Store 108 – 109
product object 107
products variable 37
props object 108
PropTypes library 226
Prose 69
Publii 68 – 69
R
ref value 182
regex (regular expressions) 79
render() method 113
req.query object 199
Request object 197
required attribute 79
Response object 197
Restaurant Brands International (RBI) 12
S
SaaS (software as a service) 8
Sanity 213 – 217
scripts block 135
search 168, 183
search function 182
security 7 – 8
serverless computing 204
building serverless functions with Netlify 187 – 196
building serverless functions with Vercel 196 – 204
adding serverless functions to Camden Grounds (again) 201 – 204
first Vercel serverless function 197 – 200
with dynamic path support 200
overview 186
Shopify 96 – 97
shopping cart, in Jam Store 114 – 119
single-page application (SPA) 71, 99
.Site.Data object 74
sites built with Jamstack 10 – 12
Digital.gov 12
Impossible Foods 11
Nike 11
Restaurant Brands International (RBI) 12
Smashing Magazine 10
slug aspect 38
slug field 79
slug function 38
slug type 216
Snipcart 97
software as a service (SaaS) 8
source option 216
SPA (single-page application) 71, 99
SSGs (static site generators) 2, 99
options 71 – 72, 99
rise of 4 – 5
SSR (server-side rendering) 3, 99, 239
T
tags value 24
template languages 20 – 21
templateContent value 179
templates, building from scratch rather than porting 244 – 245
text widget 79
textarea field 79
third-party Jamstack services 242
thumbnail variable 108
Tissera, Emmanuel 232
title field 182
title value 52
U
url value 52
useEffect() hook 116
useEffect() method 117
useState hook 114
V
Vercel
building serverless functions with 196 – 204
adding serverless functions to Camden Grounds (again) 201 – 204
first Vercel serverless function 197 – 200
with dynamic path support 200
deployment with 138 – 142
vercel dev command 198
W
web applications, migrating to Jamstack 236
web servers, deployment on 124 – 125
widget property 79
widgets 79
Windows, installing Hugo on 73
WordPress 217 – 227
consuming WordPress content in Gatsby 224 – 227
exploring Gatsby’s data layer 223 – 224
installing Gatsby plug-ins for 218 – 220
installing locally with Local 217
next steps using 227
setting up Gatsby 221 – 222
WYSIWYG (what-you-see-is-what-you-get) 206
