Getting started with GitHub Action to deploy website continuously!

Instructions

Recently I participated this competition 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 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 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:

peter279k / 2020-datathon

The Datathon 2020 for demonstration website.

2020-datathon

Installation

Here are the steps to configure and setup 2020-datathon website

• Using the cp js/config.js.sample js/config.js to copy a config.js file.
• Set the token on config.js file.
• We assume that the docker and docker-compose commands are installed on Ubuntu 18.04 or Ubuntu 16.04.

Demo

• Using the docker-compose up -d to let this website run as a Docker container on current operating system background.

Slide

• N/A

View on GitHub

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:

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 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 :)!