Deploying your static site using rsync on your laptop
/ 2 min read
View more blogs with the tag how-to , View more blogs with the tag rsync , View more blogs with the tag blogging , View more blogs with the tag self-host , View more blogs with the tag ssh-key , View more blogs with the tag ssh , View more blogs with the tag cicd , View more blogs with the tag š¬š§
Table of Contents
Prerequisites
- A running web server, e.g., Caddy or nginx
- A way to open a connection to the server via ssh. How to set up authentication via ssh keys is documented here.
- Ownership of the directories into which the artefact is deployed or the permission to do so. Editing ownership of directories is described here.
Optional: Configure your ssh config, see here.
Deploying an artefact manually via terminal
First, build your artefact. If you use npm the command is as follows: npm run build.
Usually, the artefact can be found in a directory named dist/, public/, or build/.
After that, copy the contents of that directory into the folder on you server via rsync, e.g., rsync -avzr --delete ./dist/ <USERNAME>@<IP_ADDRESS>:<path/to/your/deployed/artefact>
Iām using pnpm and have configured my ssh config, so for me, the two commands look like this:
pnpm buildrsync -avzr --delete ./dist/ metters.dev:/var/www/html/metters.devAdd script to package.json
This can be improved!
Instead of memorizing the command or even typing both of them every time, they can be combined and added as script in your package.json.
Adding this, lets you deploy your site with just npm run deploySite or pnpm deploySite.
{ "scripts": { "deploySite": "echo 'Deploying artefact - please confirm!' && read && pnpm build && rsync -avzr --delete ./dist/ metters.dev:/var/www/html/metters.dev" }}