Deploying a website using webhooks and iOS Shortcuts
Working remotely comes with a few issues. A fairly big one for us was how to deploy our website.
Our website CMS is Craft, but we are using that headlessly. Our front-end is a Gatsby site which pulls in the content from Craft using an API. We wrote about it. This means we need to trigger a build whenever we update site content, like publishing a blog post for example.
When working from the studio, we have a webhook* linked to an Alexa command via IFTTT. This means we can ask Alexa to “trigger website”, she’ll send a request to IFTTT, which will hit a webhook, and trigger a build on AWS Amplify (which is where our site is hosted).
Whilst working from our new (ahem) satellite offices, anyone who needs to write a blog post or publish a new case study needs to be able to trigger a deploy.
I could have asked everyone to fire up their terminal and paste in a CURL command but this felt a bit technical for the non-devs on the team, and to be honest, it isn’t a lot of fun.
We all use iOS and I’ve wanted to find a useful thing to do with the Shortcuts app for a while, so here’s how we set it up to deploy our site...
Setting up a new shortcut is easy
First, open the Shortcuts app and tap on Create Shortcut. Click on the “...” button next to the New Shortcut text and give it a name and tap Done. Next, click Add Action. Search “URL” and click on the URL action to add it to your Shortcut. Copy and Paste your webhook URL into here, then click the Plus button. This will allow us to add another action to pipe the URL to.
Adding a webhook to a URL action
Search “Get Contents of”. You should get a Network action which will let us do something with the URL. Once added, you will probably need to click Show More to view all the options.
Configuring the Get Contents of URL action
For our purposes, we needed to change the Method from GET to POST. We also needed to update the Headers to include the “Content-Type: application/json”. Our webhook doesn’t need any specific data or variables passed to it, so there was no need to add anything to the request body. Different hooks for different folks though, you may need to pass some data here. Otherwise, we’re all done.
You can even "Hey, Siri" your deploy
You should be able to trigger this with Siri without any further fiddling. The first time it runs, Siri asks for permission. For me, this then sent Siri into a nose dive where it couldn’t remember what Shortcut I wanted to trigger. I just REPEATED myself and eventually, it got on with it.
Tada! You can then click on the “...” icon next to your shortcut card in the app, you should be able to open the standard Share Sheet dialog to copy a link so you can let anyone deploy your website whenever they like!** If you feel like expanding on this, you could probably get Shortcuts to tweet about your website update or something if you are that way inclined.
I haven’t dug into Shortcuts in any great depth yet, but they seem pretty cool and powerful. Let us know if you found this useful and if you make anything cool with them.
* A webhook is a fancy URL generated by our hosting provider. If we send something to the address, this will trigger a command on the host server. In our case running a build of our site.
** Please do not do this.