6 ms·

Jamstack Handbook – All things Jamstack with 3 step-by-step tutorials

84 points by colbyfayock 6y ago

eurvin 6y ago
'an unexpected error has occured' I hope you get it up and running again soon, because I am very curious to know what your handbook is all about.
- colbyfayock 6y ago
  :o where are you seeing that, on the homepage? it's loading for me
  - eurvin 6y ago
    I get it in Safari 12.1.2 (12607.3.10) on the mac. It works correctly in Firefox for me now.
    - colbyfayock 6y ago
      that's so strange - sorry you're experiencing that. im not having any issues on my mac's safari :( glad FF is working for you though i'll try to see if i can figure out a way to reproduce
easton 6y ago
What’s the expected knowledge before you read this?
- colbyfayock 6y ago
  For the book - I don't think there really is a high expectation of knowledge, except maybe just general web development from a high level. The hope for the informational part is to get anyone acquainted with it For the tutorials - the expectation is familiarity with Javascript and probably React, given the examples are React, though I walk through each steps with the code changes
  - Cederfjard 6y ago
    Edit: Pardon me! I think I encountered some weirdness on mobile, I couldn’t scroll very far down. After a reload I’m seeing more. ——- I’m seeing very little about the actual content of the book on the page. Could you please detail a little bit more about what’s actually covered? What apps are you building in those tutorials? Etc.
    - colbyfayock 6y ago
      sorry i heard there are some issues with the site but i haven't been able to reproduce to fix :( please let me know if you hvae more questions!
aosaigh 6y ago
Who is the Jamstack for in your opinion? I'm a web developer that makes a lot of apps and marketing sites for small to medium businesses and I find it very hard to justify the added complexity of a Jamstack architecture - there's just too many moving parts. It seems to me you need a few things: - A dedicated development team to manage the stack - Enough traffic to justify the complexity - Regular content publishing to make use of the build pipeline - A need for speed beyond what's regularly acceptable Great work anyway on the book, it's good to see people charging for curated knowledge.
- nicoburns 6y ago
  Added complexity? At its simplest, Jamstack is just a static site generator. A service like Netlify will do the entire build pipeline for you (for free) just by pointing it at the git repo. Or if you want to DIY the hosting, then all you have to do is find somewhere that can host static files. Jamstack is largely about removing complexity.
  - aosaigh 6y ago
    At its simplest yes. But if you are proposing this as a solution to a client, they will likely want to edit content. That will have to happen on a headless CMS instance. That's whole new stack to maintain alongside. You then need to set that up and configure the SPA to talk to it (GraphQL/Apollo?). When I come back to client project in a month, is all this still going to be working ...? Maybe, but it's certainly not less complex then a traditional Wordpress site. So I'm wondering what are the criteria for using Jamstack successfully? As you said it could be that it's good for simple static sites but not great for more complex content-drive sites - I don't know, that's what I'm asking.
    - Pandabob 6y ago
      Obviously it depends a lot on which CMS you're using and I can imagine there being a lot of complexity involved. That said, setting up something like Contentful and integrating it with NextJS is roughly a day or two of work if you're doing it for the first time. And it all works over REST so you don't have to worry about GraphQL. You can even do "previews" now with Next thanks to preview mode: https://next-preview.now.sh/ https://next-preview.now.sh/
nanna 6y ago
This looks great. People interested may also want to take a look at Andy Bell's 11ty book, which is more of a general introduction to web development and the jamstack: https://piccalil.li/course/learn-eleventy-from-scratch/ https://piccalil.li/course/learn-eleventy-from-scratch/
- colbyfayock 6y ago
  Andy Bell is fantastic, great rec
z3t4 6y ago
You dont need that much tooling. A static site generator will do. Build your site with vanilla HTML or markdown. Use web micro-services for widgets like search, comments, contact-form, etc.
- colbyfayock 6y ago
  for sure - that's definitely a valid solution. it all depends on the goals you're trying to meet
bauerd 6y ago
The invention of the "JAM stack" is one of the greatest marketing stunts I know of. Kudos to Netlify for rebranding HTML+AJAX
- skc 6y ago
  The problem that Netlify has is that they are simply a feature of the big cloud providers. Microsoft is already testing the waters with their own offering and I'm sure AWS and Google are as well. I'm not sure Netlify will survive the onslaught.
  - colbyfayock 6y ago
    i think there's a lot of truth to that - but they do is so fantastically well there are a LOT of pain points to deal with rolling out all that is included with the base netlify offering hosting a static site is pretty easy - but configuring routing between cloudfront and s3 can be complicated so that the reequests don't always reference the root index.html creating an autodeploy infrastructure can be challenging as well, tools like github actions might make that a little easier, but there are a lot of considerations there it also makes these kinds of solutions more accessible to developers who might not have the understanding or interest to set up that kind of infrastructure. front end devs can build sites, connect, and go with little fuss
    - lowdose 6y ago
      I second this. Players like Netlify and Digital Ocean have a ridiculous amount of mindshare for solving a certain problem faster without the complexity that the big cloud providers bring. I think the market is larger for simplified services without the IAM and S3 cruft, especially when you have to educate the client on the solution.
    - Rapzid 6y ago
      Netlify is impressively slick and streamlined.. It took like 5 minutes to host a Nuxt app from a private repo with SSL.. And that includes setting up the Netlify account. Their redirects are a pain point though.
