Getting started with GitHub Action to deploy website continuously!
peter279k - Sep 16 '20 - - Dev Community
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:
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
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 :)!