Awesome
<div align="center">Awesome JAMstack
This list is inspired by the awesome list and awesome-technical-writing lists
</div>[!TIP] JAMstack 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.
Table of Contents
Official Resources
- Official Website
- JAMstack Radio
- JAMstack Boilerplates
- Netlify Blog
- What is the JAMstack?
- Why the JAMstack?
- How do I get started?
- JAMstack best practices
- JAMstack resources
Community
- Jamstack Community
- Jamstack Discord Community
- Jamstack Conf
- Jamstack Conf on Twitter
- Jamstack_dev at Reddit
- Jamstack at Linkedin
- GitHub
- YouTube
Useful Tools
- StaticGen - A List of Static Site Generators for JAMstack Sites
- Headless CMS - A List of Content Management Systems for JAMstack Sites
- Netlify - Everything you need to build fast, modern websites from local development to global deployment.
- StaticKit - Form Hosting for JAMstack Sites
- Zeit - The easiest way to deploy websites
- Disqus - Blog comment hosting service for your JAMstack sites
- Netlify Forms - Manage forms and submissions without any server-side code or JavaScript.
- Stackbit - Create a CMS-connected JAMstack site deployed to Netlify in minutes.
- JAMstackThemes.dev - A list of themes for JAMstack sites for most popular static site generators.
- JAMstack CMS - JAMstack CMS gives you the ability to deploy a full stack serverless website in just a few minutes.
- Commerce Layer - 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 - Powerful design tool for building your React components and Jamstack websites visually.
- Snipcart - Shopping cart you can simply add to any of your favorite website stack.
Articles
- Introducing JAMstack: The Modern Web Architecture
- JAMstack Fundamentals: What, What And How
- What is JAMstack and why you should try it
- Static Websites + JAMstack = <3
- How to Build a JAMstack Website
- Useful APIs to know when building a JAMstack app
- Go static: 5 reasons to try JAMstack on your next project
- JAMstack for Clients: On Benefits & Static Site CMS
- A JAMstack-ready CMS
- Building JAMStack powered react-static sites using GraphQL on Postgres
- Isomorphic Rendering on the JAMstack
- Dynamic product management in a static e-commerce workflow
- Secure and Scalable: An Introduction to JAMstack
- New to JAMstack? Everything You Need to Know to Get Started
- Zero to HTTP/2 with AWS and Hugo
- Getting Started With Hugo and Deploying to Netlify
- What is the JAMstack?
- A JAMstack-ready CMS
- JAMstack Basics: How to Create a Gatsby Starter with Contentful and Deploy to Netlify
- The Promise of JAMStack
- JAMstack vs Isomorphic Server Side Rendering
- New to JAMstack? How to make a site from A to Z
- From WordPress to JAMstack: How to make your website 10x faster
- JAMstack: The What, The Why and The How
- Adopting the JAMStack: Building CMS-backed static websites with Vue or React
- Build a JAMstack Personal Blog with Headless Ghost 2.0 CMS & Gatsby
- How to Build a JAMstack Website using Vue.js, Nuxt.js and Cosmic JS
- A Ghost Demo: How to Go Headless with Ghost CMS [Tutorial]
- Next.js E-Commerce Tutorial: Quick Shopping Cart Integration
- How to Build a Blog using React Static and Cosmic JS
- How to build a Static Serverless Blog for Free😇
- JAMStack vs serverless web apps
- JAMstack? More like SHAMstack.
- Static File Hosting Doesn’t Have To Be So… Static
- Modern Jamstack Hosting and Deployment Solutions
- Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a Fallback
- Hey, let’s create a functional calendar app with the JAMstack
- What Is JAMstack
- Building a JAMstack Blog: Gatsby and ButterCMS on Netlify
- Making Sense of Jamstack & Serverless Architecture
- Jamstack Ecosystem
Speaker Decks
- Rise of the JAMstack
- Harnessing the power of the JAMstack with a Headless CMS
- Introducing JAMstack - What we talk about when we talk about modern web tools
- The JAMstack in 2019: Why (and How) to Get Started
- Breaking Down Best Practices for JAMstack
- Is your JAMstack app really JAMstack?
- React and the JAMstack - Reactathon Fundamentals 2018
- The Sweetness of the JAMstack
- JAMstack Cheatsheet
- Developing with WordPress, the JAMstack way
- Lightning Talk - JAMStack
- New Stack Lunch Presentation
- The JAMstack - Smashing Conf Freiburg 2017
- What the JAMstack?
Books
- Modern Web Development on the 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
- Rise of the JAMstack - Mathias Biillman
- The Rise of the JAMstack CMS — Matt Biilmann
- The New Front-end Stack. Javascript, APIs and Markup - Mathias Biillman
- Frontend for a server-less stack - Brian Douglas
- The State of the JAMstack Nation - Sarah Drasner
- Easy Isomorphic Rendering on the JAMstack - Phil Hawksworth
- Performant web animations — Emily Hayman
- Why static types in Javascript? — Preethi Kasireddy
- A Modern Web Landscape — Matt Biilmann, Frances Berriman, and Wilson Miner
- You need an API: Now what? — Erin McKean
- Using Elm to Prototype and Build Web Applications – David Calavera
- GraphQL: The Mental Model — Dhaivat Pandya
- JWT FTW WTF? – Matt Biilmann
- Jammin' with Markdown — David Wells
- JAMstack for clients — Brian Douglas
- What is the JAMStack?
- JAMstack Tutorial - Full site using Netlify & Hugo
- Jamstack Getting Started Video
- How We Talk About the JAMstack - Matt Biilmann
- The All Powerful Front End Developer - Chris Coyier
- How freeCodeCamp Serves Millions of Learners Using the JAMstack
- My Honest Experience from Start to End with the Jamstack... Umm!?
- Jam Stack: The New Kid on the Block - JS Monthly - March 2019
- Build Modern JAMstack Websites in Minutes - Ben Edwards
- What is the JAMstack? - Phil Hawksworth
- JAMstack Course - Build websites that are simpler, faster, and more secure
Examples
- derrickreimer.com - A JAMstack site build with Jekyll and deployed on Netlify. (source)
- ecommerce-netlify.netlify.com - A JAMstack Ecommerce Site built with Nuxt and Netlify Functions. (source)
- bolajiayodeji.com - A JAMstack site built with Nextjs and deployed on Firebase. (source)
Contributing
Found an awesome resource, article, blog, video, speaker deck etc.? Please send me a pull request and follow the contributors guidelines.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://bolajiayodeji.com"><img src="https://avatars2.githubusercontent.com/u/30334776?v=4?s=100" width="100px;" alt="Bolaji Ayodeji"/><br /><sub><b>Bolaji Ayodeji</b></sub></a><br /><a href="#content-BolajiAyodeji" title="Content">🖋</a> <a href="#blog-BolajiAyodeji" title="Blogposts">📝</a> <a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=BolajiAyodeji" title="Documentation">📖</a> <a href="#tool-BolajiAyodeji" title="Tools">🔧</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.derrickreimer.com"><img src="https://avatars2.githubusercontent.com/u/341387?v=4?s=100" width="100px;" alt="Derrick Reimer"/><br /><sub><b>Derrick Reimer</b></sub></a><br /><a href="#tool-derrickreimer" title="Tools">🔧</a> <a href="#blog-derrickreimer" title="Blogposts">📝</a></td> <td align="center" valign="top" width="14.28%"><a href="https://ivanbila.github.io/"><img src="https://avatars0.githubusercontent.com/u/13482373?v=4?s=100" width="100px;" alt="Ivan Bila"/><br /><sub><b>Ivan Bila</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=IvanBila" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="http://remotesynthesis.com"><img src="https://avatars1.githubusercontent.com/u/216712?v=4?s=100" width="100px;" alt="Brian Rinaldi"/><br /><sub><b>Brian Rinaldi</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=remotesynth" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/derekcoleman"><img src="https://avatars1.githubusercontent.com/u/1326001?v=4?s=100" width="100px;" alt="Derek Coleman"/><br /><sub><b>Derek Coleman</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=derekcoleman" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.fullstacktraining.com"><img src="https://avatars1.githubusercontent.com/u/2042718?v=4?s=100" width="100px;" alt="Tamas Piros"/><br /><sub><b>Tamas Piros</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=tpiros" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://genesisgabiola.now.sh/"><img src="https://avatars0.githubusercontent.com/u/8042418?v=4?s=100" width="100px;" alt="Genesis Gabiola"/><br /><sub><b>Genesis Gabiola</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=genesisgabiola" title="Documentation">📖</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://peterthaleikis.com"><img src="https://avatars0.githubusercontent.com/u/8433587?v=4?s=100" width="100px;" alt="Peter Thaleikis"/><br /><sub><b>Peter Thaleikis</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=spekulatius" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/CookieDuster"><img src="https://avatars.githubusercontent.com/u/51830273?v=4?s=100" width="100px;" alt="CookieDuster"/><br /><sub><b>CookieDuster</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=CookieDuster" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/ludovic-armand"><img src="https://avatars.githubusercontent.com/u/77077373?v=4?s=100" width="100px;" alt="Ludovic Armand"/><br /><sub><b>Ludovic Armand</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=ludovic-armand" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.dsolemorera.com/"><img src="https://avatars.githubusercontent.com/u/3201518?v=4?s=100" width="100px;" alt="Dani"/><br /><sub><b>Dani</b></sub></a><br /><a href="https://github.com/BolajiAyodeji/awesome-jamstack/commits?author=dsolemorera" title="Documentation">📖</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->Check out my blog, newsletter, or say hi on Twitter.
License
Awesome Jamstack © 2019 by Bolaji Ayodeji is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license.
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>