9 ms·

Use Gatsby.js and Headless GraphQL CMS to Make Your JAMstack Site Sweeter

47 points by mcat 8y ago

palerdot 8y ago
> In this conclusion to our 4 part series, you'll learn how to used Gatsby.js and TakeShape to make your JAMstack site sweeter. There is a grammatical typo in the opening headline which should read 'how to use Gatsby.js ...'.
- asprouse 8y ago
  Fixed! Thanks for bringing this to our attention.
nbrempel 8y ago
I’ve been doing some research on headless CMS options. Two other good options are: https://www.netlifycms.org https://www.netlifycms.org And https://docs.ghost.org/api/gatsby/ https://docs.ghost.org/api/gatsby/
- lgregg 8y ago
  Contentful is also a good option.
- devalnor 8y ago
  Here is a long list of headless CMS https://headlesscms.org/ https://headlesscms.org/
- atombender 8y ago
  There's also Sanity, which supports self-hosting of the app itself and is mostly open source: https://www.sanity.io https://www.sanity.io (Disclosure: I'm involved in the company, but not in a major way.)
- marcammann 8y ago
  We've been recommending Contentful and DatoCMS (https://www.datocms.com/ https://www.datocms.com/) to our customers. Most pick Contentful due to the perception of being enterprise (Replacing AEM, Sitecore etc.). DatoCMS seems to enjoy a lot of warm reception by people who are coming from Squarespace/Wordpress/Drupal and want something headless but still geared towards Web.
- sgallant 8y ago
  https://forestry.io https://forestry.io just launched beta support for Gatsby (like today). Forestry.io is a CMS for markdown + Git, where all edits get committed to your repo. If you want access to the beta, message the folks at support@forestry.io.
gk1 8y ago
For anyone wondering about the meaning of "JAMstack": https://jamstack.org/ https://jamstack.org/
- mcat 8y ago
  JAMstack Javascript APIs Markup Coined by Matt Biilmann, Co-founder of Netlify
  - sho 8y ago
    > Javascript APIs Markup In other words, every single page application ever built?
    - monicatie 8y ago
      The https://jamstack.org/ https://jamstack.org/ page lists some examples of apps that are not JAMstack. Isomorphic sites and sites built with a CMS are examples.
- sarahmike 8y ago
  I never thought that it's possible but my best friend is making $10000 every month working this job and she told me about it. www.cyberjobsonline.com
