How to setup continuous deployment of a website on a VPS using GitHub Actions
Tags: github, devops, webdev
Published: 2020-06-08 09:08:55

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


### Prerequisites

Here are the prerequisites required for this tutorial:

- A [GitHub account](https://github.com)
- 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](https://m.do.co/c/139ece3a635f) 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

```sh
$ ssh user@hostname
$ cd ~/.ssh
```
#### Step 2 - Generate an ssh key

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

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

```sh
$  cat ~/.ssh/id_rsa
```
- In your terminal run the above command select the output content and copy to your clipboard.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j5lm5tfqchujl4onk78x.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tu1ojiihntg9n2rxz632.png)

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.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4sj5vax87nse3sn36w60.png)

>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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kj91iyxwqo07by63hu4u.gif)

### Thank you for reading!
Your comments are welcome