DEV Community

Cover image for Deploying Sage(WordPress Starter theme) to your host using Github Actions
BhanuSingh
BhanuSingh

Posted on

Deploying Sage(WordPress Starter theme) to your host using Github Actions

I had recently started using sage for theme development of a new design upgrade for an old WordPress website. This website was hosted on Digital Ocean droplet having OpenLiteSpeed server installed on it.

If you look at the roots ecosystem, you will see that they Trellis project which take care of Production, Staging and Development environments. But in my case I couldn't change the host. To solve this problem I used Github Actions to setup continuous deployment.

Steps Involved

  1. Setting up Github Repository
  2. Setting up your host machine
  3. Command to push code to Host from local

Setting up Github Repository

I am considering that you have your sage code pushed to your remote github repository.

We will start by adding actions.

  1. Click on the "Actions" tab in your repository.
  2. Click on the button "Skip this and set up a workflow yourself ->" next. You will find it in the top section.
  3. You will be taken to a page where which would be at your-repo/.github/workflows/main.yml. Change the name of the file to deployment.yml as we are creating actions to deploy our code.
  4. Copy the code from below and paste it in your deployment.yml file.
  1. In line no. 27 you will have to change the value of dest. This is what the value of dist will be for you <user>@<host ip>:<path-to-your-theme>. So for example bhanu@111.11.111.111:/var/www/html/wp-content/themes/theme-name
  2. After this is done you have to on "Start Commit" button and merge it into your master branch.
  3. You will have to add a secret DEPLOY_KEY which we will revisit after setting up our host.

Setting up your host machine

ssh into your machine. We will create a SSH key and add it our github repository in order for our give our github repository access to our host machine.

We do this in the following steps.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Enter fullscreen mode Exit fullscreen mode

Don't forget to change the email ID to yours.
This will give you some prompts.

> Generating public/private rsa key pair.
> Enter a file in which to save the key (/home/you/.ssh/id_rsa): [Press enter]
> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]
Enter fullscreen mode Exit fullscreen mode

You have to press enter and skip all of the above. In some cases you may already have an SSH key and you can overwrite it in order to create a fresh one.

You have now created a new ssh at ~/.ssh/id_rsa.

Adding SSH key to the ssh-agent

Enter the following command.

eval $(ssh-agent -s)
> Agent pid 59566
ssh-add ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

Now we need to add our public key id_rsa.pub to the authorized_keys.

You can do this by.

# Getting inside SSH file
$ cd ~/.ssh/

# Copying pub key into your clipboard
$ cat id_rsa.pub
# This would print the content on the screen which you have to copy

# paste the content inside authorized_keys
$ nano authorized_keys
# To save press Ctrl+X -> y -> Press Enter

# Copy the content of public key
$ cat id_rsa
# This will paste the content of the public key which you have to copy starting from Start here till the end.
Enter fullscreen mode Exit fullscreen mode

This is the point where we go back to point 7 of Setting up Github Repository

In your Github repository you go
-> settings tab
-> Secrets
-> Click on New secretbutton
-> Type the name of the secret as DEPLOY_KEY
-> Paste the content of public key copied above here and hit Add secret.

We are almost done. We just have to test if everything is working fine or not.

Go to your local development and git push all the changes you want to deploy. When you are satisfied with the changes and you have pushed those in your master branch use this command.

git push origin master:production
Enter fullscreen mode Exit fullscreen mode

This will push all the contents of master branch to production branch.

Now if you look closely at our deployment.yml file you can see these lines of code.

name: Deployment
on:
  push:
    branches: [ production ]
Enter fullscreen mode Exit fullscreen mode

These lines tells that this action gets triggered when there is a push in the production branch.

You can look at your progress by going to the Actions tab. You would see a action is running. You can click on deploy to check the status and log of the same.

Screenshot of a finished deployment

Let me know if you have any questions regarding this method, or you are stuck somewhere in the process.

Top comments (3)

Collapse
 
alesub profile image
Alejandro Medina

this is super helpful, thanks for sharing it!

Collapse
 
bhanusingh profile image
BhanuSingh • Edited

I have mode this blog to my own website and would be updating the blog if and when needed there.

bhanusingh.in/deploying-sagewordpr...

Collapse
 
puni2112 profile image
puni2112

Very simple to understand and follow. Great Job Bhanu :). I have taught you well. :P