The new Cosmic dashboard is here!
Test drive it now →

Netlify + Gatsby + Cosmic + Automatic builds with Webhooks

Community Articles
Community Articles Netlify + Gatsby + Cosmic + 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 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 Webhooks.


Install the App

Check out the Gatsby Blog available on Cosmic.  Install the app:
1. Create a new Bucket
2. Choose the option to start with an App
3. Install the Gatsby Blog


Deploy to Netlify

After you install the Gatsby Blog app, install the Deploy to Web Extension.

Find the Netlify option and add the Gatsby Blog GitHub URL:
https://github.com/cosmicjs/gatsby-blog-cosmicjs


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 Bucket slug.  Add your COSMIC_READ_KEY  (Optional) if you've set this in Your Cosmic 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.  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 Bucket > Webhooks

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


Now Edit Content!

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

In Conclusion

With Gatsby, Netlify and Cosmic, 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.

You may also like


5 Website Boilerplates: React, Node.js, Vue, Nuxt.js and Next.js
An application for book lovers to view a list of their favorite books.
Cosmic makes it easy to deploy your websites and applications to the web. You can deploy an app from any git repository to the Cosmic App Server from any Bucket. Cosmic uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart an Angular Ecommerce App. This Angular ecommerce app allows you to process orders from customers and accept Stripe payments for goods and services. Manage inventory in the Cosmic Dashboard.
Salesforce is the world’s leading enterprise CRM application. Zapier gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Cosmic-powered content with Salesforce is easy and requires zero coding.
Step by step guide to creating a Cosmic extension that imports data

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales