How to deploy your Netlify site with an Elgato Stream Deck
Tags: serverless
Published: 2022-02-15 16:24:00

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](https://docs.netlify.com/configure-builds/build-hooks/?utm_campaign=devex-san&utm_source=whitep4nth3r-blog&utm_content=docs-build-hooks). 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**.

![A screenshot showing adding a new build hook named Function deploy.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rwwpc5ztj8dm5rn8xw3.png)

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

![A screenshot showing the new build hook has been added.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlnxxsshnym50frgo0i0.png)

## 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**.

![A screenshot showing the deploy me url has been added into the UI, ready to click save.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb1gu8p1h2bh73femg0r.png)

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.

```bash
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`.

![A screenshot of a file tree in VSCode showing the functions directory with deployme.js inside.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icu17kfc1ypf22hi6dqs.png)

### Install node-fetch

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

```bash
npm install node-fetch
```

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

```javascript
// /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.

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

![A screenshot of a new Stream Deck profile with a new website button added, with the label DEPLOY.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqrqobu4g2aggcawgyf3.png)

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](https://functions.netlify.com/?utm_campaign=devex-san&utm_source=whitep4nth3r-blog&utm_content=docs-functions), and [let me know on Twitter](https://twitter.com/whitep4nth3r) if you’ve found any other fancy uses for a Stream Deck!

{% twitter 1493530786498232323 %}