Github Actions are really powerful, and can be delightful when combined with Jekyll allowing easy automated deployments on commit to certain branches. This was my first Github action, and I wanted to be able to build my jekyll site that uses Tailwindcss using production settings to my preview site using rsync.

For an actions newbie, this was not completely obvious. Here are the main gotcha’s and the final workflow.

Setup your website to allow SSH login and store it as a repository secret

This zellwk article was really helpful. Key steps for me:

• use rsa not ed25519 for the keygen which did not work for me either
• I used ssh-copy-id to copy the key easily to the website
• store your secret in your repo as a repository secret. Using an environment did not work for me.

Setup your workflow

Key steps for me were:

• make sure you also add in bundle install and npm install when using jekyll gems and tailwindcss.
• add in the correct production env variables for node and jekyll - especially important for tailwindcss which will then reduce the size of the css file.
• the / for your rsync paths matter!

Here’s my final workflow:

name: Jekyll site CI

on:
  push:
    branches: [ "main", "develop" ]
  pull_request:
    branches: [ "main", "develop" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Build the site in the jekyll/builder container
      run: |
        docker run \
        -v $:/srv/jekyll -v $/_site:/srv/jekyll/_site \
        jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && bundle install && npm install && NODE_ENV=production JEKYLL_ENV=production bundle exec jekyll build --future"

    - name: rsync deployment
      uses: burnett01/rsync-deployments@5.2.1
      with:
        switches: -avzr --delete
        path: _site/
        remote_path: ~/${{secrets.REMOTE_HOST }}
        remote_host: ${{ secrets.REMOTE_HOST \}\}
        remote_user: ${{ secrets.REMOTE_USER }}
        remote_key: ${{ secrets.REMOTE_KEY }}

Note: for my website hosting provider the website is served from the ~/domain.name which is why I can just use the REMOTE_HOST secret in both places.