Skip to main content
whitep4nth3r logo

25 Jun 2023

6 min read

How I deploy my website using my Apple Watch

TL:DR; a serverless function and build hook on Netlify, and an Apple Shortcut.

The TL;DR is that I can deploy my website using my voice on any of my Apple devices by asking Siri to run a shortcut. And I feel like a genius when I do it. Here’s a demo that I did whilst live streaming on Twitch:

Click the video above to play

But Salma, why on earth would you do this?

My website is a static site built with Eleventy, and I used to redeploy my website manually (🫠) each time I went online or offline on Twitch, so that my homepage would update with current or previous stream information. Shortly after, I automated the redeployment using a build hook on Netlify triggered by my Twitch bot, and just for fun, I added a button to my Elgato Stream Deck to redeploy my website whenever I needed to. And when I discovered that you could trigger any GET request via Apple Shortcuts, my party trick was born. Here’s how it’s done.

Create a new project — or use an existing one

For the next steps in this guide, you’ll need an existing project on Netlify that you want to redeploy via this ✨ magic ✨. This tutorial also assumes you’re comfortable with basic JavaScript and git version control (and you’ve connected your project on Netlify via git), and you use an Apple device with the Shortcuts app.

If you’re new to Netlify, check out the Getting Started with Netlify guide, which will help you learn how to deploy a demo project on Netlify to make it available on the web. It will also introduce some of Netlify’s key features including serverless functions and environment variables — which you’ll use in this tutorial.

Once you’ve got a site live on Netlify, you’re ready to go!

Create a build hook

Build hooks give you a unique URL you can use to trigger a new site build on Netlify with an HTTP POST request. Select your site in Netlify, click on Site configuration, Build & deploy, and scroll down to Build hooks. Click on Add build hook, choose a name for your build hook (such as Function deploy), and click Save.

Adding a new build hook on Netlify with the name Function deploy, building the main branch.

You’ll now see your build hook in the list. Copy this value as we'll need it in the next step.

Build hooks list in Netlify showing one build hook named function deploy.

Add environment variables for security

To prevent unauthorised redeployments of your site caused by bots and crawlers, or anyone who might view your code online, we’re going to store and use two environment variables for your site: the build hook value, and a secret query parameter that the serverless function will check for before it triggers a deploy.

In the site configuration area in Netlify, click on Environment variables. Click on Add variable, Add a single variable, add BUILD_HOOK_URL as the key, and your build hook URL that you just created as the value. Click Create variable to save it.

Netlify UI showing adding a new environment variable with the name BUILD_HOOK_URL and the value of the build hook configured earlier.

Next, add another environment variable. This will be the secret URL parameter that we’ll check for in the serverless function. Name it BUILD_HOOK_SECRET and give it a value. This value can be anything you choose, but to remain non-guessable it should be similar to a secure password. You can use a random string generator, or make one yourself.

Add a new environment variable interface on netlify with the name BUILD_HOOK_SECRET and an example value of make_this_really_secure.

Create a serverless function

Serverless functions on Netlify are automatically detected and deployed with your site when you add JavaScript files to a netlify/functions directory. Open up your project in your IDE of choice. If you’re not already using serverless functions, add a netlify directory to the root of your project, and inside that, a functions directory. Inside that, add a new file named deployme.js.

When deployed, this function file will automatically be available to make a GET request to at https://yoursite.netlify.app/.netlify/functions/deployme. Add the following code to deployme.js and let’s walk it through.

// /netlify/functions/deployme.js

exports.handler = async function (event, context) {
if (event.queryStringParameters.secret === process.env.BUILD_HOOK_SECRET) {
const response = await fetch(process.env.BUILD_HOOK_URL, {
method: "POST",
});

return {
statusCode: 200,
body: "Site is deploying!",
};
} else {
return {
statusCode: 403,
body: "Access denied! Please include the correct secret URL parameter.",
};
}
};

To redeploy a site using the build hook we set up earlier, we’ll make a GET request to this serverless function URL (i.e. open it in a web browser) that includes the BUILD_HOOK_SECRET as a secret parameter on the URL, for example: https://yoursite.netlify.app/.netlify/functions/deployme?secret=make_this_really_secure.

The first line of the function checks for this secret on the URL. If the secret isn’t found or doesn’t match, we return an HTTP 403 status code (forbidden), and do nothing. If the correct secret is found, we make a POST request to the BUILD_HOOK_URL using fetch, return an HTTP 200 status code (ok), and send a success message in the response.

Note: Node 18 is now the default Node version for all sites on Netlify when you have not specified an alternative. If you’re using a Node version prior to 18, you’ll need to install node-fetch in your project, and import it at the top of this file. Instructions are in this previous post: How to deploy your Netlify site with an Elgato Stream Deck.

Next, push up the new code to Netlify via git. View your deploy logs to see Netlify automatically detect and build your new serverless function!

Netlify deploy log showing functions bundling, packaging functions from netlify functions directory, deployme.js.

Test the endpoint in your browser

Let’s check it works! When the deployment is complete, visit the new serverless function endpoint in your browser with the secret URL parameter (e.g. https://yoursite.netlify.app/.netlify/functions/deployme?secret=make_this_really_secure), and you’ll see your success message. Go back to your Netlify site deploy list, and you’ll see that a new build has started! You’ll also notice that the name of the build hook you created earlier will be displayed as the deploy trigger.

An entry in the Netlify deploy list showing the main branch was built, triggered by hook: function deploy.

You're now ready to set up an Apple Shortcut to redeploy your website!

Add an Apple Shortcut

Open the Shortcuts app on your Apple device of choice, and click the plus button to add a new shortcut. Give the shortcut a name, and search for Expand URL in the search field. Add that action to the shortcut, and give it the value of your serverless function URL, complete with the secret URL parameter.

Apple shortcut interface showing a new Expand URL action has been added to the new deploy website shortcut, populated with the value of the deploy me URL and the secret URL parameter.

You can now click this shortcut button, or use Spotlight to redeploy your website, too!

Apple shortcuts window showing the deploy website tile. You can click this to run it.

Next, make sure that iCloud sync is on for your shortcuts and give it a little while to sync. 🤞🏼

Apple shortcut settings window, showing iCloud sync checked.

Deploy your website with your voice!

When your shortcuts have synced, you’re ready to wow everyone with your party trick! Ask your Apple Watch, iPhone, HomePod — or anywhere where Siri is enabled — by saying “Hey Siri! Shortcut: Deploy website,” and watch in awe and amazement as your site is redeployed to Netlify! And you, too, can feel like a genius.

Note: I edited out the “shortcut” word from the demo video to prevent my website deploying over and over again when I watched the video without headphones!

Like weird newsletters?

Join undefined subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Subscribe

Salma sitting cross legged on a sofa, holding a microphone, looking up into the right of the space.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, videos, live coding and open source projects.

Related posts

15 Feb 2022

How to deploy your Netlify site with an Elgato Stream Deck

Use a little serverless function to kick off a site build with a button.

Tutorials 4 min read →

18 Jan 2022

How to use really long environment variables in Netlify functions

Here’s how you can use a Netlify build plugin to use longer environment variables in your functions.

Tutorials 4 min read →