Deploy your website with Github Actions

I already told you about Github Actions in a previous article to easily publish your WordPress extension on the official extensions repository

Today, the idea is to automatically deploy your developments when you push your changes to GitHub

State of the art

Currently, I publish my changes to my clients’ WordPress sites through DeployHQ.com

. It’s a very simple service to set up:

• Link DeployHQ to our Github profile
• Select the GH repository to deploy
• Set the SFTP connection on our hosting

At this point, DeployHQ adds a webhook that will be triggered on each push to a defined branch of our Github repo that will start the deployment.

A few seconds later (or it counts in seconds), your changes are online.

Principle of Github Actions

In simple terms, Github Actions allows you to automate tasks according to events occurring on the repository on which it is active.

There can be hundreds or even thousands of tasks and in order to help developers, Github has set up a

marketplace where anyone can publish their Action in order to share it.

The principle:

• Create a configuration file in yml format.
• This file is stored in your GitHub repository
• When the action defined in the configuration file is executed, GitHub Actions comes into play and executes the tasks requested.

Let’s get down to business

In the previous paragraph, I told you about a marketplace. In this marketplace, I came across https://github.com/marketplace/actions/ssh-deploy which according to the description, does exactly what I want it to do.

In practice, you need to create a .github folder in your project that will itself contain a workflows folder. Inside this folder you will add a file with any name you want, but in yml format. For example deploy.yml

.

In this deploy.yml file we will add this code:

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install npm dependencies
        run: npm install
      - name: npm init
        run: npm init -y
      - name: Run build task
        run: npm run build --if-present
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-avz --delete"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

And what does that mean?

name: Deploy

Is simply the name of this action, because of course you can have as many actions as you want.

on:
  push:
    branches:
      - master

When do we get this action? easy! “The “push” of the “master” branch.

So we can imagine having another action with :

on:
  push:
    branches:
      - staging

The next block we are interested in is:

        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-avz --delete"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

Because it defines the information related to Rsync

SSH_PRIVATE_KEY

The private SSH key used for deployment. According to the Action doc, you can create one with the command:

ssh-keygen -m PEM -t rsa -b 4096

This command will create a private key, to be kept secret, and a public key.

The public key is to be added in the file /home/user/.ssh/authorized_key of your server / hosting. The path will be adapted depending on whether you are on a shared hosting allowing SSH or on a dedicated server or other case.

The private key must be stored on your Github account in the settings of the repository you want to deploy. The principle will be the same for each of the following instructions.

By clicking on “New repository secret” you will have 2 fields.

• The “Name” field will take the capitalized part of your settings, for example SERVER_SSH_KEY
• The “Value” field will take the value to send during the transfer (here the value of the private key)

ARGS: "-avz --delete"

The arguments of RSYNC to be found in its doc

I invite you to look at the very simple and clear Action doc for the other parameters.

Tadam!

Normally… if everything went well, your modifications are uploaded automatically when you push them on your main branch (or on the branch you have chosen)

Conclusion

You now know how to use Github Actions to deploy your sites, all that’s left to do is to make nice websites 😉

If like me you are a WordPress developer but you host your sites at WPEngine, know that there is an action that allows you to deploy directly at WPEngine!

I’m new to this tool… if you have any questions… it’s not easy, but give it a try anyway by leaving a comment.