Getting started with GitHub Action to deploy website continuously!
Tags: actionshackathon, github, opensource
Published: 2020-09-16 18:43:43

---
title: Getting started with GitHub Action to deploy website continuously!
published: true
description: My submission to continuous deployment website for Datathon 2020!
tags: actionshackathon, github, opensource
---

# Instructions

Recently I participated this [competition](https://2020datathon.wixsite.com/hack) and our team decide to do data analysis for invoice, address normalizing and weather data sets.

However, I don't have much time to work on above data analysis website. I need to join the [HITCON 2020](https://hitcon.org/2020/) at the same time.

And I want to let my website publish to specific website continuously.

In this tutorial, I will show how to use the GitHub Action to publish my website continuously/easily!


### My Workflow

My workflow is very simple, and every upcoming commits will be published to my specific [website](https://2020datathon.peterli.website/) and I can look at the latest web page instantly.


### Submission Category: 

My category is about the DIY deployment and I will show my deployment YAML file on the next section.


### Yaml File or Link to Code

This GitHub repository is as follows:

{% github peter279k/2020-datathon %}


### Additional Resources / Info

My workflow steps are as follows:

- Clone this repository via `git clone github_repository_url`.
- Add some codes.
- Write a commit for this change.
- Pushing the latest changes and commit via `git push github_repository_url`.
- Done!

And the last thing is about the `deploy.yml` file:

```YAML
name: Deploy

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1

    - name: Copy repository contents via scp to DigitalOcean site
      uses: appleboy/scp-action@master
      env:
        HOST: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
      with:
        source: "."
        target: "/var/www/2020datathon.peterli.website/html"

    - name: Executing remote command to create the Leaflet map token and copy sample data sets
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
        script: cd /var/www/2020datathon.peterli.website/html/js/ && cp config.js.sample config.js && sed -i -e "s/your.leaflet.token/$(cat $HOME/leaflet_token.txt)/g" config.js && cp $HOME/datathon2020.csv /var/www/2020datathon.peterli.website/html/
```

As we can look at above YAML file, the deployment steps are as follows:

- Setting a machine to complete this deployment steps. And I choose the [DigitalOcean](https://www.digitalocean.com/) to setup a machine.
- Generate a SSH private key and public key via `ssh-keygen` command.
- Uploading the public key to targeted machine.
- Setting the encrypted environment variables on this repository. Such as a SSH host, username and the private key.
- Writing above `deploy.yml` and enable GitHub Action Workflow.
- Enjoy the continuous deployment on every upcoming commits!

That's all, hopefully it'll be the nice tutorial to help developers/beginner to know the continuous deployment quickly :)!