Integrate Github Actions with LocalWP

Required Software

LocalWP – WordPress Website
GitHub Desktop – Sync Code
VSCode – Edit Code

Scripts

.gitignore – Sync only theme and plugins. (Credit: LocalWP)

main.yml – Sync main rep with production website. (Credit: Cross-Link)

The Plan

Check out here for how you can utilize CloudPanel on a droplet. With that in mind we will focus on the bottom part of this flow chart. All work will be associated with the “Local WordPress Environment”. These changes will not automatically synchronize with the production server. To manage version control and collaboration, GitHub Desktop will be used for syncing your repository and pushing all modifications to a development branch. This ensures all changes are coordinated without impacting the live server.

After completing and approving your work locally, you’ll merge it into the main repository. This action triggers a GitHub workflow, automating the deployment of your new theme. Consequently, the main repository’s content is pushed to the droplet, seamlessly updating the website with your latest theme.

LocalWP

Local WordPress is very simple to setup and really doesnt need much explanation to get running. Simply install the application, follow the installation prompts, and once done select “Create a new site”

Website PATH

Select “Go to site folder” and save this path for the next part of this guide. It should look similar to this below…

"C:\Users\WinUser\Local Sites\unluckytechxyz\app\public\wp-content"

GitHub Desktop

Once installed you will need to sign into your github account. Once done we will then create a new repository and point it to the theme we wish to sync.

Create a SymLink

Go into Command Prompt and run as admin. From there type something similar to this below…

mklink /D "C:\Users\WinUser\Documents\websites\unluckytheme-wp" "C:\Users\WinUser\Local Sites\unluckytechxyz\app\public\wp-content"

“/D” – Creates a directory symbolic link.

“C:\Users\WinUser\Local Sites\unluckytechxyz\app\public\wp-content” – Path to website.

VSCode

There is plenty you can configure with VSCode but we don’t necessarily need to do much for our case. Install the application and select the first icon on the top left. From there we can use it as our code editor.

With the Website PATH, open wp-content in VSCode so we can add the necessary scripts for our workflow.

Create .gitignore

Get the template here. We want to take a look at two specific parts of the template.

Replace “TEMPLATE” with your custom theme.

# DO NOT ignore these themes...
!/themes/TEMPLATE

If you have any plugins you need to sync then uncomment and add as needed here…

# DO NOT ignore these plugins...
# !/plugins/wordpress-seo

Once changed save the file in your websites wp-content.

"C:\Users\WinUser\Local Sites\unluckytechxyz\app\public\wp-content\.gitignore"

Create a New Repository

From GitHub Desktop select “Create a New Repository on your local drive…” and input the necessary info for your website.

Name – The name of you repository. This should be the same name you set for your symlink.

Local Path – Location to your symbolic link.

For “Local Path” do not include the symbolic link in your path.

CORRECT

C:\Users\WinUser\Documents\websites

INCORRECT

C:\Users\WinUser\Documents\websites\unluckytech-wp

Generate SSH Keys

SSH into your production server and enter the command below to generate the necessary keys.

ssh-keygen -t rsa -b 4096

RSA is outdated refer here for further explanation.

Alternatives…

ssh-keygen -t dsa 
ssh-keygen -t ecdsa -b 521
ssh-keygen -t ed25519

authorized_keys

Once you generated your keys type this below to create and add your public key to the file.

cd ~/.ssh
cat id_rsa.pub >> authorized_keys

Add SSH Keys to GitHub

Take your public key and add it to your GitHub account. This way github can have access to our production server.

Profile -> Settings -> SSH and GPG Keys -> New SSH key

Repository Secrets

NAME	SECRET
SSH_PRIVATE_KEY	RSA PRIVATE KEY
REMOTE_HOST	IP ADDRESS
REMOTE_USER	USER
REMOTE_PORT	22
REMOTE_TARGET	/home/USER/htdocs/DOMAIN/wp-content

Create WorkFlow

From your repository select “Actions” -> “set up a workflow yourself”. Paste this template into your workflow and name it “main.yml”. Briefly we will go over the script and what it does.

“name” displays the names of your workflows under your repository’s “Actions” tab

name: Deploy to Droplet

When a push is made to the main branch the workflow will trigger.

on:
    push:
      branches:
        - main

A virtual machine will be made to temporarily host and run the commands in the script.

deploy:
  name: 'Deploying'
  runs-on: 'ubuntu-latest'

We take the secrets we defined earlier and specify them in the script.

env:
    SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
    REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
    REMOTE_USER: ${{ secrets.REMOTE_USER }}
    REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
    ARGS: "-rlgoDzvc -i"
    TARGET: ${{ secrets.REMOTE_TARGET }}

The script will then initiate and begin copying the main repository into the production server.

steps:
    - uses: actions/checkout@v3
    # - uses: actions/[email protected]
    #   with:
    #       node-version: '20.3.0'
    # - run: 'npm ci'
    # - run: 'composer install'
    # - run: 'npm run dist'
- uses: easingthemes/ssh-deploy@main

If you need version control enabled then uncomment and specify the necessary version you need for your website.

Clone Repository

C:\Users\WinUser\Documents\websites\unluckytech-wp

You should now have your repository synced with GitHub Desktop.

Conclusion

Now whenever you update your main branch, your website will automatically update with the necessary changes you have made locally.