# Integrate Github Actions with LocalWP

<figure><img src="/files/wuAffmYVjyrkpWkMEO1U" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Video" %}

<figure><img src="/files/IiYmGm58oSeavNaCWmfm" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="References" %}
<https://gist.github.com/ribaricplusplus/9328cbe3251ac07c700d031a1cc1dcea>

<https://gist.github.com/colorful-tones/9adeab19373a0b3693795f199b188c8c>

<https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions>

<https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/mklink>
{% endtab %}

{% tab title="Related Videos" %}

{% endtab %}

{% tab title="Credits" %}
ME
{% endtab %}
{% endtabs %}

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.&#x20;

## Required Software

* [LocalWP](https://localwp.com/) - WordPress Website
* [GitHub Desktop](https://desktop.github.com/) - Sync Code
* [VSCode](https://code.visualstudio.com/) - Edit Code

## Scripts

[**.gitignore**](https://gist.github.com/UnluckyTech/0febe5a63eb060d3ad1c57d0b2aefbb0) - Sync only theme and plugins. (Credit: [LocalWP ](https://youtu.be/cXsrNHBewMc?si=CtI_LGjJ81sfM047))

[**main.yml**](https://gist.github.com/UnluckyTech/532c310b33c0f8ca76b43e20fe53c26f) - Sync main rep with production website. (Credit:[ Cross-Link](https://youtu.be/0zvCN1_kaQs?si=J0IpSiXddV9KJrBM))

## The Plan

<figure><img src="/files/HW1DuhNdgdy9SB5cGYo3" alt=""><figcaption></figcaption></figure>

Check out [here](https://docs.unluckytech.com/unluckytech/knowledge-base/guides/virtual-private-servers-vps/cloudpanel-and-digital-ocean) 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"

<figure><img src="/files/NV0CJGyYGt9loYbhJf2n" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

With the [#website-path](#website-path "mention"), open wp-content in VSCode so we can add the necessary scripts for our workflow.

## Create .gitignore

Get the template [here](https://gist.github.com/UnluckyTech/0febe5a63eb060d3ad1c57d0b2aefbb0). 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.

<figure><img src="/files/Y502OZKZsUfp4f1eX42q" alt=""><figcaption></figcaption></figure>

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

Local Path - Location to your symbolic link.&#x20;

{% hint style="info" %}
For "Local Path" do not include the symbolic link in your path.&#x20;
{% endhint %}

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
```

{% hint style="danger" %}
RSA is outdated refer [here](https://www.ssh.com/academy/ssh/keygen) for further explanation.
{% endhint %}

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

<figure><img src="/files/G13m5OsRRvEhtmSYYwvu" alt=""><figcaption></figcaption></figure>

## 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

<figure><img src="/files/xdyVEJpfRKRwfRPtzjk2" alt=""><figcaption></figcaption></figure>

| 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](https://gist.github.com/UnluckyTech/532c310b33c0f8ca76b43e20fe53c26f) 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.

<pre><code>env:
    SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
    REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
    REMOTE_USER: ${{ secrets.REMOTE_USER }}
<strong>    REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
</strong>    ARGS: "-rlgoDzvc -i"
    TARGET: ${{ secrets.REMOTE_TARGET }}
</code></pre>

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

```
steps:
    - uses: actions/checkout@v3
    # - uses: actions/setup-node@v3.6.0
    #   with:
    #       node-version: '20.3.0'
    # - run: 'npm ci'
    # - run: 'composer install'
    # - run: 'npm run dist'
- uses: easingthemes/ssh-deploy@main
```

{% hint style="info" %}
If you need version control enabled then uncomment and specify the necessary version you need for your website.
{% endhint %}

## 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.&#x20;

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.unluckytech.com/unluckytech/knowledge-base/guides/local-wordpress-environments/integrate-github-actions-with-localwp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.