Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/BolajiAyodeji/awesome-jamstack

:notebook_with_decorative_cover: Curated list of resources: books, videos, articles, speaker decks, tools about using the Jamstack.
https://github.com/BolajiAyodeji/awesome-jamstack
List: awesome-jamstack
api awesome-list cms community headless-cms jamstack javascript markup modern-web open-source resources static-site tutorials website
Last synced: about 2 months ago
JSON representation
:notebook_with_decorative_cover: Curated list of resources: books, videos, articles, speaker decks, tools about using the Jamstack.
Host: GitHub
URL: https://github.com/BolajiAyodeji/awesome-jamstack
Owner: BolajiAyodeji
Created: 2019-09-16T16:12:06.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-10-11T14:38:40.000Z (11 months ago)
Last Synced: 2024-05-23T07:09:20.126Z (4 months ago)
Topics: api, awesome-list, cms, community, headless-cms, jamstack, javascript, markup, modern-web, open-source, resources, static-site, tutorials, website
Homepage: https://bolajiayodeji.github.io/awesome-jamstack/
Size: 123 KB
Stars: 146
Watchers: 6
Forks: 37
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project

ultimate-awesome - awesome-jamstack - :notebook_with_decorative_cover: Curated list of resources: books, videos, articles, speaker decks, tools about using the Jamstack. (Other Lists / PowerShell Lists)
README

        # Awesome JAMstack [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

