I use Gridsome, a static site generator, to create this blog. I wanted to automate my deployment process. My goal was that as soon as I push changes to a github repository the site is build and deployed to my webspace.

Build

To configure the build add a new workflow file e.g. /.github/workflows/build_deploy.yml to your github repo. The build is straight forward. On every push to master, checkout the project, install all packages and run the build script. The build script generates a folder dist which contains the static website.

name: Build & Deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Installing packages
        run: npm install

      - name: Build Gridsome site
        run: npm run-script build

Deploy

For the deployment via ftp I chose rclone. It is a command line tool to transfer files between different cloud storages and supports ftp. e.g. to sync a local folder to a destination we can call: rclone sync localFolder remote:remoteFolder

1. Configure ftp connection

To configure host, password, port, ... for our ftp server follow the steps here. I named my remote webspace.

From the advanced settings section I had to set the --ftp-concurrency to limit the number of simultaneous connections. My provider only allows 10 connections at the same time per user.

2. Set rclone config as Github Secret

To get the location of your rclone config execute rclone config file. Copy the contents to a Github Secret RCLONE_CONF (Project Settings > Secrets) which is used late in our deploy step.

3. Configure rclone in Github Actions workflow

The Github Action for rclone wraps rclone so we can use it in our workflow. The deployment step looks like this.

    steps:
        ...
      - name: Deploy dry-run
        uses: wei/rclone@v1
        env:
          RCLONE_CONF: ${{ secrets.RCLONE_CONF }}
        with:
          args: 'sync /github/workspace/dist webspace:/'

The dist folder must be specified like this /github/workspace/dist. This is because the action runs inside docker container which mounts the workspace directory to /github/workspace/.

Take care, rclone sync deletes files on the destination, use the --dry-run option to check if it behaves like you expect it.

That's it. My complete workflow file looks like this:

name: Build & Deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Installing packages
        run: npm install

      - name: Build Gridsome site
        run: npm run-script build
      
      - name: Deploy dry-run
        uses: wei/rclone@v1
        env:
          RCLONE_CONF: ${{ secrets.RCLONE_CONF }}
        with:
          args: 'sync /github/workspace/dist webspace:/ --dry-run'
      
      - name: Deploy
        uses: wei/rclone@v1
        env:
          RCLONE_CONF: ${{ secrets.RCLONE_CONF }}
        with:
          args: 'sync /github/workspace/dist webspace:/'

# Github Actions

Deploy a Gridsome page using Github Actions, rclone and ftp