Displaying an Instagram feed with Gatsby [Part 3]

Published November 17, 2020

Introduction

In the final installment of this three-part tutorial, we'll set up a process to trigger a build of our site once a new post goes up on our Instagram account.

Part 1: Load posts from Instagram into a gallery in Gatsby
Part 2: Style the gallery widget
Part 3 (this post): Trigger a build of your site after posting to Instagram

Automating builds

There are a lot of ways to deploy a Gatsby site right now. When I originally wrote Part 1 of this tutorial last year, I used Netlify as the host for my Gatsby site, and I automated my one-off builds through a service called Zapier.

There are a few services that automate the process of monitoring for new posts to your Instagram account and then triggering an action off of that. This post will focus mostly on two of the services that I have the most experience with.

A note about deleted images These methods don't monitor for deletion (only new items being posted), so if you post something to Instagram and then later remove it, you'll have to wait for the next build of your site to see that image removed from your gallery.

Zapier with Netlify

I've set up a Zap on Zapier that you can use to make the connection between your Instagram account and your Netlify site. You can use this Zap with their Free account tier.

My Instagram & Netlify zap: https://zapier.com/shared/d834e0051cdb956e3b201d71ad9719345299cd5d

Zapier will prompt you to log into both your Instagram and Netlify accounts. You'll have to pick your Netlify site from the list, and then test the connection between the two accounts.

The Zap should run and trigger a build within a few minutes of a post being made to Instagram. If you don't want a build to happen instantly (for example, you want a time buffer in case you decide to delete the post), you can add a delay (under the Helper category) as a step between Instagram and Netlify.

IFTTT with Netlify

Within IFTTT, you can create a new applet to look for a new post to your Instagram account, and then trigger a webhook request using Netlify's Build Hooks feature. Setting up an applet like this should be within their Free account tier.

To learn more about Netlify's Build Hooks, check out their official documentation.

In the Netlify dashboard for your site, select Site settings.
In the left column, select Build & deploy. Navigate down the page to the "Build hooks" block. Select the Add build hook button; an inline form should appear.
Give your hook a name that describes what it's for. If you have a specific branch you want to build from, select it. Otherwise, leave it set to "master". Select the Save button.

Copy the https://api.netlify.com/build_hooks/HOOK_ID URL from the Netlify results to your clipboard.
In the IFTTT dashboard, select Create in the main navigation menu.
On the page that loads, select If This (Add). Search for Instagram and select the block for it in the filtered list.
If this is your first time using IFTTT with Instagram, you'll be prompted to log into your Instagram account and authorize the connection between the two services.
After you've authorized IFTTT for Instagram, you'll be redirected. On the page that loads, select the Any new photo by you block in the list of actions.
On the next page, you should see an "If: any new photo by you" block. Select Then That (Add) below it. Search for Webhooks and select the block for it in the filtered list.
On the page that loads, select the Make a web request block.
On the next page, paste the Netlify Build Hook URL into the URL field. For the Method field, select POST. Leave the remaining fields blank, and select the Create action button at the end of the form.

Great! We've created an IFTTT applet that should start a build with Netlify within a few minute sof when we post something to Instagram. In order to test it out, we'll have to make a post. Unlike Zapier, IFTTT doesn't give you a way to really test out the connection between the two services without posting real content.

Conclusion