Deploy to Netlify with GitHub Actions
Tags: githubactions, netlify, devops
Published: 2023-04-04 21:25:16

Some time ago, I decided to put a tools directory in the source repo for my website. I didn’t really want to let Netlify redeploy my site each time I modified a script in there, and I already knew how to deploy to Netlify manually, so I figure why not let GitHub Actions handle it for me? I could write my own workflows to publish on my own terms and have much more control over the process. Here’s how it works.
## Create PAT and get the Site ID
Before you can build a workflow, you’ll need some info from Netlify. The first thing is a personal access token that is used to authenticate with the service. To get this, log into Netlify, click your **profile** in the upper right and go to **User settings**.
![](https://wpms.brianmorrison.me/brianmorrison-me/wp-content/uploads/sites/3/2023/04/image.jpg)
Next go to **Settings**, then **Applications**. Click **New access token**.
![](https://wpms.brianmorrison.me/brianmorrison-me/wp-content/uploads/sites/3/2023/04/image.png)
Finally, give your token a name and click **Generate token**. You’ll be presented with the token. Copy it before you leave this screen as you wont be able to see it again.
![](https://wpms.brianmorrison.me/brianmorrison-me/wp-content/uploads/sites/3/2023/04/image-1.png)
Next you’ll need to grab the Site ID of the site you want to deploy. This assumes you already have a site configured. To get it, open the site and find the **Site settings** tab. The Site ID will be on the first screen in the **Site information** section. Copy this value for later.
![](https://wpms.brianmorrison.me/brianmorrison-me/wp-content/uploads/sites/3/2023/04/image-2.jpg)
## Setup actions secrets
Next up, we need to add the two values above into the repositories Action secrets. This prevents you from having to save them into the code of the repo. To do this, open the repo in GitHub. Then click **Settings**, then **Secrets and variables**, then **Actions**.
In that view, click **New repository secret**.
![](https://wpms.brianmorrison.me/brianmorrison-me/wp-content/uploads/sites/3/2023/04/image-2-1.jpg)
You’ll be adding two secrets:
- `NETLIFY_AUTH_TOKEN` The personal access token you created earlier.
- `NETLIFY_SITE_ID`  The Site ID from earlier.
## Build the action
To create the action, create a new file in your repo named `.github/workflows/deploy-prod.yaml` and add the following contents:
```
name: Deploy prod
on:
  workflow_dispatch:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Netlify CLI
        run: npm install -g netlify-cli
      - name: Install deps
        run: npm install
      - name: Deploy
        run: npm run deploy:prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
```
This action will build and deploy the production version of your website whenever any commits are pushed to the `main` branch of your repo. This will occur on standard pushes or when pull requests are merged if you prefer that flow.
You can also configure a second action to publish to an alternate branch. For instance I also have `.github/workflows/deploy-dev.yaml` to deploy changes made to the `dev` branch into Netlify branch URL. This allows me to test my changes before I merge changes into the production branch:
```
name: Deploy dev
on:
  workflow_dispatch:
  push:
    branches:
      - dev
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Netlify CLI
        run: npm install -g netlify-cli
      - name: Install deps
        run: npm install
      - name: Build
        run: netlify build
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - name: Deploy
        run: netlify deploy --alias dev # this adds a 'dev--' prefix to my URL for testing
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
```
Notice how much of the workflow is the same, with the exception of the branch trigger and the `--alias` set on the Deploy step.