Netlify + Gatsby + Cosmic JS + Automatic builds with Webhooks


Gatsby is the new hotness for static sites, and Netlify is an amazing service that helps you deploy static sites with some brilliant automation capabilities.  Combine these with the new Cosmic JS source plugin for Gatsby and you have a technology stack that scales well and is highly performant.

In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic builds on content edits using Cosmic JS Webhooks.


Install the App

Check out the Gatsby Blog available on Cosmic JS.  Install the app:
1. Create a new Bucket
2. In the left sidenav of your Bucket Dashboard, click "Apps"
3. Install the Gatsby Blog


Deploy to Netlify

After you install the Gatsby Blog app, go to "Web Hosting" in the left sidenav of your Bucket Dashboard.  Scroll down and click "Deploy to Netlify".

Set Environment Variables

In Netlify, go to Your Netlify Site > Settings > Build and Deploy > Build environment variables.  Set a COSMIC_BUCKET environment variable to your Cosmic JS Bucket slug.  Add your COSMIC_READ_KEY  (Optional) if you've set this in Your Cosmic JS Bucket > Settings.


Do It Live!

Your site should now be live and look like this:


Set Up Hooks

Now let's make sure to tell Netlify to rebuild our site whenever content is edited in Cosmic JS.  To do this, first go into Netlify's deploy settings area located in Your Netlify Site > Settings > Build and Deploy > Build Hooks and add a Build Hook:

Save, then copy and paste the generated build hook URL into your Cosmic JS Bucket > Webhooks

This will trigger a rebuild whenever content is created, edited or deleted in Cosmic JS.


Now Edit Content!

Now you'll notice whenever you add / edit / remove content in your Cosmic JS Bucket, a magic message is sent to Netlify to tell it to rebuild your awesome Gatsby site!

In Conclusion

With Gatsby, Netlify and Cosmic JS, building fast, scalable and highly performant websites has never been easier. With webhooks and Netlify's built-in continuous deployment, you can enjoy an amazing automated developer experience.

Let me know if you have any questions!  Reach out to me on Twitter and message me on Slack.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Cosmic JS Extensions make it possible to extend the functionality of Cosmic JS for both the developer and editor. A recent example built by the Cosmic JS Community is the Google Analytics Extension, which allows team members to easily see analytics insights directly in their Cosmic JS Bucket.
Tony Spiro, co-founder and CEO of Cosmic JS, presented "Building for Team Success with Content-Powered Apps" to illustrate the build vs. buy concept of software development in the API-first microservices movement. The full video is embedded below and runs approximately 45 minutes.
In this article Iā€™m going demonstrate how to add new form submissions to Hubspot when you Publish Objects in your Cosmic JS Bucket.
Metadata is extremely important for SEO as it speaks to search engines directly from each page crawled, to communicate important information or request a specific action from the search engine. Cosmic JS provides an easy modal to manage media metadata.
A primary benefit of managing content API-first is that your content is transformed into portable and scalable content objects, available via API endpoint to create workflows with the third-party applications that your team uses.
Thanks to everyone in Dallas who came out to the Vuetiful Holiday Meetup at Simple Media, featuring Vuetify, Netlify and Cosmic JS. šŸŽ‰