Skip to main content
  1. posts/

Netlify, Slack and IFTTT Webhooks for fun and ... profit?

·706 words·4 mins·
Christian Mohn
vninja site news hugo netlify integration
Author
Christian Mohn
IT veteran, podcaster, author, and blogger from Bergen, Norway.

A few months ago I migrated this site from Wordpress to Hugo, hosted by Netlify, and I have been very happy with it since. As mentioned in the previous post, I utilize webhooks from Netlify to send alerts to Slack whenever a new build is triggered.

The setup for this, on Netlify, is very simple but I figured I would write a walk-through anyway.

Configuring Slack notifications on Netlify
#

In order to configure outgoing webhooks from Netlify to Slack, you first need to create the incoming one in Slack.

  1. Log into api.slack.com and find Incoming Webhooks under Features.
  2. Select Add New Webhook to Workspace, and select which slack channel you want this webhook to post to. Click on Authorize
  3. You will now get redirected back to the Incoming Webhooks page, and under Webhook URL you should now find a new URL. Copy this URL.
  4. Log into your Netlify account, and go to Settings > Build & deploy > Deploy Notifications
  5. Click on Add build hook, and select Slack integration.
  6. Now you select what event you want to send to Slack, you can chose between Deploy Started, Deploy succeeded, Deploy failed, Deploy locked and Deploy unlocked. I’ve configured all of these to use the same webhook URL, but you can use different ones for each if you want — but that also requires more than one Incoming Webhook in Slack.
  7. Pick the event you want, and paste your Slack Incoming Webhook URL into the form.
    Netlify Webhook
  8. That is it. Next time your site builds through Netlify, you should see status messages (for the events you selected) appear in your Slack!
    Slack Incoming Webhook

Pretty easy, especially since Netlify really has done all the work here and made the integration built-in. All you need is a working incoming Slack Webhook, and some configuration.

Since I set this up, I’ve been looking at other ways of integrating with Netlify, and webhooks.

IFTTT integration
#

Netlify also allows you to create Incoming Webhooks, like Slack, but for now it seems the only option is what they call Build Hooks. Basically a Build Hook is a secret URL that triggers a new build of someone accesses it. Normally I build this site automatically when commiting new content to GitHub, but it’s also nice to have a way of triggering it manually without having to log into Netlify. In order do do this, I can use a service like IFTTT to trigger it whenever we want to.

  1. Log into Netlify and go to Settings > Build & deploy > Build Hooks
  2. Click on Add build hook, and give it a name and select which branch you want to use. I use master, since that’s where i build this site from, and click on Save
    Netlify build hook
  3. Once the build hook has been created, you will see the URL (I’ve anonymized it here, naturally)
    Netlify build hook URL
  4. Log into IFTTT and create a new applet under My Applets > New Applet.
  5. Click on +this and search for the Button widget
    IFTTT Button widget
  6. Next up is the Choose trigger step. Click on Button press, and then +that.
  7. For the action service, search for webhooks and select it.
    IFTTT Button widget
  8. Select Make a web request, give it a name and put the URL you got from Netlify in step 3, and paste it into the URL field. Change the Method to POST and scroll down and save it — You do need to put anything into the other fields, only Name, URL and Method are required for this to work.
    IFTTT Button widget
  9. There we are. We now have an IFTTT button that triggers a new build.

The nifty thing about this, is that it enables me to trigger a build from my phone, or even my watch!

IFTTT Button widget on iPhone

IFTTT Button widget on Apple Watch

Having some fun
#

Integrations like this opens up a wide variety of thigs you can do; I guess I can get my kitchen lights to blink when a new build is successful, or even change the color to red if a build fails. My wife would most likely veto that one though, so I’ll have to think of something a bit more subtle for a future project. Perhaps some integrations with vRealize Automation are in order…

Oh and yeah, I’m not so sure of the profit part of the title either.

Related

Migrating From Wordpress to Hugo
·756 words·4 mins
Christian Mohn
site migration vninja site news hugo wordpress
Hello, My Name Is Hugo (Montoya)
·445 words·3 mins
Christian Mohn
site migration vninja site news hugo wordpress
vNinja.net available also on vNinja.com
·77 words·1 min
Christian Mohn
News site vninja