Live demo: https://serene-johnson-0beba2.netlify.com
git clone https://github.com/mozaikio/mozaik-gatsby-example.git && cd mozaik-gatsby-example
yarn develop or
npm run develop
Content type schema
This example is built on a project using the Sample Blog template.
After creating a project on Mozaik, you can find your API endpoint on the Project settings page. You have to create an access token with read permission to be able to query the published documents.
Although in this example the api endpoint url and the access token is hard-coded in the
gatsby-config.js you shouldn't commit this information but get it from environment variables.
Connecting Gatsby to Mozaik
The project uses
gatsby-source-mozaik plugin. You have to define your query to get all required documents and fields in Gatsby.
Generating pages programmatically
As it would be quite tedious work to create every page for each post, we implemented automatic page generation as well. You can check the source in the
gatsby-node.js file and read more about in the Gatsby tutorial
Deploying to Netlify
The built version gets deployed to Netlify every time new code is pushed to the repository. Since both Mozaik and Netlify supports webhooks in their free plan, it is easy to automatically trigger a new build every time a document gets published with Mozaik. (You can also trigger new builds on other events. You can read more about supported events in Mozaik documentation).