Deploy Sage theme to Digital Ocean Droplet with Github Action

This website is powered by WordPress and runs on a Digital Ocean Droplet with a LEMP stack. The custom theme, built with the Sage starter theme, is automatically deployed using GitHub Actions.

GitHub Actions Workflow

name: CD

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Node
        uses: actions/setup-node@v2
        with:
          node-version: 18.x

      - name: Cache npm dependencies
        uses: actions/cache@v2
        with:
          path: '~/.npm'
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Build assets
        run: |
          npm install
          npm run build --if-present

      - name: Setup Composer
        uses: shivammathur/setup-php@v2
        with:
          php-version: 8.1

      - name: Install dependencies
        run: composer update --no-dev

      - name: Deploy to server
        env:
          user: ${{ secrets.SSH_USER }}
          host: ${{ secrets.SSH_HOST }}
          key: ${{ secrets.DEPLOY_KEY }}
          dest: '${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/path/to/theme/directory'
        run: |
          echo "${{ env.key }}" > deploy_key
          chmod 600 ./deploy_key
          rsync -charvz --delete \
          -e 'ssh -i ./deploy_key -o StrictHostKeyChecking=no' \
          --exclude deploy_key \
          --exclude .git/ \
          --exclude .github/ \
          --exclude .gitignore \
          --exclude .gitattributes \
          --exclude .editorconfig \
          --exclude .env \
          --exclude node_modules/ \
          --exclude .vscode/ \
          --exclude .yarnrc.yml \
          --exclude bud.config.js \
          --exclude package.json \
          --exclude package-lock.json \
          --exclude README.md \
          --exclude .budfiles \
          --exclude LICENSE.md \
          --exclude tailwind.config.cjs \
          --exclude jsconfig.json \
          --exclude .prettierrc.json \
          ./ ${{ env.dest }}

Workflow Explanation

The GitHub Actions workflow, named CD for “Continuous Deployment,” is triggered on every push to the main branch. The build job runs on ubuntu-latest and comprises several steps to set up Node, cache npm dependencies, build assets, set up Composer for PHP 8.1, install composer dependencies, and finally deploy to the server.

name: CD

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

The workflow starts with a series of steps to set up the development environment. It checks out the main branch, sets up NodeJS with version 18.x, and caches npm dependencies for faster subsequent builds.

- uses: actions/checkout@v2
- name: Set up Node
  uses: actions/setup-node@v2
  with:
    node-version: 18.x

- name: Cache npm dependencies
  uses: actions/cache@v2
  with:
    path: '~/.npm'
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

The subsequent steps focus on building assets. The npm install command installs dependencies, and npm run build --if-present builds the assets for the Sage theme.

- name: Build assets
  run: |
    npm install
    npm run build --if-present

The workflow then shifts to setting up Composer for PHP 8.1 and installing dependencies without dev dependencies.

- name: Set up Composer
  uses: shivammathur/setup-php@v2
  with:
    php-version: 8.1

- name: Install dependencies
  run: composer update --no-dev

Finally, the deployment step involves copying files to the Digital Ocean droplet. The environment variables, such as the SSH user, host, key, and destination path, are securely stored as secrets in GitHub. This step is inspired (read: copied) from a great article about CI:CD on WordPress. You can read more about it here.

The key part is actually the env.dest; make sure it points to your theme folder. As you can see, I excluded a bunch of files that are not necessary so my theme folder only has what it needs.

- name: Deploy to server
  env:
    user: ${{ secrets.SSH_USER }}
    host: ${{ secrets.SSH_HOST }}
    key: ${{ secrets.DEPLOY_KEY }}
    dest: '${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/path/to/theme/directory'
  run: |
    echo "${{ env.key }}" > deploy_key
    chmod 600 ./deploy_key
    rsync -charvz --delete \
      -e 'ssh -i ./deploy_key -o StrictHostKeyChecking=no' \
      --exclude deploy_key \
      --exclude .git/ \
      --exclude .github/ \
      --exclude .gitignore \
      --exclude .gitattributes \
      --exclude .editorconfig \
      --exclude .env \
      --exclude node_modules/ \
      --exclude .vscode/ \
      --exclude .yarnrc.yml \
      --exclude bud.config.js \
      --exclude package.json \
      --exclude package-lock.json \
      --exclude README.md \
      --exclude .budfiles \
      --exclude LICENSE.md \
      --exclude tailwind.config.cjs \
      --exclude jsconfig.json \
      --exclude .prettierrc.json \
      ./ ${{ env.dest }}

This structured workflow ensures a seamless deployment process, and securely storing sensitive information as secrets adds an extra layer of protection.

Conclusion

Deploying a custom WordPress theme with GitHub Actions streamlines the development workflow. By automating the deployment process, developers can focus more on coding and less on manual deployment tasks. GitHub Actions, combined with the right configurations and secrets management, provides a robust solution for continuous deployment in WordPress projects.