04 January 2024

I was in need of an automatic CLI-deployment for my 11ty blog right here and I solved it using rsync.

Rsync?

Rsync (Remote Sync) is a command-line utility for file synchronization and data transfer between local and remote systems. rsync is often used for backups, so it can for example just upload the files that have changed or delete files that are no longer existent.

Prerequisites

1. Your system supports rsync
2. The server is SSH capable
3. Your server in supports rsync (Uberspace in my case)

Steps

1. Make sure rsync is working on your system. It should be pre-installed on MacOS and Linux. On Windows you could use WSL or Cygwin with rsync

   rsync --version
   

   This should output a version.

2. Add a deploy step to your npm scripts

   "scripts": {
       "deploy": "rsync -avz _site/ user@your-server:/path/to/destination"
     }
   

   Here’s an explanation of the -avz parameters

3. Replace user@your-server:/path/to/destination with your server details and destination path

4. Run the deploy script…

   npm run deploy
   

   …and watch the magic happen! ✨

Since we’re all lazy, here are some convenience functions to make your life even easier.

Build before uploading

Just add a build step before the rsync part.

"deploy": "npm run build &&  rsync -avz _site/ user@your-server:/path/to/"

Clean up local files before building

⚠️ DANGER: Only do this if you’re sure there are only 11ty generated files inside your _sites folder!

Deleting the generated folder makes sure you don’t carry any old versions of CSS files or other stuff.

"deploy": "rm -rf _site && npm run build && rsync -avz _site/ user@your-server:/path/to/"

Delete old files on the server when deploying

⚠️ DANGER: Only do this if you’re sure there are only 11ty generated files on your remote location!

The --delete parameter makes sure old files are deleted.

"deploy": "rsync -avz --delete _site/ user@your-server:/path/to/"

SSH key

If you don’t want to type your password on every deployment, you might want to set ssh keys for your connection. Here’s how that works at Uberspace, but it might work differently on other hosts.

Finished version with everything

"deploy": "rm -rf _site && npm run build && rsync -avz --delete _site/ user@your-server:/path/to/"

👋 Moritz Glantz is my name…

…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.

I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.

If that sounds like you could use my help, let’s talk! 💬

---