DEV Community


Posted on

Getting started with GitHub Action to deploy website continuously!


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:

GitHub logo peter279k / 2020-datathon

The Datathon 2020 for demonstration website.



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.


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


  • N/A

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]


    runs-on: ubuntu-latest

    - uses: actions/checkout@v1

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

    - name: Executing remote command to create the Leaflet map token and copy sample data sets
      uses: appleboy/ssh-action@master
        host: ${{ secrets.HOST }}
        USERNAME: ${{ secrets.USERNAME }}
        PORT: ${{ secrets.PORT }}
        KEY: ${{ secrets.SSHKEY }}
        script: cd /var/www/ && 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/
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)