JamStack-Gatsby is a GatsbyJS starter boilerplate that introduces the JamStack architecture through a blog backed by a headless CMS and connected to GraphQL. The project was prepared for a tech talk hosted by adesso Austria and serves as a hands-on example for developers already familiar with Node.js frameworks who want to see what the JamStack can do.
What is JamStack-Gatsby?
JamStack-Gatsby is a starter project that demonstrates the JamStack approach by combining GatsbyJS with a headless CMS and GraphQL. It takes local Markdown files and Instagram posts as content sources and outputs a static blog with PWA and offline support. The project relies on Gatsby's plugin system and is meant to be a learning resource rather than a production template.
Key Features
- Markdown blogging — gatsby-transformer-remark turns Markdown files into HTML pages, so content lives in plain-text files.
- Sass/SCSS styling — gatsby-plugin-sass compiles Sass and SCSS stylesheets without extra configuration.
- Instagram feed — gatsby-source-instagram pulls Instagram posts into the site's data layer.
- Optimized images — gatsby-image, gatsby-plugin-sharp, and gatsby-transformer-sharp work together to deliver responsive images scaled to the screen size.
- gZip compression — gatsby-plugin-zopfli compresses built assets with gZip to reduce file sizes.
- PWA manifest — gatsby-plugin-manifest generates a web app manifest, making the blog installable as a Progressive Web App.
- Offline support — gatsby-plugin-sw registers a service worker so the site works offline.
- Filesystem sourcing — gatsby-source-filesystem loads content from the local filesystem as a GraphQL data source.
Who is it for?
- Node.js developers — Those comfortable with JavaScript and Node.js who want to see how Gatsby, GraphQL, and a headless CMS fit together in a JamStack project.
- Tech talk presenters — Speakers preparing a demo for a JamStack or Gatsby event can use this repository as a tangible starting point.
- Blog authors — Individuals who want a static blog with PWA features and the ability to pull in Instagram content can use this starter as a foundation.
What can you do with it?
- Learn JamStack: Run the starter locally to trace how Markdown files become pages and how Instagram data is fetched into GraphQL queries.
- Build a personal blog: Adapt the existing layout and content sources to create a blog that publishes from local files and Instagram.
- Present a live demo: Use
yarn startandyarn run buildto demonstrate Gatsby's development and build workflows during a talk or workshop.
How does it work?
Install dependencies with yarn install, then start the development server with yarn start. For a production build, run yarn run build. The project requires Node.js version 10.15.3 or later and gatsby-cli version 2.5.12 or later.
FAQ
What are the prerequisites for using JamStack-Gatsby?
You need Node.js version 10.15.3 or higher and gatsby-cli version 2.5.12 or higher installed on your system.
How do I develop with this starter?
After running yarn install, use yarn start to launch the development server. This gives you hot reloading and live preview.
Does the starter support Markdown files?
Yes, it uses gatsby-transformer-remark to transform Markdown content into HTML, so you can write posts in Markdown and have them rendered as blog pages.
Can this blog run offline?
Yes, it includes gatsby-plugin-sw for service worker support and gatsby-plugin-manifest for PWA capabilities, enabling offline access after the first visit.
What styling options are included?
The project includes gatsby-plugin-sass, so you can write styles in Sass or SCSS. It also bundles node-sass as the compiler.