rishav_sharan 6y ago
I like the idea of JAMstack and will likely use it for simple toy projects. But I do not like the idea of promoting paid products on HN. this link is basically just an ad telling users to "buy the book". There is nothing for me to read, learn or discuss on the landing page unless I buy the book.
- projektfu 6y ago
  The upvoting/downvoting mechanism should be sufficient unless you have a scenario where people are upvoting titles without reading the page. Note to author: perhaps more enticing would be to have 4 examples, the first being a free preview of the book and rest would require payment. Then people could evaluate your tutorial style.
  - colbyfayock 6y ago
    thanks - thats a good point - i plan on releasing the first tutorial free actually - i just haven't had the time to get that out yet, that'll be hopefully posted on freecodecamp.org in the next couple of days
poyu 6y ago
Can anyone point me to a good headless CMS solution that doesn't introduce vendor lock in? I've tried Contenful and I only got nothing but good things to say about it. Probably something open source and self hosted.
- aosaigh 6y ago
  Have you looked at Craft? It has headless-mode via a GraphQL API.
- ryancoleman 6y ago
  I really like Ghost https://ghost.org/ https://ghost.org/ It's more for prose than ecommerce but it's really pleasant to use and great for headless through its GraphQL interface. I recently wrote a tutorial on how to use it with Gatsby & AWS serverless infrastructure so that everything is self-hosted but without the overhead of operating servers. https://docs.stackery.io/docs/tutorials/jamstack-ghostgatsby/ https://docs.stackery.io/docs/tutorials/jamstack-ghostgatsby...
- remotesynth 6y ago
  Any git-based CMS would not have vendor locking (i.e. Forestry or Netlify CMS as two examples) since they are only an editing layer on top of content and data files in your git repo. Netlify CMS is also open source. There are limitations to using a git-based solution (reusability of content within a site or reusing content on a mobile app for example) but no vendor lockin.
- colbyfayock 6y ago
  there are a lot of good options here: https://headlesscms.org/ https://headlesscms.org/ i personally use Netlify CMS for my website. it's not as feature rich as some other options, but for a personal blog, it gets the job done, and it's open source
  - poyu 6y ago
    Thanks for that link, will take a look!
bitxbit 6y ago
I guess there’s some use case for Jamstack static generators but unless you do frequent builds just building vanilla HTML is my preference.

84 points by colbyfayock 6y ago

'an unexpected error has occured' I hope you get it up and running again soon, because I am very curious to know what your handbook is all about.

colbyfayock 6y ago
:o where are you seeing that, on the homepage? it's loading for me
- eurvin 6y ago
  I get it in Safari 12.1.2 (12607.3.10) on the mac. It works correctly in Firefox for me now.
  - colbyfayock 6y ago
    that's so strange - sorry you're experiencing that. im not having any issues on my mac's safari :( glad FF is working for you though i'll try to see if i can figure out a way to reproduce

easton 6y ago

What’s the expected knowledge before you read this?

colbyfayock 6y ago
For the book - I don't think there really is a high expectation of knowledge, except maybe just general web development from a high level. The hope for the informational part is to get anyone acquainted with it For the tutorials - the expectation is familiarity with Javascript and probably React, given the examples are React, though I walk through each steps with the code changes
- Cederfjard 6y ago
  Edit: Pardon me! I think I encountered some weirdness on mobile, I couldn’t scroll very far down. After a reload I’m seeing more. ——- I’m seeing very little about the actual content of the book on the page. Could you please detail a little bit more about what’s actually covered? What apps are you building in those tutorials? Etc.
  - colbyfayock 6y ago
    sorry i heard there are some issues with the site but i haven't been able to reproduce to fix :( please let me know if you hvae more questions!

aosaigh 6y ago

Who is the Jamstack for in your opinion? I'm a web developer that makes a lot of apps and marketing sites for small to medium businesses and I find it very hard to justify the added complexity of a Jamstack architecture - there's just too many moving parts. It seems to me you need a few things: - A dedicated development team to manage the stack - Enough traffic to justify the complexity - Regular content publishing to make use of the build pipeline - A need for speed beyond what's regularly acceptable Great work anyway on the book, it's good to see people charging for curated knowledge.

