How to setup continuous deployment of a website on a VPS using GitHub Actions

Doesn't matter if it is a private or public repository

Prerequisites

Here are the prerequisites required for this tutorial:

• A GitHub account
• Any Virtual Private Server, though i prefer DigitalOcean because of how easy it is to get started. If you can sign up on DigitalOcean with my Referral Link you get $100 in credit that can be spent in 60 days.

Some of the things we are going to cover in this tutorial.

• Generating an ssh key on your remote VPS
• Adding your generated public key to authorized keys
• Creating GitHub secret keys
• Configuring GitHub actions to auto-deploy your private/public repository

Step 1 - Open your terminal add ssh into your VPS

$ ssh user@hostname
$ cd ~/.ssh

Step 2 - Generate an ssh key

$  ssh-keygen -t rsa -b 4096 -C "test@example.com"

• The email is the one you use on your GitHub account

Step 3: Press Enter repeatedly to set default name(Don't set a passphrase)

• If you do "ls" in your terminal you will see these two files ( id_rsa and id_rsa.pub)

Step 4 - Add a public key to authorized keys

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

• Note: We’re using >> so that the id_rsa.pub contents are appended to the end of the contents in the authorized_keys file, rather than override the contents in the authorized_keys.

Step 5 - Create GitHub secrets

$  cat ~/.ssh/id_rsa

• In your terminal run the above command select the output content and copy to your clipboard.

Head over to your GitHub repository you wish to configure,click on settings tab then in options menu click on and add the following secrets:

• HOST: set the key to your hostname or ip address.

• USERNAME: set the key to the username you use to SSH into your VPS.

• SSHKEY: set the key to you copied contents from the command above.

• PORT: set the key to 22

If you are still here, congratulations! we are almost done!

With the steps above completed, we’re left with only a single step more, namely, our .github/workflows/deploy.yml file.

Step 6 - Configure GitHub actions to auto-deploy your private/public repository

Assuming that you have the repo cloned locally on your machine, go ahead and create .github/workflows folder and inside that create a deploy.yml file

• Add the following contents to deploy.yml file

name: Deploy

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1

    - name: Copy repository contents via scp
      uses: appleboy/scp-action@master
      env:
        HOST: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
      with:
        source: "."
        target: "/var/www/mywebsite"

    - name: Executing remote command
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
        script: ls

Notice that my remote command is just " ls ".if you are trying to auto deploy a React App or a Vue App, you could set your script command to Build command.

The Moment of Truth!

Commit the deploy.yml changes, and push to your repository.

It should build and push to the VPS without any errors.

$  git add .

$  git commit -m "deploy"

$  git push origin master

If you head over to your GitHub repository and click on actions menu you shall see this

Yay ! That's it, your repository is officially configured, now everytime you make changes and push to GitHub that action will run and auto deploy your website.

Thank you for reading!

Your comments are welcome