How to deploy your Netlify site with an Elgato Stream Deck

I’m a big fan of my Elgato Stream Deck. Not only is it incredibly useful whilst I’m live streaming, but I also use it to give me quick access to some of the things I do regularly, such as opening particular URLs in my browser or toggling my office lighting. And this got me thinking — what if I could kick off a site build on Netlify at the press of a button? And as it turns out, we can do this with a little serverless function! Let’s take a look.

Create a build hook

The first thing we’re going to do is create a new build hook. Build hooks give you a unique URL you can use to trigger a build with an HTTP POST request.

Head on over to your site settings in Netlify, click on Build & deploy and scroll down to Build hooks. Click on Add build hook, choose a name for your new hook — I chose Function deploy — and click Save.

Copy your new build hook to your clipboard for the next part.

Add two new environment variables

We want to make sure that we add some protection around this deploy mechanism. We don’t want bots and naughty people deploying your site without your knowledge! We’re going to create two new environment variables — or secrets — that only you and your code have access to.

DEPLOY_ME_URL

First, let’s add the build hook URL secret. You can do this in the Netlify UI by navigating to your site settings > Build & deploy > Environment. Click on Edit variable, add DEPLOY_ME_URL as the key, and your build hook URL as the value. Click Save.

You can also do this using the Netlify CLI. In your terminal, use the following command, making sure to switch out {https://your_build_hook} for the build hook URL you created above.

netlify env:set DEPLOY_ME_URL {https://your_build_hook}

DEPLOY_ME_SECRET

To keep our serverless function secure, we’re going to set it up to run only if a particular query parameter is passed into the function on the URL. This string 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 build one yourself.

Add your deploy secret as an environment variable using the key DEPLOY_ME_SECRET. Now we’re ready to write some code!

Create the serverless function

If you don’t have any Netlify functions in your project already, create a functions directory at the root of your project and name it functions. This will automatically be picked up by Netlify when you deploy. Add a new file into this directory, and name it deployme.js.

Install node-fetch

Run the following command in your terminal. This will install node-fetch for use in the function.

npm install node-fetch

Add the following code to deployme.js, and let’s unpack what it does.

// /functions/deployme.js

const fetch = require("node-fetch");

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

    return {
      statusCode: 200,
      body: "Your site is now deploying! Have a great day!",
    };
  } else {
    return {
      statusCode: 403,
      body: "Access denied! Please include the correct secret URL parameter.",
    };
  }
};

The first line of the function checks if the secret query parameter on the URL (?secret=) matches the value you added as the DEPLOY_ME_SECRET. If the secret doesn’t match, the function returns an HTTP 403 (forbidden), and the site doesn’t deploy.

If the secret value matches the environment variable, the function makes a post request to your DEPLOY_ME_URL, tells you to have a nice day, and kicks off a site build in Netlify!

Next, commit and push your code to your repo. Once the code has deployed to Netlify, it’s time to hook up the Stream Deck!

Set up the Stream Deck button

Head on over to your Stream Deck profile, and drag a new Website button to your deck. Name the button whatever you like, and add the following URL, making sure to add your own site domain and DEPLOY_ME_SECRET. You can choose to check "GET request in background" but I prefer to open a browser window for that sweet, sweet feedback.

https://{yoursitedomain}/.netlify/functions/deployme.js?secret={DEPLOY_ME_SECRET}

And you’re done! Whenever you click that button, a new site deploy on Netlify will begin! If you’d like to read more about serverless functions on Netlify, be sure to check out the docs, and let me know on Twitter if you’ve found any other fancy uses for a Stream Deck!