projectramo 8y ago
I have a vague idea of why this may be useful, but I wish people who upvote a new(ish) tech would take the time to put it in context as to why they upvoted it, why it is interesting, and why anyone should read about it. I am kind of sold on "static" sites, but why is this particular stack and set of solutions so exciting? (As opposed to using, say, Rails on Heroku (which I use as a default baseline), or even the alternative setup (Vuejs version of Gatsby -- I am sure there is one by now, and whatever competes with graphQL).
- seanwilson 8y ago
  > I am kind of sold on "static" sites, but why is this particular stack and set of solutions so exciting? (As opposed to using, say, Rails on Heroku It's exciting because it's a static site and not using something like Rails? The static site approach still isn't that well known. Right now, I try to use static sites wherever I can because of their reduced complexity.
  - projectramo 8y ago
    Can you say a little about your use case. Are you equally excited about Gatsby and Jekyll(/Hugo/Pelican)?
    - azangru 8y ago
      > Are you equally excited about Gatsby and Jekyll(/Hugo/Pelican)? Gatsby, Jekyll and Hugo are all in roughly the same category of static site generators. However. The exciting thing about Hugo is how incredibly fast it builds. The exciting thing about Gatsby is how ridiculously pleasant it is to work with for a modern frontend developer. It has hot module replacement, built in (so you don't need to reload the page to see your changes). It has various plugins (e.g. for various CSS preprocessors, for the dev version of Netlify CMS, for image resizing, etc.), which just work. Its graphql-based data layer, which allows you to query files from the file system just as easily as data from a third-party api during page build, is beautiful. It is also insanely configurable, is written in a frontend-friendly language (JavaScript) and exposes hooks to its internals, which is a great help if you are a JavaScript developer (as opposed to Hugo, which is rather rigid and Go-based). But this comes at a cost of about 60-kB runtime. So if your static site is not insanely interactive to justify this payload, your performance-obsessed friends will point their finger at you, and Alex Russell will tweet another facepalm emoji. Although Gatsby is trying its best to reap as many performance benefits as it possibly can by automatically splitting javascript on per-page basis, and adding link rel=preload tags to prefetch the assets before the user tries to navigate to particular pages. As for Jekyll, I can't think of anything exciting about it.
cphoover 8y ago
Who comes up with these names: "JAMstack"?? It's like someone is trying to market/brand programming paradigms that otherwise would be common patterns.
- mcat 8y ago
  Matt Billman, the Co-founder of Netlify came up with the name to try to counteract the perceptions of non-technical users that Static Sites meant sites that didn't have any kind of dynamic functionality. He came up with the name in his living room over beers. Neat podcast episode about the etymology here - https://www.heavybit.com/library/podcasts/jamstack-radio/ep-2-the-jamstack-origin-story/ https://www.heavybit.com/library/podcasts/jamstack-radio/ep-...
brimtown 8y ago
Sharing a blog post that my team wrote on some of the benefits we saw from using Gatsby / a static frontend architecture when building https://shopflamingo.com https://shopflamingo.com: https://medium.com/harrys-engineering/how-we-used-gatsby-js-to-build-a-blazing-fast-e-commerce-site-a9818145c67b https://medium.com/harrys-engineering/how-we-used-gatsby-js-... In short, being able to scale to as many requests as your CDN can handle, with none of the operational overhead of a traditional web server, is really really nice.
- specialp 8y ago
  Thanks for that post. That is impressive that you went with the best/fastest tech available today rather than just leverage what was done with Harrys. I am interested with what you actually used for the e-commerce part of it. Are you interacting with your systems that you made for Harrys with GraphQL or did you use a JAM stack orientated solution like gocommerce?
  - brimtown 8y ago
    Thank you! We have plans to build many more frontends in the coming years, so it felt like an appropriate time to step back and see what other solutions were out there. For the e-commerce part of it, it's a custom API written in Scala that handles our inventory, warehouse, and fulfillment needs. As well as interfacing with Stripe for actual order processing. Want to get that team to write their own blog post as several people have asked about it!
mlukaszczyk 8y ago
Gatsby did a great job incorporating Mikhail Novikov's work on the Gatsby Source GraphQL plugin. Kudos! If you want to see another example of Gatsby powered by a GraphQL native CMS, check out the following tutorial: https://docs.graphcms.com/tutorials/developers/gatsby_and_graphcms https://docs.graphcms.com/tutorials/developers/gatsby_and_gr...

47 points by mcat 8y ago

> In this conclusion to our 4 part series, you'll learn how to used Gatsby.js and TakeShape to make your JAMstack site sweeter. There is a grammatical typo in the opening headline which should read 'how to use Gatsby.js ...'.

asprouse 8y ago
Fixed! Thanks for bringing this to our attention.

nbrempel 8y ago

I’ve been doing some research on headless CMS options. Two other good options are: https://www.netlifycms.org https://www.netlifycms.org And https://docs.ghost.org/api/gatsby/ https://docs.ghost.org/api/gatsby/

lgregg 8y ago
Contentful is also a good option.
devalnor 8y ago
Here is a long list of headless CMS https://headlesscms.org/ https://headlesscms.org/
atombender 8y ago
There's also Sanity, which supports self-hosting of the app itself and is mostly open source: https://www.sanity.io https://www.sanity.io (Disclosure: I'm involved in the company, but not in a major way.)
marcammann 8y ago
We've been recommending Contentful and DatoCMS (https://www.datocms.com/ https://www.datocms.com/) to our customers. Most pick Contentful due to the perception of being enterprise (Replacing AEM, Sitecore etc.). DatoCMS seems to enjoy a lot of warm reception by people who are coming from Squarespace/Wordpress/Drupal and want something headless but still geared towards Web.
sgallant 8y ago
https://forestry.io https://forestry.io just launched beta support for Gatsby (like today). Forestry.io is a CMS for markdown + Git, where all edits get committed to your repo. If you want access to the beta, message the folks at support@forestry.io.

gk1 8y ago

For anyone wondering about the meaning of "JAMstack": https://jamstack.org/ https://jamstack.org/

mcat 8y ago
JAMstack Javascript APIs Markup Coined by Matt Biilmann, Co-founder of Netlify
- sho 8y ago
  > Javascript APIs Markup In other words, every single page application ever built?
  - monicatie 8y ago
    The https://jamstack.org/ https://jamstack.org/ page lists some examples of apps that are not JAMstack. Isomorphic sites and sites built with a CMS are examples.
sarahmike 8y ago
I never thought that it's possible but my best friend is making $10000 every month working this job and she told me about it. www.cyberjobsonline.com

projectramo 8y ago

I have a vague idea of why this may be useful, but I wish people who upvote a new(ish) tech would take the time to put it in context as to why they upvoted it, why it is interesting, and why anyone should read about it. I am kind of sold on "static" sites, but why is this particular stack and set of solutions so exciting? (As opposed to using, say, Rails on Heroku (which I use as a default baseline), or even the alternative setup (Vuejs version of Gatsby -- I am sure there is one by now, and whatever competes with graphQL).

seanwilson 8y ago
> I am kind of sold on "static" sites, but why is this particular stack and set of solutions so exciting? (As opposed to using, say, Rails on Heroku It's exciting because it's a static site and not using something like Rails? The static site approach still isn't that well known. Right now, I try to use static sites wherever I can because of their reduced complexity.
- projectramo 8y ago
  Can you say a little about your use case. Are you equally excited about Gatsby and Jekyll(/Hugo/Pelican)?
  - azangru 8y ago
    > Are you equally excited about Gatsby and Jekyll(/Hugo/Pelican)? Gatsby, Jekyll and Hugo are all in roughly the same category of static site generators. However. The exciting thing about Hugo is how incredibly fast it builds. The exciting thing about Gatsby is how ridiculously pleasant it is to work with for a modern frontend developer. It has hot module replacement, built in (so you don't need to reload the page to see your changes). It has various plugins (e.g. for various CSS preprocessors, for the dev version of Netlify CMS, for image resizing, etc.), which just work. Its graphql-based data layer, which allows you to query files from the file system just as easily as data from a third-party api during page build, is beautiful. It is also insanely configurable, is written in a frontend-friendly language (JavaScript) and exposes hooks to its internals, which is a great help if you are a JavaScript developer (as opposed to Hugo, which is rather rigid and Go-based). But this comes at a cost of about 60-kB runtime. So if your static site is not insanely interactive to justify this payload, your performance-obsessed friends will point their finger at you, and Alex Russell will tweet another facepalm emoji. Although Gatsby is trying its best to reap as many performance benefits as it possibly can by automatically splitting javascript on per-page basis, and adding link rel=preload tags to prefetch the assets before the user tries to navigate to particular pages. As for Jekyll, I can't think of anything exciting about it.

cphoover 8y ago

Who comes up with these names: "JAMstack"?? It's like someone is trying to market/brand programming paradigms that otherwise would be common patterns.

mcat 8y ago
Matt Billman, the Co-founder of Netlify came up with the name to try to counteract the perceptions of non-technical users that Static Sites meant sites that didn't have any kind of dynamic functionality. He came up with the name in his living room over beers. Neat podcast episode about the etymology here - https://www.heavybit.com/library/podcasts/jamstack-radio/ep-2-the-jamstack-origin-story/ https://www.heavybit.com/library/podcasts/jamstack-radio/ep-...

brimtown 8y ago

Sharing a blog post that my team wrote on some of the benefits we saw from using Gatsby / a static frontend architecture when building https://shopflamingo.com https://shopflamingo.com: https://medium.com/harrys-engineering/how-we-used-gatsby-js-to-build-a-blazing-fast-e-commerce-site-a9818145c67b https://medium.com/harrys-engineering/how-we-used-gatsby-js-... In short, being able to scale to as many requests as your CDN can handle, with none of the operational overhead of a traditional web server, is really really nice.

specialp 8y ago
Thanks for that post. That is impressive that you went with the best/fastest tech available today rather than just leverage what was done with Harrys. I am interested with what you actually used for the e-commerce part of it. Are you interacting with your systems that you made for Harrys with GraphQL or did you use a JAM stack orientated solution like gocommerce?
- brimtown 8y ago
  Thank you! We have plans to build many more frontends in the coming years, so it felt like an appropriate time to step back and see what other solutions were out there. For the e-commerce part of it, it's a custom API written in Scala that handles our inventory, warehouse, and fulfillment needs. As well as interfacing with Stripe for actual order processing. Want to get that team to write their own blog post as several people have asked about it!

mlukaszczyk 8y ago

Gatsby did a great job incorporating Mikhail Novikov's work on the Gatsby Source GraphQL plugin. Kudos! If you want to see another example of Gatsby powered by a GraphQL native CMS, check out the following tutorial: https://docs.graphcms.com/tutorials/developers/gatsby_and_graphcms https://docs.graphcms.com/tutorials/developers/gatsby_and_gr...