Deploying Static Sites with Digitalocean and Github actions is really easy. Let's see how to achieve that in following few steps.

Getting Server Ready

Here, we are taking the case of Digital Ocean. But the process is same for any VPS out there. Let's follow the process step by step:

1. Install nginx on the new server

sudo apt update
sudo apt install nginx

2. Generate the ssh key

First, you need to create one ssh key for the droplet using this command:

ssh-keygen

3. Copy your public key in available keys

Use following command to do that:

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

Getting Github Ready

Now it's time for Github settings. Follow the steps as following:

1. Adding secret keys

Then copy the private key using

cat ~/.ssh/id_rsa

Copy the entire block

Then go into your Repository Settings > Action Secrets add these two secrets there, SERVER_IP that is IP address of your droplet and SSH_KEY that is the key that you just copied. If you use some other names, do remember to update in the workflow file.

2. Adding the Github's workflow file

Now go into your root directory and create .github/workflow/manual.yml and copy this file into that.

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
      - uses: actions/checkout@master
      - name: Deploy
        run: |
          which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y  )
          which rsync || ( apt-get update -y && apt-get install rsync -y )
          eval $(ssh-agent -s)
          ssh-add <(echo "$SSH_PRIVATE_KEY" )
          mkdir -p ~/.ssh
          chmod 700 ~/.ssh
          ssh-keyscan $SERVER_IP >> ~/.ssh/known_hosts
          chmod 644 ~/.ssh/known_hosts
          scp -r * root@$SERVER_IP:/var/www/html
    env:
      SSH_PRIVATE_KEY: ${{secrets.SSH_KEY}}
      SERVER_IP: ${{secrets.SERVER_IP}}
      CI: false

Now to Actions tab and if everything goes well you will see something like this.

Conclusion

So I hope you liked this article. More articles like this will keep popping on XenoX, as we are starting a new series named"The Action Series". Where we will give you a step by step guide on how to use Github Actions. So Don't forget to subscribe.

If you have some issues with this, you can reach out to me on Twitter anytime or even if you have a suggestion on what the next post should be. Thanks, see you next time.👋🏼