![](https://repository-images.githubusercontent.com/208843661/aa3deb80-6311-11ea-9d41-b2cdbbde72a9)

[JAMstack](https://jamstack.org/) is a Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

*List inspired by the [awesome](https://github.com/sindresorhus/awesome) list and [awesome-nextjs](https://github.com/unicodeveloper/awesome-nextjs) list*

## Table of Contents

- [Official Resources](#official-resources)

- [Community](#community)

- [Useful Tools](#useful-tools)

- [Articles](#articles)

- [Speaker Decks](#speaker-decks)

- [Books](#books)

- [Videos](#videos)

- [Examples](#examples)

## Official Resources

* [Official Website](https://jamstack.org/)

* [JAMstack Radio](https://www.netlify.com/tags/podcast/)

* [JAMstack Boilerplates](https://templates.netlify.com/)

* [Netlify Blog](https://www.netlify.com/blog/)

* [What is the JAMstack?](https://jamstack.org/#what)

* [Why the JAMstack?](https://jamstack.org/#why)

* [How do I get started?](https://jamstack.org/#how)

* [JAMstack best practices](https://jamstack.org/best-practices/)

* [JAMstack resources](https://jamstack.org/resources/)

## Community

* [Jamstack Community](https://jamstack.org/community)

* [Jamstack Discord Community](https://discord.gg/jamstack)

* [Jamstack Conf](https://jamstackconf.com)

* [Jamstack Conf on Twitter](https://twitter.com/jamstackconf)

* [Jamstack_dev at Reddit](https://www.reddit.com/r/JAMstack_dev/)

* [Jamstack at Linkedin](https://www.linkedin.com/groups/8722827/)

* [GitHub](https://github.com/jamstack)

* [YouTube](https://www.youtube.com/channel/UC8bRyfU7ycLXnEBfvdorpUg)

## Useful Tools

* [StaticGen](https://www.staticgen.com/) - A List of Static Site Generators for JAMstack Sites

* [Headless CMS](https://headlesscms.org/) - A List of Content Management Systems for JAMstack Sites

* [Netlify](https://www.netlify.com/) - Everything you need to build fast, modern websites from local development

to global deployment.

* [StaticKit](https://statickit.com/) - Form Hosting for JAMstack Sites

* [Zeit](https://zeit.co/) - The easiest way to deploy websites 

* [Disqus](https://disqus.com/) - Blog comment hosting service for your JAMstack sites

* [Netlify Forms](https://www.netlify.com/products/forms/) - Manage forms and submissions without any server-side code or JavaScript.

* [Stackbit](https://www.stackbit.com/) - Create a CMS-connected JAMstack site deployed to Netlify in minutes.

* [JAMstackThemes.dev](https://jamstackthemes.dev/) - A list of themes for JAMstack sites for most popular static site generators.

* [JAMstack CMS](https://github.com/jamstack-cms/jamstack-cms) - JAMstack CMS gives you the ability to deploy a full stack serverless website in just a few minutes.

* [Commerce Layer](https://commercelayer.io) - Headless commerce platform and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, or IoT device, with ease.

* [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components and Jamstack websites visually.

* [Snipcart](https://snipcart.com) - Shopping cart you can simply add to any of your favorite website stack.

## Articles

 * [Introducing JAMstack: The Modern Web Architecture](https://www.blog.bolajiayodeji.com/introducing-jamstack-the-modern-web-architecture/)

 * [JAMstack Fundamentals: What, What And How](https://www.smashingmagazine.com/2019/06/jamstack-fundamentals-what-what-how/)

 * [What is JAMstack and why you should try it](https://www.giftegwuenu.com/what-is-ja-mstack-and-why-you-should-try-it)

 * [Static Websites + JAMstack = <3](https://julian.is/article/static-websites-and-jamstack/)

 * [How to Build a JAMstack Website](https://cosmicjs.com/blog/how-to-build-a-jamstack-website)

 * [Useful APIs to know when building a JAMstack app](https://blog.logrocket.com/jamstack-app-apis/)

 * [Go static: 5 reasons to try JAMstack on your next project](https://builtvisible.com/go-static-try-jamstack/)

 * [JAMstack for Clients: On Benefits & Static Site CMS](https://snipcart.com/blog/jamstack-clients-static-site-cms)

 * [A JAMstack-ready CMS](https://www.contentful.com/r/knowledgebase/jamstack-cms/)

 * [Building JAMStack powered react-static sites using GraphQL on Postgres](https://hashnode.com/post/building-jamstack-powered-react-static-sites-using-graphql-on-postgres-cjs1unp39001fjps2z5ux0k9g)

 * [Isomorphic Rendering on the JAMstack](https://www.hawksworx.com/blog/isomorphic-rendering-on-the-jam-stack/)

 * [Dynamic product management in a static e-commerce workflow](https://www.contentful.com/blog/2016/02/10/snipcart-middleman-contentful)

 * [Secure and Scalable: An Introduction to JAMstack](https://scotch.io/tutorials/secure-and-scalable-an-introduction-to-jamstack)

 * [New to JAMstack? Everything You Need to Know to Get Started](https://snipcart.com/blog/jamstack)

 * [Zero to HTTP/2 with AWS and Hugo](https://habd.as/zero-to-http-2-aws-hugo/)

 * [Getting Started With Hugo and Deploying to Netlify](https://www.blog.bolajiayodeji.com/getting-started-with-hugo-and-deploying-to-netlify/)

 * [What is the JAMstack?](https://flaviocopes.com/jamstack/)

 * [A JAMstack-ready CMS](https://www.contentful.com/r/knowledgebase/jamstack-cms/)

 * [JAMstack Basics: How to Create a Gatsby Starter with Contentful and Deploy to Netlify](https://itnext.io/jamstack-basics-how-to-create-a-gatsby-starter-with-contentful-and-deploy-to-netlify-846354cc74bc)

 * [The Promise of JAMStack](https://blog.strapi.io/jamstack/)

 * [JAMstack vs Isomorphic Server Side Rendering](https://www.netlify.com/blog/2017/06/06/jamstack-vs-isomorphic-server-side-rendering/)

 * [New to JAMstack? How to make a site from A to Z](https://www.netlify.com/blog/2016/11/15/new-to-jamstack-how-to-make-a-site-from-a-to-z/)

 * [From WordPress to JAMstack: How to make your website 10x faster](https://hackernoon.com/from-wordpress-to-jamstack-how-to-make-your-website-10x-faster-e363abc46e2d)

 * [JAMstack: The What, The Why and The How](https://scotch.io/tutorials/jamstack-the-what-the-why-and-the-how)

 * [Adopting the JAMStack: Building CMS-backed static websites with Vue or React](https://www.codegram.com/blog/a-jamstack-journey-headless-content-management-with-vue-react/)

 * [Build a JAMstack Personal Blog with Headless Ghost 2.0 CMS & Gatsby](https://josebrowne.com/tutorial-static-blog-using-headless-ghost-2-0-gatsby-netlify/)

 * [How to Build a JAMstack Website using Vue.js, Nuxt.js and Cosmic JS](https://cosmicjs.com/articles/how-to-build-a-jamstack-website-using-vuejs-nuxtjs-and-cosmic-js-jws3mpy1)

 * [A Ghost Demo: How to Go Headless with Ghost CMS [Tutorial]](https://hashnode.com/post/a-ghost-demo-how-to-go-headless-with-ghost-cms-tutorial-cjy4fxmmr0001rts1pyp2ch2s)

 * [Next.js E-Commerce Tutorial: Quick Shopping Cart Integration](https://hashnode.com/post/nextjs-e-commerce-tutorial-quick-shopping-cart-integration-cjy074x9l0017zxs17tn6yp4d)

 * [How to Build a Blog using React Static and Cosmic JS](https://sumitkharche.hashnode.dev/how-to-build-a-blog-using-react-static-and-cosmic-js-cjxewj3xa000kjms1c9s0qaae)

 * [How to build a Static Serverless Blog for Free😇](https://sujaykundu.hashnode.dev/how-to-build-a-static-serverless-blog-for-free-cjwgqd96u001ezws1v8linwdk)

 * [JAMStack vs serverless web apps](https://fettblog.eu/jamstack-vs-serverless-web-apps/)

 * [JAMstack? More like SHAMstack.](https://css-tricks.com/jamstack-more-like-shamstack/)

 * [Static File Hosting Doesn’t Have To Be So… Static](https://css-tricks.com/static-file-hosting-doesnt-have-to-be-so-static/)

 * [Modern Jamstack Hosting and Deployment Solutions](https://bejamas.io/blog/jamstack-hosting-deployment/)

 * [Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a Fallback](https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/)

 * [Hey, let’s create a functional calendar app with the JAMstack](https://css-tricks.com/hey-lets-create-a-functional-calendar-app-with-the-jamstack/)

 * [What Is JAMstack](https://buttercms.com/blog/what-is-jamstack)

 * [Building a JAMstack Blog: Gatsby and ButterCMS on Netlify](https://buttercms.com/blog/building-a-jamstack-blog-gatsby-and-buttercms-on-netlify)

 * [Making Sense of Jamstack & Serverless Architecture](https://snipcart.com/blog/jamstack-serverless-backend)

 * [Jamstack Ecosystem](https://bejamas.io/blog/jamstack-ecosystem/)

 

## Speaker Decks

* [Rise of the JAMstack](https://speakerdeck.com/biilmann/rise-of-the-jamstack)

* [Harnessing the power of the JAMstack with a Headless CMS](https://slides.com/bolajiayodeji/jamstack-headless-cms#/)

* [Introducing JAMstack - What we talk about when we talk about modern web tools](https://slides.com/khriztianmoreno/jamstack#/)

* [The JAMstack in 2019: Why (and How) to Get Started](https://slides.com/khriztianmoreno/the-jamstack-in-2019-why-and-how-to-get-started#/)

* [Breaking Down Best Practices for JAMstack](https://noti.st/jemimaabu/gNF5op/breaking-down-best-practices-for-jamstack)

* [Is your JAMstack app really JAMstack?](https://slides.com/obinnaekwuno/deck#/)

* [React and the JAMstack - Reactathon Fundamentals 2018](https://speakerdeck.com/biilmann/react-and-the-jamstack-reactathon-fundamentals-2018)

* [The Sweetness of the JAMstack](https://speakerdeck.com/kristinbaumann/the-sweetness-of-the-jamstack)

* [JAMstack Cheatsheet](https://speakerdeck.com/peduarte/jamstack-cheatsheet)

* [Developing with WordPress, the JAMstack way](https://speakerdeck.com/emaildano/developing-with-wordpress-the-jamstack-way)

* [Lightning Talk - JAMStack](https://speakerdeck.com/unicodeveloper/lightning-talk-jamstack)

* [New Stack Lunch Presentation](https://speakerdeck.com/biilmann/new-stack-lunch-presentation)

* [The JAMstack - Smashing Conf Freiburg 2017](https://speakerdeck.com/biilmann/the-jamstack-smashing-conf-freiburg-2017)

* [What the JAMstack?](https://speakerdeck.com/frontendne/what-the-jamstack)

## Books

* [Modern Web Development on the JAMstack](https://www.netlify.com/oreilly-jamstack/) - New Techniques for Ultra Fast Sites and Web Applications by Mathias Biilmann & Phil Hawksworth

## Videos

* [Free, educational video courses about various JAMstack projects and technologies](https://jamstack.training)

* [Rise of the JAMstack - Mathias Biillman](https://www.youtube.com/watch?v=uWTMEDEPw8c)

* [The Rise of the JAMstack CMS — Matt Biilmann](https://www.youtube.com/watch?v=IbNvjNtL1Oo)

* [The New Front-end Stack. Javascript, APIs and Markup - Mathias Biillman](https://vimeo.com/163522126)

* [Frontend for a server-less stack - Brian Douglas](https://www.youtube.com/watch?v=XpveOehxvoM)

* [The State of the JAMstack Nation - Sarah Drasner](https://www.youtube.com/watch?v=COAVmST41Q0)

* [Easy Isomorphic Rendering on the JAMstack - Phil Hawksworth](https://www.youtube.com/watch?v=lRg99MH6rhw)

* [Performant web animations — Emily Hayman](https://www.youtube.com/watch?v=vL4Hwp0z9YQ)

* [Why static types in Javascript? — Preethi Kasireddy](https://www.youtube.com/watch?v=E5y2dozTkZU)

* [A Modern Web Landscape — Matt Biilmann, Frances Berriman, and Wilson Miner](https://www.youtube.com/watch?v=8n5D4SDqIck)

* [You need an API: Now what? — Erin McKean](https://www.youtube.com/watch?v=uWOWTwJA4rc)

* [Using Elm to Prototype and Build Web Applications  – David Calavera](https://www.youtube.com/watch?v=Lmg9v2U6-y4)

* [GraphQL: The Mental Model — Dhaivat Pandya](https://www.youtube.com/watch?v=zWhVAN4Tg6M)

* [JWT FTW WTF? – Matt Biilmann](https://www.youtube.com/watch?v=4wOfjF1_j_0)

* [Jammin' with Markdown — David Wells](https://www.youtube.com/watch?v=LcgPRe7rLT4)

* [JAMstack for clients — Brian Douglas](https://www.youtube.com/watch?v=22XKtBjbEvU)

* [What is the JAMStack?](https://www.youtube.com/watch?v=Y8PXMbr0Kqo)

* [JAMstack Tutorial - Full site using Netlify & Hugo](https://www.youtube.com/watch?v=NSts93C9UeE)

* [Jamstack Getting Started Video](https://www.youtube.com/watch?v=3GdI04dLxyQ)

* [How We Talk About the JAMstack - Matt Biilmann](https://www.youtube.com/watch?v=VzQ0d8-nMhw)

* [The All Powerful Front End Developer - Chris Coyier](https://www.youtube.com/watch?v=grSxHfGoaeg)

* [How freeCodeCamp Serves Millions of Learners Using the JAMstack](https://www.youtube.com/watch?v=e5H7CI3yqPY)

* [My Honest Experience from Start to End with the Jamstack... Umm!?](https://www.youtube.com/watch?v=uFXGJ8hVvaU)

* [Jam Stack: The New Kid on the Block - JS Monthly - March 2019](https://www.youtube.com/watch?v=PzXpCNBcofw)

* [Build Modern JAMstack Websites in Minutes - Ben Edwards](https://www.youtube.com/watch?v=AHZjqYFfzyk)

* [What is the JAMstack? - Phil Hawksworth](https://www.youtube.com/watch?v=Opye_qcRdUo)

* [JAMstack Course - Build websites that are simpler, faster, and more secure](https://www.youtube.com/watch?v=A_l0qrPUJds)

## Examples

* [derrickreimer.com](https://derrickreimer.com) - A JAMstack site build with Jekyll and deployed on Netlify. ([source](https://github.com/derrickreimer/site))

* [ecommerce-netlify.netlify.com](https://ecommerce-netlify.netlify.com) - A JAMstack Ecommerce Site built with Nuxt and Netlify Functions. ([source](https://github.com/sdras/ecommerce-netlify))

* [bolajiayodeji.com](https://bolajiayodeji.com) - A JAMstack site built with Nextjs and deployed on Firebase. ([source](https://github.com/BolajiAyodeji/bolajiayodeji.com))

## Contributing

Found an awesome resource, article, blog, video, speaker deck etc.? Please send me a pull request and follow the [contributors guidelines](/CONTRIBUTING.md).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Bolaji Ayodeji}
🖋 📝 📖 🔧

      
_{Derrick Reimer}
🔧 📝

      
_{Ivan Bila}
📖

      
_{Brian Rinaldi}
📖

      
_{Derek Coleman}
📖

      
_{Tamas Piros}
📖

      
_{Genesis Gabiola}
📖

    

    

      
_{Peter Thaleikis}
📖

      
_CookieDuster
📖

      
_{Ludovic Armand}
📖

      
_Dani
📖

    

  

---

**Check out my [blog](https://blog.bolajiayodeji.com), [newsletter](https://bawd.bolajiayodeji.com), or say *hi* on [Twitter](https://twitter.com/iambolajiayo).**

## License


This work is licensed under a Creative Commons Attribution 4.0 International License.