Deploy Your Website with GitHub Actions to Uberspace (the rsync way)

Felix Vaucourt - Oct 29 - - Dev Community

Deploy Your Website with GitHub Actions to Uberspace (the rsync Way)

I am hosting my website on a personal and sustainable webspace at Uberspace.

As a side note, the content I upload is a static HTML website, which is what we will cover in this guide.

In this tutorial, I’ll show you how to automatically build, deploy, and update my content whenever I push to the main branch of my GitHub repository.

Disclaimer: the tutorial is written for Unix systems

I've been using Uberspace for quite some time now. One feature that initially attracted me was the "pay what you want" model, allowing users to pay any amount per month—even as low as 1€. While any amount is accepted, Uberspace recommends at least 5€/month, as it costs them approximately 10€ per month per user to cover expenses.

In addition to flexible pricing, Uberspace provides daily and weekly backups, SSH and SFTP access, HTTPS for all domains, and most impressively, all their servers run on green energy.

In a nutshell, this hosting provider offers:

  • a developer-friendly server with excellent documentation
  • european-based servers, so I don’t have to rely on US-based providers
  • full control over my personal webspace

Warning: this GitHub Action will overwrite files on Uberspace that are not visible in your GitHub repository. Ensure you back up your data or set up a sub-folder on your webspace before proceeding.

Steps:

  1. Create new SSH keys on your local machine
  2. Create the GitHub Action
  3. Configure GitHub Repository Secrets: user, host, and generated private key
  4. Upload your generated public key to Uberspace
  5. Test the setup

Step 1: Create New SSH Keys on Your Local Machine

To transfer files to our webspace, we need a dedicated pair of SSH keys.

You can create these on your local machine or directly on Uberspace. For simplicity, we’ll create them on our machine.

First, create a new folder in your Documents directory to hold your keys:

cd ~/Documents
mkdir uberspace-ssh-keys
cd uberspace-ssh-keys
Enter fullscreen mode Exit fullscreen mode

Now, generate the key pair. You can rename github-uberspace-keys to something you prefer:

ssh-keygen -f github-uberspace-keys -t ed25519 -a 100
Enter fullscreen mode Exit fullscreen mode

Leave the passphrase blank by simply pressing "enter"

Verify that the keys were generated correctly:

ls -l
-rw-------  1 felvct  staff   399B May  5 23:08 github-uberspace-keys
-rw-r--r--  1 felvct  staff    93B May  5 23:08 github-uberspace-keys.pub
Enter fullscreen mode Exit fullscreen mode

Now we can move on to the exciting part: setting up our GitHub Action!

Step 2: Create the GitHub Action

Open your GitHub repository in your favorite IDE or text editor and create a deploy.yml in .github/workflows:

# in the root of your repository
mkdir -p .github/workflows && touch .github/workflows/deploy.yml
Enter fullscreen mode Exit fullscreen mode

Since we’ll be deploying files to a remote location via rsync over SSH, we’ll use the burnett01/rsync-deployments GitHub Action:

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Rsync Deployments Action
        uses: Burnett01/rsync-deployments@7.0.1
        with:
          switches: -avzr --delete
          path: static-site/*
          remote_path: /home/${{ secrets.UBERSPACE_USER }}/html/
          remote_host: ${{ secrets.UBERSPACE_HOST }}
          remote_user: ${{ secrets.UBERSPACE_USER }}
          remote_key: ${{ secrets.DEPLOY_KEY_PRIVATE }}
Enter fullscreen mode Exit fullscreen mode

Note: The path is your local path in the repository, and the remote_path is the path on Uberspace.

Step 3: Configure GitHub Repository Secrets: User, Host, Generated Private Key

You’ll need to save the private SSH key you created at the beginning (github-uberspace-keys) in your GitHub repository as the DEPLOY_KEY_PRIVATE secret. This key will act as the deploy key ({{ secrets.DEPLOY_KEY_PRIVATE }}).

Print out the key to copy it:

cat ~/Documents/uberspace-ssh-keys/github-uberspace-keys
Enter fullscreen mode Exit fullscreen mode

Add it as a secret named DEPLOY_KEY_PRIVATE in your repository’s secrets.

The next two secrets — your username and the hostname of your Uberspace server — can be found on your Uberspace Dashboard. Create the following:

A secret named UBERSPACE_HOST, which is your hostname.
A secret named UBERSPACE_USER, which is your Uberspace username.

Step 4: Upload Your Generated Public Key to Uberspace

Finally, we need to upload the generated public key to Uberspace.

Print and copy the public key:

cat ~/Documents/uberspace-ssh-keys/github-uberspace-keys.pub
Enter fullscreen mode Exit fullscreen mode

For the next step, SSH into your Uberspace account. If you haven’t set an SSH password yet, set one on the Uberspace Dashboard under the “Access” tab.

Once SSH is configured, connect to your Uberspace:

ssh <YOUR_UBERSPACE_USERNAME>@<YOUR_UBERSPACE_HOSTNAME>
Enter fullscreen mode Exit fullscreen mode

Replace <YOUR_UBERSPACE_USERNAME> and <YOUR_UBERSPACE_HOSTNAME> with your Uberspace credentials.

Navigate to the .ssh directory and update the authorized_keys file:

cd ~/.ssh
ls -l
Enter fullscreen mode Exit fullscreen mode

If you don’t see an authorized_keys file, SSH may not be fully set up for your account. You can refer to the Uberspace documentation for guidance.

Now, add your public key to authorized_keys and restrict access so it’s only allowed to rsync to your html directory.

Open the file with nano:

nano authorized_keys
Enter fullscreen mode Exit fullscreen mode

Add the following line, replacing <username> with your Uberspace username and <CONTENT_OF_YOUR_PUBLIC_KEY> with your public key:

# GitHub Actions key for <your_repository/project>
<CONTENT_OF_YOUR_PUBLIC_KEY>
Enter fullscreen mode Exit fullscreen mode

Save the file by pressing CTRL + O, confirm with "Enter," and exit nano with CTRL + X.

Step 5: Test the Setup

Push a change to your main branch, and you should see your action automatically running in the “Actions” tab.

If everything went smoothly, you should see a green checkmark next to your latest action, and your content should be live on your webspace.

Once everything is running, it’s a good practice to delete the generated SSH keys from your local machine and store them securely in a password manager (like Bitwarden).


If you have any questions, feel free to hit me up on Twitter or on GitHub.

Happy Coding!

. . . .