Deploying a static website using GitHub Actions

I built this website using Hugo, it’s one of the most popular open-source static site generators.

I wanted to deploy on push to my Droplet in DigitalOcean and I started using GitHub Actions for that. It’s a very good tool to automate CI/CD and is straightforward to set-up.

Here are the steps I followed to automate my deployment - since it’s just a personal website and I’m the only one who makes changes, I deploy on push to master. You will need to:

1. Create a SSH key.

2. Add the following Secrets to GitHub:

   • HOST: your website hostname.
   • USERNAME: the username you’d like to use to SSH into your remote server.
   • KEY: SSH key created in step 1.
   • PORT: this should be 22.

3. Create a new directory in your repo .git/workflow and add a new YAML file.

   In the script section, we are pulling the changes from GitHub, generating the static files using hugo command, and copying the content of the public folder into the directory served by the web server used.

    name: deploy
   
    on: [push]
   
    jobs:
      build:
   
        runs-on: ubuntu-latest
       
        steps:
        - name: executing remote ssh commands using key
          uses: appleboy/ssh-action@master
          with:
            host: ${{ secrets.HOST }}
            username: ${{ secrets.USERNAME }}
            key: ${{ secrets.KEY }}
            port: ${{ secrets.PORT }}
            script: cd /path/to/repo; git pull; hugo; cp -r ./public/* /path/to/serve/directory/.; rm -rf ./public
   

4. Commit & push to GitHub, this will kick-off the workflow created in step 3.

If your workflow fails, you can check the logs by clicking on Details.

Let me know if you need help with any of the steps above ✨ you can reach out to me on Twitter!