nicoburns 6y ago
Added complexity? At its simplest, Jamstack is just a static site generator. A service like Netlify will do the entire build pipeline for you (for free) just by pointing it at the git repo. Or if you want to DIY the hosting, then all you have to do is find somewhere that can host static files. Jamstack is largely about removing complexity.
- aosaigh 6y ago
  At its simplest yes. But if you are proposing this as a solution to a client, they will likely want to edit content. That will have to happen on a headless CMS instance. That's whole new stack to maintain alongside. You then need to set that up and configure the SPA to talk to it (GraphQL/Apollo?). When I come back to client project in a month, is all this still going to be working ...? Maybe, but it's certainly not less complex then a traditional Wordpress site. So I'm wondering what are the criteria for using Jamstack successfully? As you said it could be that it's good for simple static sites but not great for more complex content-drive sites - I don't know, that's what I'm asking.
  - Pandabob 6y ago
    Obviously it depends a lot on which CMS you're using and I can imagine there being a lot of complexity involved. That said, setting up something like Contentful and integrating it with NextJS is roughly a day or two of work if you're doing it for the first time. And it all works over REST so you don't have to worry about GraphQL. You can even do "previews" now with Next thanks to preview mode: https://next-preview.now.sh/ https://next-preview.now.sh/

nanna 6y ago

This looks great. People interested may also want to take a look at Andy Bell's 11ty book, which is more of a general introduction to web development and the jamstack: https://piccalil.li/course/learn-eleventy-from-scratch/ https://piccalil.li/course/learn-eleventy-from-scratch/

colbyfayock 6y ago
Andy Bell is fantastic, great rec

z3t4 6y ago

You dont need that much tooling. A static site generator will do. Build your site with vanilla HTML or markdown. Use web micro-services for widgets like search, comments, contact-form, etc.

colbyfayock 6y ago
for sure - that's definitely a valid solution. it all depends on the goals you're trying to meet

bauerd 6y ago

The invention of the "JAM stack" is one of the greatest marketing stunts I know of. Kudos to Netlify for rebranding HTML+AJAX

skc 6y ago
The problem that Netlify has is that they are simply a feature of the big cloud providers. Microsoft is already testing the waters with their own offering and I'm sure AWS and Google are as well. I'm not sure Netlify will survive the onslaught.
- colbyfayock 6y ago
  i think there's a lot of truth to that - but they do is so fantastically well there are a LOT of pain points to deal with rolling out all that is included with the base netlify offering hosting a static site is pretty easy - but configuring routing between cloudfront and s3 can be complicated so that the reequests don't always reference the root index.html creating an autodeploy infrastructure can be challenging as well, tools like github actions might make that a little easier, but there are a lot of considerations there it also makes these kinds of solutions more accessible to developers who might not have the understanding or interest to set up that kind of infrastructure. front end devs can build sites, connect, and go with little fuss
  - lowdose 6y ago
    I second this. Players like Netlify and Digital Ocean have a ridiculous amount of mindshare for solving a certain problem faster without the complexity that the big cloud providers bring. I think the market is larger for simplified services without the IAM and S3 cruft, especially when you have to educate the client on the solution.
  - Rapzid 6y ago
    Netlify is impressively slick and streamlined.. It took like 5 minutes to host a Nuxt app from a private repo with SSL.. And that includes setting up the Netlify account. Their redirects are a pain point though.

rishav_sharan 6y ago

I like the idea of JAMstack and will likely use it for simple toy projects. But I do not like the idea of promoting paid products on HN. this link is basically just an ad telling users to "buy the book". There is nothing for me to read, learn or discuss on the landing page unless I buy the book.

projektfu 6y ago
The upvoting/downvoting mechanism should be sufficient unless you have a scenario where people are upvoting titles without reading the page. Note to author: perhaps more enticing would be to have 4 examples, the first being a free preview of the book and rest would require payment. Then people could evaluate your tutorial style.
- colbyfayock 6y ago
  thanks - thats a good point - i plan on releasing the first tutorial free actually - i just haven't had the time to get that out yet, that'll be hopefully posted on freecodecamp.org in the next couple of days

poyu 6y ago

Can anyone point me to a good headless CMS solution that doesn't introduce vendor lock in? I've tried Contenful and I only got nothing but good things to say about it. Probably something open source and self hosted.

aosaigh 6y ago
Have you looked at Craft? It has headless-mode via a GraphQL API.
ryancoleman 6y ago
I really like Ghost https://ghost.org/ https://ghost.org/ It's more for prose than ecommerce but it's really pleasant to use and great for headless through its GraphQL interface. I recently wrote a tutorial on how to use it with Gatsby & AWS serverless infrastructure so that everything is self-hosted but without the overhead of operating servers. https://docs.stackery.io/docs/tutorials/jamstack-ghostgatsby/ https://docs.stackery.io/docs/tutorials/jamstack-ghostgatsby...
remotesynth 6y ago
Any git-based CMS would not have vendor locking (i.e. Forestry or Netlify CMS as two examples) since they are only an editing layer on top of content and data files in your git repo. Netlify CMS is also open source. There are limitations to using a git-based solution (reusability of content within a site or reusing content on a mobile app for example) but no vendor lockin.
colbyfayock 6y ago
there are a lot of good options here: https://headlesscms.org/ https://headlesscms.org/ i personally use Netlify CMS for my website. it's not as feature rich as some other options, but for a personal blog, it gets the job done, and it's open source
- poyu 6y ago
  Thanks for that link, will take a look!

bitxbit 6y ago

I guess there’s some use case for Jamstack static generators but unless you do frequent builds just building vanilla HTML is my preference.