Triggering a static Next.js build and export with Github Actions

I recently decided to relaunch another of my blogs and move it from Wordpress to another static site generator - this one uses Jekyll. Even though Next.js is not really a static site generator, there are blog starter templates, and you can build and export the whole site as static files (instead of the typical server side rendering).

Before I started to iterate on the layout and design, I wanted to make sure I had the deployments automated, so I chose Github Actions since I was commiting on Github as opposed to the commonly recommended Vercel or Netlify.

The primary steps to build and deploy are:

1. npm install
2. npm build
3. npm export
4. SFTP the static code and assets to my server

So I setup an action based on a node.js build using the following two actions:

• actions/checkout@v2.1.0
• SamKirkland/FTP-Deploy-Action@3.1.1

Here is the file:

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
    - uses: actions/checkout@v2.1.0
    - name: Use Node.js $
      uses: actions/setup-node@v1
      with:
        node-version: $
    - run: npm install
    - run: npm run build --if-present
    - run: npm run export
      env:
        CI: true
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@3.1.1
      with:
        ftp-server: $
        ftp-username: $
        ftp-password: $
        local-dir: dist
        git-ftp-args: --insecure 

I did have to add a .git-ftp-include file with the directory I wanted to copy with SFTP. I found this in the README for the FTP-Deploy-Action. This is what it looked like:

!dist/

If you made it this far, you may as well follow me on LinkedIn: Follow Brian Porter