Integrate Github Actions with LocalWP

In this guide, we'll walk through the process on how to create a GitHub WorkFlow that'll sync any changes you make to your website locally to the production website.

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"

mklink - Creates a directory or file symbolic or hard link.

"/D" - Creates a directory symbolic link.

"C:\Users\WinUser\Documents\websites\unluckytheme-wp" - Path to create the 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

Before we create our WorkFlow we need to define a few secrets from within our new repository. From your repository...

Settings -> Secrets and variables -> Actions -> Secrets

Name

Secret

SSH_PRIVATE_KEY

RSA PRIVATE KEY

REMOTE_HOST

IP ADDRESS

REMOTE_USER

USER

REMOTE_PORT

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

If you already have a repository with a similar format to what we did above then you can also clone it instead of creating a new one. Create the symbolic link and name the directory the repository name. Clone the repository and save all files within wp-content.

In GitHub Desktop, select "Add existing repository" and paste the path to your Symbolic Link like below...

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.

Last updated 1 year ago