DEV Community

peter279k
peter279k

Posted on

Getting started with GitHub Action to deploy website continuously!

#actionshackathon #github #opensource

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:

GitHub logo 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/
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)